JavaScript 最佳实践

最佳实践

24.1 可维护性

24.1.1 什么是可维护性

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

24.1.2 代码约定

1. 可读性
   注释，合理的缩进
2. 有意义的变量和函数命名
   一般命名规则：变量名应该为名词；函数名应该动词开始；

24.1.3 松散耦合

1. 解耦html与JavaScript
2. 解耦css与JavaScript
3. 解耦应用逻辑与事件处理程序

24.1.4 编程实践

1. 尊重对象所有权（如果你不负责创建或者维护某个对象，那么就别对他们进行修改）
2. 避免全局变量
3. 避免与null进行比较
4. 使用常量（将数据从应用逻辑中分离出来，以方便修改与国际化）

24.2 性能

24.2.1 注意作用域

1. 避免全局查找
   访问全局变量总是要比访问局部变量慢，因为需要遍历作用域链，所以将多次使用的全局变量存储于局部变量总是没错的。
2. 避免with语句

24.2.2 选择正确的方法

1. 避免不必要的属性查找
   使用变量和数组要比访问对象的属性更有效率，后者是一个O(n)的操作
2. 优化循环
   
   • 减值迭代
   • 简化终止条件
   • 简化循环体
   • 使用后测试循环
3. 展开循环
   目标对象，大数据集–Duff装置。
4. 避免双重解释–避免出现需要按照JavaScript来解释的字符串

24.2.4 最小化语句数

1. 多个变量声明
   var count = 5;
   var color = red;
   var value = [1,2,3];
   改为：
   var count = 5,
   color = red,
   value = [1,2,3];
2. 插入迭代值
   var name = values[i];
   i++;
   改为：
   var name = values[i++];
3. 使用数组和对象字面量创建

24.2.4 优化DOM交互

1. 最小化现场更新，使用文档碎片
2. 使用innerHTML
   当把innerHTML设置为某个值时，后台会创建一个html解析器，然后使用内部的DOM调用来创建DOM结构；而非基于JavaScript的DOM调用。
3. 使用事件代理
4. 注意HTMLCollection
   任何时候要访问HTMLCollection，都会在文档上进行一次查询，最小化访问HTMLCollection可以极大的改进性能。
   发生以下情况时，会返回HTMLCollection;
   
   • 进行了对getElementsByTagName()的调用
   • 获取了元素的childNodes属性
   • 获取的元素的attributes属性
   • 访问了特殊的集合，如document.forms,document.images