如何写出高质量的JavaScript代码

最新推荐文章于 2022-08-31 23:01:27 发布

luckystar2008

最新推荐文章于 2022-08-31 23:01:27 发布

阅读量501

点赞数

Front End 专栏收录该内容

119 篇文章 0 订阅

订阅专栏

优秀的Stoyan Stefanov在他的新书中（《Javascript Patterns》）介绍了很多编写高质量代码的技巧，比如避免使用全局变量，使用单一的var关键字，循环式预存长度等等。

这篇文章不仅仅从代码本身来考虑如何优化编码，也从代码的设计阶段来考虑，包括书写API文档，同事的review，使用JSLint。这些习惯都能帮助你编写更加高质量的、更易于理解的、可维护的代码（让你的代码在多年之后仍使你引以为傲）。

编写可维护的代码

软件的BUG修复需要花费大量的精力。尤其当代码已经发布之后，随着时间的增长，维护的成本愈发的高。当你一发现BUG的时候，就立即去修复，这时候你的代码还是热乎的，你也不需要回忆，因为就是刚刚写好的。但是当你做了其他任务，几乎完全忘记了这份代码，这时候就需要：

重新学习和理解问题
理解代码是如何解决问题的
另外一个问题是，在大项目或者大公司里面，经常是解决BUG的人不是产生BUG的人，而且也不是发现BUG的人。所以减少理解代码的时间就是最重要的问题，无论这个代码是你自己以前写的还是团队中的其他成员写的，因为我们都想去搞搞新的有意思的东西，而不是去维护那些个陈旧的代码。

还有一个开发中的普遍问题就是，往往读代码的时间比写代码的时间还要多。有时候你钻研一个问题，可以花整整一个下午的时间来考虑代码的编写。这个代码当时是可以工作的，但是随着开发的进行，其他东西发生了很大的变化，这时候也就需要你自己来重新审查修改编写代码。比如：

还有BUG没有解决
添加了新的功能
程序需要在新的环境中运行（比如一个新上市的浏览器）
代码有问题
代码需要重写因为修改了架构甚至要使用另一个语言
因为这些原因，也许你当时一个下午写好的代码，后面需要花费几周的时间来阅读。所以编写可维护的代码对于软件的成功至关重要。可维护的代码包括：

可读性
连续性
预见性
看起来是一个人写的
有文档
最少化全局变量

Javascript使用函数来约定作用域。一个在函数内部声明的变量在外部是不可见的。所以，全局变量也就是声明在任何函数之外的或者没有被声明的变量。

Javascript中，在任何函数之外有个可访问的全局对象，每一个你创建的全局变量都是这个对象的一个属性。在浏览器中，为了方便，通常用window来指代这个全局变量。下面的代码就是说明如何创建一个全局变量：

1
myglobal = "hello"; // antipattern
2
console.log(myglobal); // "hello"
3
console.log(window.myglobal); // "hello"
4
console.log(window["myglobal"]); // "hello"
5
console.log(this.myglobal); // "hello
全局变量的问题

全局变量的问题在于，他在你的所有代码或者一个页面中都共享。他们在同一个命名空间下面，这通常会造成变量名冲突–两个同名的变量，但是确实不同的用处。

通常在一些页面中需要引入一些其他人的代码，比如：

第三方的JS库
广告伙伴的脚本
第三方的用户行为分析或者统计脚本
不同的组件、按钮等等
加入其中一个第三方组件定义了一个全局变量：result。然后在你的程序中，也定义了一个全局变量result。最后的这个result会覆盖点之前的result，这样第三方的脚本就会停止工作。

所以，为了对其他的脚本友好，在一个页面中使用越少的全局变量越好。在后面会有一些方法来告诉你如何减少全局变量，比如使用命名空间，或者自执行的匿名函数，但是最好的避免全局变量的方法就是使用var关键字来声明变量。

因为javascript的两个特性，创建一个全局变量非常的简单。第一，你可以使用一个甚至没有声明的变量，第二，在javascript中，所有未声明的变量都会成为全局对象的一个属性（就像一个声明了的全局变量一样）。看看这个例子：

1
function sum(x,y){
2
result = x + y;
3
return result;
4
}
在这个代码中，result在没有被声明的情况下就被使用了，这个代码也能很好的工作，但是在调用了这个函数之后，就会多一个名为result的全局变量，这是所有问题的根源了。

解决这个问题的办法就是使用var：

1
function sum(x,y){
2
var result = x + y;
3
return result;
4
}
两外一个不好的习惯就是在声明变量的时候使用链式的方法来赋值，这时候，a是局部变量，但是b就成为了全局变量。

1
function foo(){
2
var a=b=0;
3
....
4
}
这是因为，b = 0这个表达式先执行，执行的时候b并没有被声明，所以b就成为了全局变量，然后返回这个表达式的值0，给声明了的变量a，换句话说，就好像你输入的是：var a = (b=0);

如果你已经声明变量，那么这种链式的赋值没有问题：

