Web前端开发最佳实践(11):使用更严格的JavaScript编码方式,提高代码质量

时间:2024-01-02 14:16:44

前言

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代码编辑器的设置中就有针对此工具的单独配置项,配置界面如图所示。

Web前端开发最佳实践(11):使用更严格的JavaScript编码方式,提高代码质量

图 WebStorm中配置JSLint和JSHint

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

Web前端开发最佳实践(11):使用更严格的JavaScript编码方式,提高代码质量

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

Web前端开发最佳实践(11):使用更严格的JavaScript编码方式,提高代码质量

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

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