js 最佳实践
可维护性
什么是可维护的代码
- 可理解性：他人可以接手代码并理解它
- 直观性 : 代码逻辑清晰
- 可适应性 ： 代码以一种数据变化不要求重写的方法编写
- 可扩展性 ：代码已考虑到未来允许对核心功能进行扩展
- 可调试性 ： 出错时，方便定位问题所在
代码约定
可读性
变量类型透明
由于js 中的变量是松散类型的，很容易就忘记变量所应包含的数据类型。
解决方案有三种：
- 初始化时候，初始化一个值，暗示它将来如何使用
- 命名前添加字符 ， 例如加 o 表示对象。缺点是使代码不直观
- 每个变量使用类型注释。
以上三种方法，不知何种才是好一点的做法。
松散耦合
- 解耦 HTML / javascript
HTML呈现应尽可能与javascript分离。更改行为只需要在js中进行，更改标记则只在html文件中。 - 解耦CSS / javascript
尽量不在js中更改css，如element.style.color=”red”;而应该改为用class - 解耦应用逻辑 / 事件处理程序
1
2
3
4
5
6//事件处理程序
function handlerClick(event){
var target = event.target;
var value = target.value;
dosomething... //应用逻辑
}
可更改为:1
2
3
4
5
6
7
8
9
10//事件处理程序
function handlerClick(event){
var target = event.target;
var value = target.value;
xxx();
}
//应用逻辑
function xxx(){
dosomething ...
}
这样解耦应用逻辑与事件处理程序有几个好处，首先，让你可以更容易更改触发特定过程的事件，例如原先由鼠标点击触发，可以很方便改为用按键触发，其次，方便进行单元测试.
解耦应用逻辑 / 事件处理程序原则：
- 勿将event对象传给其他方法，只传来自event对象中所需的数据
- 任何可以在应用层面的动作都应该可以在不执行事件的情况下进行
- 任何事件处理程序都应该处理事件，然后将处理转交给应用逻辑
编程实践
- 尊重对象所有权
永远不要修改不是由你所有的对象 - 避免全局量
只声明单一的全局变量，作为一个容器，其中定义了其他对象。这种方式叫做命名空间。
命名空间有助于确保代码可以在同一个页面上与其他代码以无害的方式一起工作 - 避免与null比较
如果看到了与null比较的代码，首先需要确定的是，是否该if语句仅仅判断null就行。大多数情况下，我们是想要判断是否是确定的类型。
null比较越少，我们越容易确定代码的目的，以消除不必要的错误 - 使用常量
关键在于将数据和使用它的逻辑进行分离。以下情况应使用常量：- 多处用到的值都应该抽取到一个常量。这在修改的时候也不会容易修改漏掉
- 用户界面字符串：用于显示给用户看的字符串，都应该抽取出来方便国际化
- URLs ： 在web应用中，资源位置容易变更，所以推荐使用常量
- 任何可能会更改的值
性能（待补充）
关于作者：
AndyChen，前端开发，Hybrid App
联系方式：374664805@qq.com
博客：http://chen4342024.github.io/本文为原创文章，因此转载请保留原出处
本文永久链接：http://chen4342024.github.io/2016/06/12/js最佳实践/
