编写可维护的JavaScript

空行

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

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

命名

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

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

注释

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

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

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

var result = something + somethingElse;    // somethingElse will never be null

// if (condition) {//     doSomething();//     doSomethingElse();// }

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

使用注释声明

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

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

var value = (function() {    // 函数体    return {        message: 'Hi'    };}());

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

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

UI层的松耦合

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

• 将JavaScript从CSS中抽离避免使用CSS表达式

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

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

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

// badfunction handleClick(event) {    showPopup(event);}function showPopup(event) {    popup.style.left = event.clientX + "px";    popup.style.top = event.clientY + "px";    popup.className = "reveal";}// goodfunction handleClick(event) {    showPopup(event.clientX, event.clientY);}function showPopup(x, y) {    popup.style.left = x + "px";    popup.style.top = y + "px";    popup.className = "reveal";}