JavaScript

《编写可维护的JavaScript》

基本的格式化

缩进层级

TAB或者2个空格、4个空格、8个空格。

建议使用4个空格为一个制表符。

语句结尾

有赖于分析器的自动分号插入（Automatic Semicolon Insertion，ASI）机制，JavaScript代码省略分号也是可以正常工作的。ASI会自动寻找代码中应当使用分号但实际没有分号的位置，并插入分号。大多数场景下ASI都会正确插入分号，不会产生错误。但ASI的分号插入规则非常复杂且很难记住，因此我推荐不要省略分号。

行的长度

80

换行

运算符后缩进，且增加两个层级的缩进。

逗号是一个运算符，应当作为前一行的行尾。这个换行位置非常重要，因为ASI机制会在某些场景下在行结束的位置插入分号。总是将一个运算符置于行尾，ASI就不会自作主张地插入分号，也就避免了错误的发生。

这个规则有个例外：给变量赋值时

1
2
var result = something + anotherThing + yetAnotherThing + somethingElse +
                   anotherSomethingElse;

空行

  • 在每个流控制语句之前（比如if和for语句）添加空行。

  • 在方法之间。

  • 在方法中的局部变量和第一条语句之间。

  • 在多行或单行注释之前。

  • 在方法内的逻辑片段之间插入空行，提高可读性。

变量和函数

命名采用驼峰命名法。变量的前缀是名词，函数前缀是动词。

常量

使用大写字母和下划线来命名，下划线用以分隔单词。

构造函数

大驼峰命名法。

null

理解null最好的方式是将它当做对象的占位符（placeholder）。

undefined

那些没有被初始化的变量都有一个初始值，即undefined，表示这个变量等待被赋值。

通过禁止使用特殊值undefined，可以有效地确保只在一种情况下typeof才会返回“undefined”：当变量未声明时。如果你使用了一个可能赋值为一个对象的变量时，则将其赋值为null。

将变量初始值赋值为null表明了这个变量的意图，它最终很可能赋值为对象。typeof运算符运算null的类型时返回“object”，这样就可以和undefined区分开了。

对象直接量

这种方式可以取代先显式地创建Object的实例，然后添加属性的这种做法。

1
2
3
4
5
6
7
8
9
// 不好的写法
var book = new Object();
book.title = "Maintainable JavaScript;
book.author = "Nicholas C. Zakas";
// 好的写法
var book = {
     title: "Maintainable JavaScript,
     author: "Nicholas C. Zakas"
};

数组直接量

1
2
3
4
// 不好的写法
var colors = new Array("red", "green", "blue");
// 好的做法
var colors = ["red", "green", "blue"];

注释

单行注释

建议：

斜杠后一个空格

单行注释前有一个空行

缩进到与下一行代码对齐

如果是代码尾部的注释，与代码之间要有一个缩进的距离

最好不要连续使用单行注释

多行注释

JAVA风格的多行注释：

1
2
3
4
/*
* 这是一段注释
* 第二行
*/

代码尾部注释不要用多行注释格式

语句和表达式

with语句

with语句用于暂修改作用域链，其语法为

1
2
3
with(object){
    statement 
}

width的本意是用来减少键盘的输入的，比如

1
2
obj.a = obj.b
obj.c = obj.d

可以简写成

1
2
3
4
with(obj){
     a = b;
     c = d;
}

但是在实际运行时，解释器会首先判断obj.b和obj.d是否存在，如果不存在的话，再判断全局变量b和d是否存在。这样就导致了低效率，而且可能会导致意外，因此最好不要使用with语句。也就是无法知道变量b和d到底是局部变量还是obj的一个属性。实际上这种困惑对开发者的影响更甚，JavaScript引擎和压缩工具无法对这段代码进行优化，因为它们无法猜出代码的正确含义。

在严格模式中，with语句是被明确禁止的。

for循环

for循环有两种更改循环执行过程的方法，第一种是break，第二种是continue。

Crockford的编程规范不允许使用continue。他主张代码中与其使用continue不如使用条件语句。更容易理解，且不易出错。可由当前代码可读性决定是否使用。

