2015-09-23 |

js编码规范

前端编码风格规范之javascript 规范

全局命名空间污染与 IIFE

总是将代码包裹成一个 IIFE(Immediately-Invoked Function Expression),用以创建独立隔绝的定义域。这一举措可防止全局命名空间被污染。

IIFE 还可确保你的代码不会轻易被其它全局命名空间里的代码所修改(i.e. 第三方库,window 引用,被覆盖的未定义的关键字等等)。

不推荐

前端编码风格规范之JavaScript 规范

推荐

前端编码风格规范之JavaScript 规范

IIFE(立即执行的函数表达式)

无论何时,想要创建一个新的封闭的定义域,那就用 IIFE。它不仅避免了干扰,也使得内存在执行完后立即释放。

所有脚本文件建议都从 IIFE 开始。

立即执行的函数表达式的执行括号应该写在外包括号内。虽然写在内还是写在外都是有效的,但写在内使得整个表达式看起来更像一个整体,因此推荐这么做。

不推荐

前端编码风格规范之JavaScript 规范

推荐

前端编码风格规范之JavaScript 规范

注意中括号的位置。

so,用下列写法来格式化你的 IIFE 代码:

前端编码风格规范之JavaScript 规范

如果你想引用全局变量或者是外层 IIFE 的变量,可以通过下列方式传参:

前端编码风格规范之JavaScript 规范

严格模式

ECMAScript 5 严格模式可在整个脚本或独个方法内被激活。它对应不同的 javascript 语境会做更加严格的错误检查。严格模式也确保了 javascript 代码更加的健壮,运行的也更加快速。

严格模式会阻止使用在未来很可能被引入的预留关键字。

你应该在你的脚本中启用严格模式,最好是在独立的 IIFE 中应用它。避免在你的脚本第一行使用它而导致你的所有脚本都启动了严格模式,这有可能会引发一些第三方类库的问题。

不推荐

前端编码风格规范之JavaScript 规范

推荐

前端编码风格规范之JavaScript 规范

变量声明

总是使用 var 来声明变量。如不指定 var,变量将被隐式地声明为全局变量,这将对变量难以控制。如果没有声明,变量处于什么定义域就变得不清(可以是在 Document 或 Window 中,也可以很容易地进入本地定义域)。所以,请总是使用 var 来声明变量。

采用严格模式带来的好处是,当你手误输入错误的变量名时,它可以通过报错信息来帮助你定位错误出处。

不推

前端编码风格规范之JavaScript 规范

推荐

前端编码风格规范之JavaScript 规范

理解 JavaScript 的定义域和定义域提升

在 JavaScript 中变量和方法定义会自动提升到执行之前。JavaScript 只有 function 级的定义域,而无其他很多编程语言中的块定义域,所以使得你在某一 function 内的某语句和循环体中定义了一个变量,此变量可作用于整个 function 内,而不仅仅是在此语句或循环体中,因为它们的声明被 JavaScript 自动提升了。

我们通过例子来看清楚这到底是怎么一回事:

原 function

前端编码风格规范之JavaScript 规范

被 JS 提升过后

前端编码风格规范之JavaScript 规范

根据以上提升过程,你是否可理解以下代码?

有效代码

前端编码风格规范之JavaScript 规范

正如你所看到的这段令人充满困惑与误解的代码导致了出人意料的结果。只有良好的声明习惯,也就是下一章节我们要提到的声明规则,才能尽可能的避免这类错误风险。

提升声明

为避免上一章节所述的变量和方法定义被自动提升造成误解,把风险降到最低,我们应该手动地显示地去声明变量与方法。也就是说,所有的变量以及方法,应当定义在 function 内的首行。

只用一个 var 关键字声明,多个变量用逗号隔开。

不推荐

前端编码风格规范之JavaScript 规范

推荐

前端编码风格规范之JavaScript 规范

把赋值尽量写在变量申明中。

不推荐

前端编码风格规范之JavaScript 规范

推荐

前端编码风格规范之JavaScript 规范

文章内容其实还有很多,今天先写到这里,后续的我会陆续更新更多的编码规范,请陆续关注本头条号。

初步预计有:

前端编码风格规范之 HTML 规范

前端编码风格规范之一般规范

来源:前端观察


发表评论

    评价:
    验证码: 点击我更换图片