Web前端开发最佳实践（11）：使用更严格的JavaScript编码方式，提升代码质量

前言

JavaScript语言因为其固有的灵活性，因此致使开发者能够写出不少诡异的代码，甚至一些较为正常的特性，如类型隐式转换、this的指代等等，也会让刚接触此语言的开发者头大不已。尤为是那些熟知其余诸如Java和C#等高级语言的开发者。使用更严格的编码方式，能够最大量避免

启用严格模式

随着JavaScript的发展，开发者及规范制定者也意识到了JavaScript语言自己的一些设计缺陷，因此在ECMAScript5中引入了严格模式。设立严格模式的目的主要是为了消除JavaScript语法上不合理的地方，从而提升代码安全性、编译效率，增长运行速度且更好地兼容JavaScript将来的新版本等。

具体来讲，严格模式主要是针对以下不合理的地方做了改进，包括：

禁用with关键字、防止意外地全局变量、函数中的this再也不默认指向全局、防止函数参数重名、防止对象属性重名、更安全地使用eval等。具体能够参考mozilla网站上的详细介绍。

在严格模式中针对一些编码的格式进行了限制。有些在普通模式下不会报错的代码，在严格模式中可能就会出现运行错误。这种显式抛出错误的方式比以怪异方式运行代码能更早地发现问题。

严格模式目前已经获得了除IE8以外的大部分主流浏览器的支持，因此推荐在代码中使用。

启用严格模式很简单，只要在代码中添加以下代码便可：

"use strict"；

在不支持严格模式的浏览器中，以下代码会被看成普通的语句运行，不会产生反作用：

<script>
    "use strict";
    console.log("这是严格模式。");
</script>
<script>
    console.log("这是正常模式。"); 
</script>

下面介绍在使用严格模式时须要遵循的几条最佳实践。

1. 不要在全局中启用严格模式

若全局设置严格模式，将意味着代码文件中全部的代码都必须遵照严格模式。除非全部的代码都是本身维护，不然这么作会带来风险，由于不能保证其余人维护的代码也是符合严格模式的。好比以下的代码中，在代码文件设置了全局严格模式，应该避免这样的设置方式。

"use strict";
function doSomething() {
    // 这部分代码会运行于严格模式
}
function doSomethingElse() {
    // 这部分代码也会运行于严格模式 
}

即便是其余人维护的代码在不一样的文件中也不建议这么作，由于很难保证发布时候代码不会合并，因此尽可能把严格模式限定在函数做用域范围内。相似以下的设置方式：

function doSomething() {
    "use strict";
    // 这个函数中的代码将会运行于严格模式
}
function doSomethingElse() {
    // 这个函数中代码不会运行于严格模式 
}

若是想给大量的代码设置严格模式，能够把代码包含在一个当即执行的函数内，并在函数开头启用严格模式，示例代码以下：

(function (){
    "use strict";
    // 其余代码
})();

2. 在已有代码中谨慎启用严格模式

若是代码中还包含有不符合严格模式的代码，则启用严格模式会产生风险，由于有可能会致使代码运行错误，页面没法正常展现和交互。在已有代码中启用严格模式要和代码的重构同样受到重视——必须有足够的代码检查和测试，确保每一行代码均可以正常运行。

尽管使用严格模式有如上这些的风险，可是只要使用得当，严格模式能够帮助开发者尽早发现一些潜在的问题。因此推荐在编写JavaScript代码时启用严格模式。

使用JSHint和JSLint

若是要更严格地编写JavaScript代码，可使用JavaScript代码检查工具。目前，流行的检查工具主要是JSLint和JSHint。JSLint是JavaScript大牛Douglas Crockford所创立的。而JSHint则是从JSLint派生出来的，比JSLint更轻量级，而且它提供了一系列的可配置项，让开发者可关掉某些以为没有必要的错误提示。JSHint使用起来更灵活，并不带有强制性的限制，因此推荐开发者使用。

JSHint的检查规则涵盖了大部分的基本编码规范，好比：缺乏分号、空格和tab混合使用、错误的转义等。JSHint官方网站上列出了详细的检查项，每一个检查项都有具体的解释，这些也是学习JavaScript基本规范的好资料。

不少的代码编辑器也集成了JSLint和JSHint这两个代码检查工具，好比在WebStorm代码编辑器的设置中就有针对此工具的单独配置项，配置界面如图所示。

图 WebStorm中配置JSLint和JSHint

在WebStorm中启用JSHint后，JavaScript代码文件中就会有进行JSHint检查的提示信息，以下图所示。

这样就能够很方便地找到代码中不够严谨或存在问题的地方。固然，若是不想使用IDE的插件，也可使用一些自动化的工具，我最近一直在借助Grunt工具来构建和发布Web项目，grunt-contrib-jshint就是其中一个自动化的工具，此工具的运行效果图以下：

此工具配合grunt-contrib-watch 使用，会持续不断地检查JavaScript代码的质量。

如上就是在JavaScript编码中提升代码质量的一些基本手段，这些方式能够避免一些最基本的低级错误，并提升代码的可读性，但并非说使用了严格模式和JSHint工具就能写出高质量的代码。高质量的代码还须要代码自己逻辑清晰，运行性能高，这些就须要开发者更深刻地了解JavaScript语言特性。