编写可维护的JavaScript-CSDN博客

软件生命周期中80%的成本都消耗在了维护上；而且几乎所有的维护者都不是代码的直接开发人。如何让自己写的代码让别人阅读起来更高效？当然是写代码的时候注入一些规范。那么在Javascript中有哪些编程风格值得我们去注重呢？这篇文章将总结《编写可维护的JavaScript》里面的观点。

缩进风格

上图是Stack Overflow的调查，可见，大部分的Programmer都喜欢用tab进行缩进。每行缩进由4个空格组成。

语句结尾

建议不要省略分号。很多人喜欢写js代码很依赖于自动分号插入，也就是语句后面不加分号。但是这是大多数的情况，像return这样的语句是会出错的。类似的还有其他一些语法，这里就不细说自动分号插入机制了，感兴趣的童鞋可以前往JavaScript ASI 机制详解。

行的长度

这个之前在另外一篇博客中有介绍过，为了保证在小屏笔记本和大屏幕上看到的代码是一致的，通常建议每一行代码不要超过80列。

换行

代码长度超过80列，换行也是有讲究的。建议换行的代码增加两个缩进长度。例如：

callFunction(element1, element2, element3, element4,
        element5);
复制代码

空行

整个函数代码没有空行地紧凑在一起会给阅读代码的人一定的视觉疲劳。也让人厌倦，起码我看到这样的代码就不想再看下去了。对于空行地建议：

在方法之间
在方法中的局部变量和第一条语句之间
在注释之前
在方法内的逻辑片段之间插入空行，提高可读性

命名

命名是我觉得规范中最难的点，怎么让变量或者函数名称还有意境。结合不同的场景，设置不一样的名称。让维护代码的人像看小说一般地阅读代码，就说明命名是成功的！除了变量含义之外，其他的一些规范比如：

驼峰写法
变量用名词
函数用动词+名词
对象私有属性或方法前面加_
常量用全部大写字母且分割单词用下划线
构造函数首字母大写，且以非动词开头

注释

单行注释

独占一行，用来解释下一行代码

if (condition) {
    
    // 如果代码执行到这里，代表通过了condition的校验
    next();
}
复制代码

注意注释之前要加空行、注释也要缩进。

与代码同一行，用来解释之前的代码

var result = something + somethingElse;    // somethingElse will never be null
复制代码

注意注释与代码直接至少添加一个缩进。

多行，用来注释掉一个代码块

// if (condition) {
//     doSomething();
//     doSomethingElse();
// }
复制代码

注释一个代码块时是在连续多行使用单行注释唯一可以接受的情况。但是最好别这样使用。

多行注释

if (condition) {

    /*
     * 如果代码执行到这里
     * 说明balabala
     */
     doSomething();
}
复制代码

要注意缩进、换行、空格、空行。

使用注释声明

注释说明，主要用来做记号。主要有以下几种：

TODO 说明代码还未完成，说明接下来要做的事情。
HACK 表明代码实现走了一个捷径。应当包含为何使用hack的原因。同时也表明也许会有更好的解决办法。
FIXME 说明代码存在bug，应当尽快修复。
REVIEW 说明代码任何可能的改动都需要评审。

变量、函数和运算符

变量声明变量声明习惯一般有两种：一种是“就近”原则，放在离使用最近的地方；第二种就是放在最上面，作为函数内的第一条语句。个人推荐后者，这跟JavaScript引擎解析代码的习惯是一致的。
函数声明函数声明也会被JS引擎提前，建议在函数调用之前声明函数。另外，推荐函数内部的局部函数应当紧接着变量声明之后声明。
立即调用的函数立即执行函数，在开发中肯定会经常使用。好的写法是：

var value = (function() {

    // 函数体
    return {
        message: 'Hi'
    };
}());
复制代码

清晰明了地的让人知道这是一个立即执行函数。

严格模式 ES5引入了严格模式，通过这种方式解析执行js代码，来达到减少错误的目的。代码要以strict mode去解析也很简单，只要将use strict放到js代码中即可。当js解析器看到这样一条没有赋给变量的字符串之后，就会以严格模式去解析代码。一个原则：尽量少地影响到更多代码！什么意思呢？use strict可以放到任何位置，全局或者函数局部都可以。

// bad
"use strict";
function doSomething() {
    // 代码

}

// good
function doSomething() {
    "use strict";
    // 代码

}
复制代码

如果有多个函数要使用严格模式，就用立即函数限制起来，避免影响到全局。

(function() {
    "use strict";
    function doSomething() {
        // 代码
    }
    function doSomethingElse() {
        // 代码
    }
})();
复制代码

相等使用===、!==代替==、!=，避免类型转换。类型转换的相关内容这里就不说了，自行了解。

UI层的松耦合

松耦合的原则：修改一个组件时尽可能不需要修改其他组件代码。

将JavaScript从CSS中抽离避免使用CSS表达式
将CSS从JavaScript中抽离避免直接修改dom的样式，通过类名去实现想要的效果。

// bad
element.style.cssText = "color: red; left: 10px";

// good
.reveal {
    color: red;
    left: 10px;
}

element.className += " reveal";
复制代码

将JavaScript从HTML中抽离避免直接在HTML写事件处理程序和逻辑代码

事件处理

两个规则：

隔离程序逻辑将应用逻辑从所有事件处理程序中抽离出来是最佳实践，举个例子：

// bad
function handleClick(event) {
    var popup = document.getElementById("popup");
    popup.style.left = event.clientX + "px";
    popup.style.top = event.clientY + "px";
    popup.className = "reveal";
}

// good
function handleClick(event) {
    showPopup(event);
}

function showPopup(event) {
    popup.style.left = event.clientX + "px";
    popup.style.top = event.clientY + "px";
    popup.className = "reveal";
}
复制代码

不要滥用事件对象将事件对象event一直传递下去是个很烂的实践。别人并不知道你具体使用到事件对象的什么属性或者方法。继续用上面的例子：

// bad
function handleClick(event) {
    showPopup(event);
}

function showPopup(event) {
    popup.style.left = event.clientX + "px";
    popup.style.top = event.clientY + "px";
    popup.className = "reveal";
}

// good
function handleClick(event) {
    showPopup(event.clientX, event.clientY);
}

function showPopup(x, y) {
    popup.style.left = x + "px";
    popup.style.top = y + "px";
    popup.className = "reveal";
}
复制代码