1
function foo(){
2
var a,b;
3
...
4
}
另外一个避免使用全局变量的原因是考虑到程序的可移植性。如果你想让你的代码在不同的环境中都可以工作，那么使用全局变量就很可能会与新的系统中的全局变量冲突（或许在之前的系统中没有问题）。

忘记var的影响

使用var声明的全局变量和没有使用var生成的全局变量还有一个区别在于删除：

使用var声明创建的全局变量不能被删除。没有使用var声明的全局变量可以被删除。这说明没有使用var声明生成的全局变量不是真正的变量，他们只是全局对象的属性。属性可以通过delete删除，但是变量不行：

01
// define three globals
02
var global_var = 1;
03
global_novar = 2; // antipattern
04
(function () {
05
global_fromfunc = 3; // antipattern
06
}());
07

08
// attempt to delete
09
delete global_var; // false
10
delete global_novar; // true
11
delete global_fromfunc; // true
12

13
// test the deletion
14
typeof global_var; // "number"
15
typeof global_novar; // "undefined"
16
typeof global_fromfunc; // "undefined"
在ES5的严格模式下，给一个为声明的变量赋值会报错。

读取全局对象

在浏览器中，你可以通过window变量来读取全局对象（除非你在函数内部重新定义了window对象）。但在有的环境中，可能不叫window，那么你可以使用下面的代码来获取全局对象：

1
var global = (function(){
2
return this;
3
})();
这样可以获取到全局对象的原因是在function的内部，this指向全局对象。但是这在ES5的严格模式下会不起作用，你需要适配一些其他模式。当你开发自己的库的时候，你可以把你的代码封装在一个立即函数中，然后将this作为一个参数传进来。

单个var模式

在你的代码的顶部只是用一个var关键字，会有以下的好处：

对于所有需要的变量，在一个地方就可以全部看到
避免使用一个未定义的变量
帮助你记忆声明的变量，减少全局变量
更精简的代码
书写很简单：

1
function func() {
2
var a = 1,
3
b = 2,
4
sum = a + b,
5
myobject = {},
6
i,
7
j;
8
// function body...
9
}
通过一个var和逗号来声明多个变量。在声明的时候给变量赋默认值也是不错的做法，可以避免一些逻辑错误，提高代码的可读性。而后你阅读的代码的时候也可以根据变量的默认值来方便的猜测变量的用途。

你也可以在声明变量的时候做一些实际的工作，比如sum = a + b;另外，在操作DOM元素的时候，你也可以把DOM元素的引用保存在一个变量中：

1
function updateElement() {
2
var el = document.getElementById("result"),
3
style = el.style;
4
// do something with el and style...
5
}
滥用了的var

JavaScript允许你在函数内部有多个var语句，但是却都表现的如同在函数的顶部声明一样。这个特性在你使用一个变量然后在后面又声明了这个变量时会导致一些奇怪的逻辑问题。对于JavaScript来说，只要变量在同一个作用域，那么就认为是声明了的，就算是在var语句之前使用也一样。看看这个例子：

1
myname = "global"; // global variable
2
function func() {
3
alert(myname); // "undefined"
4
var myname = "local";
5
alert(myname); // "local"
6
}
7
func();
在这个例子中，或许你期望第一次会弹出global，第二次弹出local。因为第一次的时候没有还没有使用var声明myname，这是应该是全局变量的myname，第二次声明了，然后alert之后应该是local的值。而事实上不是这样的，只要你在函数中出现了var myname，那么js就认为你在这个函数中声明了这个变量，但是在读取这个变量的值的时候，因为var语句还没有执行，所以是undefined，很奇怪的逻辑吧。上面的代码相当于：

1
myname = "global"; // global variable
2
function func() {
3
var myname; // same as -> var myname = undefined;
4
alert(myname); // "undefined"
5
myname = "local";
6
alert(myname); // "local"
7
}
8
func();
我们来解释一下这个现象，在代码的解析中，分两个步骤，第一步先处理变量函数的声明，这一步处理整个代码的上下文。第二步就是代码的运行时，创建函数表达式以及未定义的变量。实际上，我们只是假设了这个概念，这并不在ECMAScript的规范中，但是这个行为常常就是这样解释的。

for循环

在for循环中你会去迭代一些数组元素或者一些HTML元素。for循环常常如此：

1
for (var i = 0; i < myarray.length; i++) {
2
// do something with myarray[i]
3
}
这样写的问题在于，每一次迭代的时候都会计算数组的长度，尤其在这个参数不是一个数组而是一组HTML元素的时候会降低你的程序的性能。HTML元素的集合在页面上，这样每次都会去再页面上查找相应的元素，这是非常耗时的。所以对于for循环，你需要预先保存数组的长度，这样写：

1
for (var i = 0, max = myarray.length; i < max; i++) {
2
// do something with myarray[i]
3
}
这样缓存了参数的长度，在每次迭代的时候就不用再去查找计算了。在查找HTML元素集合的时候，缓存参数长度可以带来可观的性能提升，Safari下面提高两倍的速度，在IE7下面提高190倍的速度。需要注意的是，当你需要操作修改DOM元素的数量的时候，你肯定希望这个值是随时更新的而不是一个常量。

