JS（高程）最佳实践

在阅读js高程最佳实践章节，将自己感触比较深的点记录下来，也就是自已以前没注意或者不知道的知识点。

---

一、什么是可维护的代码？

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

二、代码约定

1.函数和方法都要加注释，说明这个函数方法的作用目的，参数，返回值。如果有算法或者逻辑性比较强的地方需要用步骤文字说明清楚。
2.变量和函数名，要尽量语义化，长点没关系，因为在后面产品部署上线的时候会进行压缩处理，如果是开发版代码应该是有详细的注释和见名知意的命名。变量名用名词，函数、方法用动词开头，如getName();
3.数据类型透明，现在常用的一般是初始化的方式，通过初始化指定变量类型，如var flag=false；

三、松散耦合

1.HTML/JavaScript
就是在html页面中，不要直接插入js代码或者事件处理，js文件中也不要含有太多的html代码，这样会在调试的时候不知道去哪里找元素，有可能动态生成，最好是一开始渲染加载的时候就生成，然后通过显示隐藏控制该DOM结构。
2.CSS/JavaScript
css和js解耦，总结就是一句话，尽量不要去直接修改元素的css属性，而是通过addClass和removeClass控制类来控制样式变化。
3.应用逻辑/事件处理
事件处理-从事件对象提取信息
应用逻辑-将数据进行逻辑处理

四、编程实践

1.尊重对象所有权

• 不要为实例或原型添加属性
• 不要为实例或原型添加方法
• 不要重定义已经存在的方法

2.避免全局变量
如果需要定义多个全局变量可以通过引入命名空间的方式调整。
3.避免与null进行比较
如果有与null的比较，可以尝试修改。引用类型可以用instanceof操作符检查构造函数，值类型可以通过typeof来检查其类型
4.使用常量
在应用逻辑中，可以将一些数据分离成常量使用，这可以避免引入错误的风险。
任何有重复使用的值都应该抽取为一个常量。

五、性能优化

1.注意作用域
避免全局查找，只要涉及到元素查找的操作，如果需要多次使用就应该提取出来。
避免使用with语句，会创建自己的作用域，延长作用域链。
2.优化循环
关键：类似arr.length-1这类操作应该在循环条件之前处理，减少属性查找次数，如：

for(var i=0,j=arr.length;i<j;i++){}或者（减值迭代更高效）for(var i=arr.length;i>=0;i--){}

使用后循环do……while();
利用do…while和switch()语句，通过循环值对8的商和余数将循环展开。
3.最小化语句数
var 声明变量，声明多个
迭代值直接插入操作 var name=values[i++]
使用数组和对象字面量
4.优化DOM交互
最后一次性appendChild（item）；
最后一次设置innerHTML=html；现将html全部拼接
多使用事件代理（将实践绑定在父元素上，通过子元素事件冒泡，同样触发事件处理函数）

六、部署

1.验证，通过JSLint、ESLint进行js检查
2.压缩，代码文件压缩和http压缩