JavaScript 代码约定

可维护性

• 可理解性
• 直观性
• 可适应性
• 可扩展性
• 可调试性

代码约定

• 函数和方法：每个函数或方法都应该包含一个注释，描述其目的和用于完成任务所可能使用的算法。陈述实现的假设也非常重要，汝参数代表什么，函数是否有返回值（因为这个不能从函数定中推断出来）。

• 大段代码：用于完成单个任务的多行代码应该再前面放一个描述任务的注释。

• 复杂的算法：如果使用了一种独特的方式解决某个问题，则要在主时钟解释你是如何做的。这不仅仅可以帮助其他浏览你代码的人，也能在你自己查阅代码的时候帮助理解。

• Hack：因为存在浏览器差异，JavaScript代码一般会包含一些Hack。不要假设其他人在看代码的时候能够理解Hack索要应付的浏览器问题，如果因为其他浏览器无法使用普通的方法，所以扭腰用一些不同的方法，那么请假这些信息放在注释中。这样可以减少出现这种情况的可能性：有人偶然看到你的hack,然后“修正”了它，最后重新引入了你本来修正了的错误。缩进和注释可以带来更可读的代码，未来则更容易维护。

• 变量名应该为名词如：car或person

• 函数名应该以动词开始，如getName()。返回布尔类型值得函数一般以is开头，如：isEnable（）。

• 变量和函数都应使用呵护逻辑的名字，不要担心长度。长度问题可以通过后处理和压缩来缓解。

• 变量类型透明

// 用于指定数据类型的匈牙利标记法

var bFound;   // 布尔型
var iCount;   // 整数
var sName;    // 字符串
var oPerson;  // 对象

松散耦合

1. 解耦HTML/JavaScript

在Web上，HTML和JavaScript各自代表了解决方案中的不同层次：HTML是数据，JavaScript是行为。

<!-- 使用了<script>的紧密耦合 -->
<script>
  docment.write("hello world")
</script>

<!-- 使用时间处理程序属性值的紧密耦合的HTML/JavaScript -->
<input type="button" value="click me" onclilck="doSomething()">


// 将HTML紧密耦合到JavaScript
function insetMessage(msg){
  var container = docment.getElementById("container");
  container.innerHTML = "<div><p>hello world</p></div>"
}

2. 解耦CSS/JavaScript

// CSS对JavaScript的紧密耦合
element.style.color = "red";
element.style.backgroundColor = "blue";

// CSS对JavaScript的松散耦合
element.className = "edit"

//JavaScript对CSS的紧密耦合
div{
  width: exprerssion(docment.body.offsetWidth - 10 + "px");
}

3. 解耦应用逻辑/事件处理程序

function handleKeyPress(event){
  event = EventUtil.getEvent(event);
  if(event.keyCode == 13){
    var target = EventUtil/getTarget(event);
    var value = 5 * parseInt(target.value);
    if(value > 10){
      docment.getElementById("error-msg").style.display = "block";
    }
  }
}

尊重对象所有权

• 不要为实例或原型添加属性

• 不要为实例或原型添加方法

• 不要冲定义已存在的方法

• 创建包含所需功能的新对象，并用它与相关对象进行交互

• 创建自定义类型，继承需要进行修改的类型。然后可以为定义类型添加额外功能。

1. 避免全局量
2. 避免与null进行比较
3. 使用常量

重复值：任何在多出用到的值都应该抽取为一个常量。
用户界面字符串：任何用于显示给用户的字符串，都应该抽取出来以便国际化。
URLs：在Web应用中，资源位置很容易变更，所以推荐使用一个公共地方存放所有的URL。
任意可能会更改的值：每当你再拥戴字面量值得时候，你都要问一下自己这个值字啊未来是不是会变化。

性能

1. 作用域

• 避免全局查找
• 避免with语句

2. 选择正确方法

• 避免不必要的属性查找
• 优化循环：减值迭代、简化终止条件、简化循环体、使用后测试循环
• 展开循环

3. 避免双重解释
4. 性能的其他注意事项：原生方法比较快、switch语句比较快、位运算比较快

最小化语句数

1. 多个变量声明
2. 插入迭代值
3. 使用数组和对象字面量

优化DOM交互

1. 最小化现场更新
2. 使用innerHTML
3. 使用事件代理
4. 注意HTMLCollection

构建过程

• 知识产权问题：若果吧带有完整注释的代码放到线上，那别人就跟容易知道你的以图，对它再利用，并且可能找到安全漏洞。
• 文件大小：书写代码要保证容易阅读，才能更好地维护，但是这对于性能是不利的。浏览器不能从额外的空白字符或者是冗长的函数名和变量名中获得什么好处。
• 代码组织：组织代码要考虑到可维护性并不一定是传送给浏览器的最好方式。

验证

• eval()的使用
• 未声明变量的使用
• 遗漏的分号
• 不恰当的换行
• 错误的逗号使用
• 语句周围遗漏的括号
• switch分支语句中遗漏的break
• 重复声明的变量
• with的使用
• 错误使用的等号（替代了双等号或三等号）
• 无法到达的代码

压缩

1. 文件压缩

• 删除额外的空白（包括换行）
• 删除所有注释
• 缩短变量名

2. HTTP压缩

不过现在基本都是用ESlint语法检测工具、webpack压缩打包了