使用下面的单一var模式，你也可以把var提到循环之外：

1
function looper() {
2
var i = 0,
3
max,
4
myarray = [];
5
// ...
6
for (i = 0, max = myarray.length; i < max; i++) {
7
// do something with myarray[i]
8
}
9
}
这个模式可以增强整个代码的连续性，但是不好的一点是当你重构代码的时候复制粘贴就没那么容易了。例如：如果你想在其他函数中也使用这个循环，那你需要确定在新的函数中处理好了i和max（或许还需要删掉这个）。

这个函数还有两个点可以优化的：可以少一个变量（不需要max），递减到0，一个数字与0比较比这个数字与另外一个数字比较更快。

所以就可以写为：

1
var i, myarray = [];
2
for (i = myarray.length; i--;) {
3
// do something with myarray[i]
4
}
针对第二点：

1
var myarray = [],
2
i = myarray.length;
3
while (i--) {
4
// do something with myarray[i]
5
}
这是两个比较微小的点的优化。另外，JSLint可能对于i–会有意见。

for-in循环

for-in循环用来迭代非数组的对象。使用for-in循环通常也成为枚举。

从技术上来说，你也可以用for-in来循环数组，因为数组也是对象，但是不推荐。如果数组有一些自定义的扩展函数，那么就会出错。另外，对象属性的顺序在for-in循环中也是不确定的。所以最好还是用普通的循环来循环数组用for-in来循环对象。

在循环对象的过程中，使用hasOwnProperty()方法来检验是对象本身的属性还是原型链上的属性很重要。

看看下面的这个例子。

01
// the object
02
var man = {
03
hands: 2,
04
legs: 2,
05
heads: 1
06
};
07

08
// somewhere else in the code
09
// a method was added to all objects
10
if (typeof Object.prototype.clone === "undefined") {
11
Object.prototype.clone = function () {};
12
}
在这个例子中，我们有一个简单的称作man的对象字面量。在其他man定义之前或之后的地方，对象原型有一个很有用的clone()方法。因为原型链的原因，所有的对象都自动获得了这个方法。为了在枚举man对象的时候出现clone方法，你需要使用hasOwnProperty方法来区别。如果没有区别来自原型链的方法，那么就会有一些意想不到的事情发生：

01
// 1.
02
// for-in loop
03
for (var i in man) {
04
if (man.hasOwnProperty(i)) { // filter
05
console.log(i, ":", man[i]);
06
}
07
}
08
/* result in the console
09
hands : 2
10
legs : 2
11
heads : 1
12
*/
13
// 2.
14
// antipattern:
15
// for-in loop without checking hasOwnProperty()
16
for (var i in man) {
17
console.log(i, ":", man[i]);
18
}
19
/*
20
result in the console
21
hands : 2
22
legs : 2
23
heads : 1
24
clone: function()
25
*/
另外一种使用方法如下：

1
for (var i in man) {
2
if (Object.prototype.hasOwnProperty.call(man, i)) { // filter
3
console.log(i, ":", man[i]);
4
}
5
}
这样写的好处是可以防止man重新定义了hasOwnProperty方法导致的冲突。如果不想写这么长的一串，你也可以这样：

1
var i, hasOwn = Object.prototype.hasOwnProperty;
2
for (i in man) {
3
if (hasOwn.call(man, i)) { // filter
4
console.log(i, ":", man[i]);
5
}
6
}
严格意义上讲，不适用hasOwnProperty也不是什么错误。根据任务的难度和你对代码的自信程度，你也可以不用这个直接循环。但是当你不确定的时候，最好还是使用这个方法检测一下。

另外一种格式上的改变（不会通过jsLint的检查），去掉for的大括号，然后把if放在同一行。这样做的好处可以让循环体更加突出，缩进也就少一些：

1
// Warning: doesn't pass JSLint
2
var i, hasOwn = Object.prototype.hasOwnProperty;
3
for (i in man) if (hasOwn.call(man, i)) { // filter
4
console.log(i, ":", man[i]);
5
}
不要扩展内建的原型

扩展原型的构造函数，可以提供一些很强大的功能，但是有时候他太强大了。

有时候你会去扩展Object(),Array(),Fucntion()的原型方法，这样会导致可维护性的问题，因为这会让你的代码的移植性变差。其他的开发人员使用你的代码的时候，可能只需要原生的方法，并不需要额外的功能。

另外，你添加进去的方法，如果在循环的时候没有使用hasOwnProperty方法就会被遍历出来，这会让人很迷惑。

所以，最好还是不要扩展基本的对象。除非是下面的情况：

你确定在将来根据ECMAScript规范，浏览器会添加相应的原型方法，那么是可以的，你只不过是提前实现了这个功能。
你确定的你要实现的方法不存在–或许有时候在代码的其他的地方实现了，或者有的浏览器支持，这都是不行的。
有非常清晰的文档，并且与团队成员沟通过
如果在这些情况之下，那么你就可以添加，最好是下面这种形式：

view sourceprint?
1
if (typeof Object.prototype.myMethod !== "function") {
2
Object.prototype.myMethod = function () {
3
// implementation...
4
};
5
}