for-in 循环

for-in循环，不仅遍历对象的实例属性（instance property），同样还遍历从原型继承来的属性。当遍历自定义对象的属性时，往往会因为意外的结果而终止。因此，最好使用hasOwnProperty()方法来为for-in循环过滤出实例属性。

通常for循环用来遍历数组成员，for-in循环用来遍历对象的属性。

for-in循环是用来对实例对象和原型链中的键（key）做遍历的，而不是用来遍历包含数字索引的数组的。

变量、函数和运算符

变量声明

推荐使用单var进行变量的声明。

函数声明

…

此外，函数声明不应当出现在语句块之内。

1
2
3
4
5
6
7
8
9
10
// 不好的写法
if (condition) {
     function doSomething() {
          alert('Hi!');
     }
} else {
     function doSomething() {
         alert('Yo!'); 
     }
}

不论condition计算结果如何，大部分浏览器都会使用第二个函数。Firefox会根据计算结果选用合适的函数声明。
这种场景是ECMAScript的一个灰色地带，应当尽可能地避免。

严格模式

最好不要在全局作用域中使用”use strict”。

eval()

在JavaScript中，eval()的参数是一个字符串，eval()会将传入的字符串当作代码来执行。开发者可以通过这个函数来载入外部的JavaScript代码，或者随即生成代码并执行它。

1
eval("alert('Hi!')");

在JavaScript中，eval()并不是唯一可以执行JavaScript字符串的函数，使用Function构造函数、setTimeout()和setInterval也可以。

1
2
3
var myfunc = new Function("alert('Hi!')");
setTimeout("document.body.style.background='red'", 50);
setInterval("document.title = 'It is now '" + (new Date()), 1000);

一个通用的原则是，严禁使用Function，并且只在别无他法时使用eval()。setTimeout()和setInterval也是可以使用的，但不要用字符串形式而要用函数。

编程实践

避免使用全局变量

全局变量带来的问题

命名冲突

代码的脆弱性

难以测试

单全局变量

*YUI定义了唯一一个YUI全局对象。

*jQuery定义了两个全局对象，$和jQuery。只有在$被其他的类库使用了的情况下，为了避免冲突，应当使用jQuery。

单全局变量的意思是所创建的这个唯一全局对象名是独一无二的（不会和内置API产生冲突），并将你所有的功能代码都挂载到这个全局对象上，因此每个可能的全局变量都成为你唯一全局变量的属性，从而不会创建多个全局变量。

命名空间

模块

零全局变量

事件处理

规则1：隔离应用逻辑

应用逻辑是和应用相关的功能性代码，而不是和用户行为相关的。

将应用逻辑从所有事件处理程序中抽离出来的做法是一种最佳实践。

另一个缺点是和测试有关。测试时需要直接触发功能代码，而不必通过模拟对元素的点击来触发。

规则2：不要分发事件对象

最佳的办法是让事件处理程序使用event对象来处理事件，然后拿到所有需要的数据传给应用逻辑。

在处理事件时，最好让事件处理程序成为接触到event对象的唯一的函数。事件处理程序应当在进入应用逻辑之前针对event对象执行任何必要的操作，包括阻止默认事件或阻止事件冒泡，都应当直接包含在事件处理程序中。

例如

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
var MyApplication = {
     handleClick: function(event) {
          event.preventDefault();
          event.stopPropagation();
     
          this.showPopup(event.clientX, event.clientY);
     },

     showPopup: function(x, y) {
          ...
     }
};

addListener(element, "click", function(event) {
     MyApplication.handleClick(event);
});

避免“空比较”

检查原始值

5种原型类型：字符串、数字、布尔值、null和undefined。

最佳选择是用typeof运算符。（实际上也只能准确检测undefined）

1
2
3
4
5
6
7
var num1 = 1;
var num2 = new Number(2);

typeof num1; // "number"
typeof num2; // "object"

typeof null; // "object"

如果要检测null，则直接使用===/!==。

