编写可维护的JavaScript

时间 2019-11-17

原文原文链接

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

缩进风格

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

语句结尾

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

行的长度

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

换行

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

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

空行

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

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

命名

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

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

注释

单行注释github

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

if (condition) {
    
    // 若是代码执行到这里，表明经过了condition的校验
    next();
}
复制代码

注意注释以前要加空行、注释也要缩进。编程

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

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

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

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

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

注释一个代码块时是在连续多行使用单行注释惟一能够接受的状况。可是最好别这样使用。ide

多行注释

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";
}
复制代码

vue的规范建议能够前往vue最佳实践，一块儿讨论学习吧！