检测引用值

引用值也称作对象。在JavaScript中除了原始值之外的值都是引用。内置的引用类型：Object、Array、Date和Error。

instanceof，它不仅检测构造这个对象的构造器，还检测原型链。检测自定义类型最好能的做法也是用instanceof运算符。

检测函数

大部分情况下，用typeof，不用instanceof。instanceof不能“跨帧”。

检测数组

JavaScript中最古老的跨域问题之一就是在帧之间来回传递数组。instanceof Array在此场景中不总是返回正确的结果。每个帧都会有各自的Array构造函数，因此一个帧中的实例在另外一个帧里不会被识别。

鸭式辨型：

1
2
3
4
// 采用鸭式辨型的方法检测数组
function isArray(value) {
     return typeof value.sort === "function";
}

这种检测方法依赖一个事实，就是数组是唯一包含sort()方法的对象。

最终，Kangax给出了一种优雅的解决方案：

1
2
3
function isArray(value) {
     return Object.prototype.toString.call(value) === "[object Array]";
}

ECMAScript5将Array.isArray()正式引入JavaScript。

检测属性

因为存在IE8以及更早版本IE的情形（在调用DOM对象的hasOwnProperty方法之前应当先检测其是否存在），在判断实例对象是否存在时，更倾向于使用in运算符，只有在需要判断实例属性时才会用到hasOwnProperty()。

将配置数据从代码中分离出来

什么是配置数据

*URL

*需要展现给用户的字符串

*重复的值

*设置（比如每页的配置项）

*任何可能发生变更的值

抽离配置数据

保存配置数据

*java属性文件等进行保存

然后将这个文件转换为JavaScript可用的额文件：

*JSON

*JSONP

*纯JavaScript

抛出自定义错误

try-catch语句

错误类型

Error

所有错误的基本类型。实际上引擎从来不会抛出该类型的错误。

EvalError

通过eval()函数执行代码发生错误时抛出。

RangeError

一个数字超过它的边界时抛出。

ReferenceError

期望的对象不存在时抛出。引用错误。

SyntaxError

给eval()函数传递的代码中有语法错误时。

TypeError

变量不是期望的类型时抛出。

URIError

给encodeURI()、encodeURIComponent()、decodeURI()或者decodeURIComponent()等函数传递格式非法的URI字符串时抛出。

不是你的对象不要动

原则

针对原生对象、DOM对象、浏览器对象模型（BOM）对象、类库对象

不覆盖方法

不新增方法

不删除方法

更好的途径

基于对象的继承

Object.create()

基于类型的继承

首先，原型继承；然后，构造器继承。

1
2
3
4
5
6
7
8
function Person(name) {
     this.name;
}
function Author(name) {
     Person.call(this, name); //继承构造器
}

Author.prototype = new Person();

门面模式

门面模式，也叫做包装器。它为一个已存在的对象创建一个新的接口。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

function DOMWrapper(element) { 
     this.element = element;
}

DOMWrapper.prototype.addClass = function(className) {
     element.className += " " + className;
}

DOMWrapper.prototype.remove = function() {
     this.element.parentNode.removeChild(this.element);
}

var wrapper = new DOMWrapper(document.getElementById("my-div"));
wrapper.addClass("selected");
wrapper.remove();

关于Polyfill的注解

Polyfills也称为shims，是指一种功能的模拟，模拟一些新版本中新特性的原生功能并且要以完全兼容的方式实现。

从维护角度说，最好使用门面模式来代替polyfill。

阻止修改

三种锁定修改的级别：

防止扩展

禁止添加，但可以删除和修改。

Object.preventExtension()，防止扩展。Object.isExtensible()，检测是否可拓展。

密封

禁止添加和删除，但可以修改。

Object.seal()
Object.isSealed()

冻结

禁止删除和添加、修改，只读模式。

Object.freeze()
Object.isFrozen()

以上三种模式中，当操作禁止行为时会静默失败，只有在严格模式下才会报错。

一旦一个对象被锁定了，将无法解锁。

浏览器嗅探

自动化