# js 最佳实践

# 可维护性

# 什么是可维护的代码

• 可理解性：他人可以接手代码并理解它
• 直观性 : 代码逻辑清晰
• 可适应性 ： 代码以一种数据变化不要求重写的方法编写
• 可扩展性 ：代码已考虑到未来允许对核心功能进行扩展
• 可调试性　：　出错时，方便定位问题所在

# 代码约定

# 可读性

• 代码格式化
• 适当添加注释
• 函数与方法
• 大段代码
• 复杂算法
• Hack，对浏览器的一些 hack

# 变量与函数命名

• 变量名应为名词
• 函数名应为动词开始
• 变量和函数应使用合乎逻辑的名字

# 变量类型透明

由于 js 中的变量是松散类型的，很容易就忘记变量所应包含的数据类型。 解决方案有三种：

1. 初始化时候，初始化一个值，暗示它将来如何使用
2. 命名前添加字符 ， 例如加 o 表示对象。缺点是使代码不直观
3. 每个变量使用类型注释。

以上三种方法，不知何种才是好一点的做法。

# 松散耦合

• 解耦 HTML / javascript HTML 呈现应尽可能与 javascript 分离。更改行为只需要在 js 中进行，更改标记则只在 html 文件中。
• 解耦 CSS / javascript 尽量不在 js 中更改 css，如 element.style.color="red";而应该改为用 class
• 解耦应用逻辑 / 事件处理程序

//事件处理程序
function handlerClick(event){
    var target = event.target;
    var value = target.value;
    dosomething... //应用逻辑
}

可更改为:

//事件处理程序
function handlerClick(event){
    var target = event.target;
    var value = target.value;
    xxx();
}
//应用逻辑
function xxx(){
    dosomething ...
}

这样解耦应用逻辑与事件处理程序有几个好处

首先，让你可以更容易更改触发特定过程的事件，例如原先由鼠标点击触发，可以很方便改为用按键触发

其次，方便进行单元测试.

# 解耦应用逻辑 / 事件处理程序原则：

• 勿将 event 对象传给其他方法，只传来自 event 对象中所需的数据
• 任何可以在应用层面的动作都应该可以在不执行事件的情况下进行
• 任何事件处理程序都应该处理事件，然后将处理转交给应用逻辑

# 编程实践

# 尊重对象所有权

永远不要修改不是由你所有的对象

# 避免全局量

只声明单一的全局变量，作为一个容器，其中定义了其他对象。这种方式叫做命名空间。

命名空间有助于确保代码可以在同一个页面上与其他代码以无害的方式一起工作

# 避免与 null 比较

如果看到了与 null 比较的代码，首先需要确定的是，是否该 if 语句仅仅判断 null 就行。大多数情况下，我们是想要判断是否是确定的类型。

null 比较越少，我们越容易确定代码的目的，以消除不必要的错误

# 使用常量

关键在于将数据和使用它的逻辑进行分离。

以下情况应使用常量：

• 多处用到的值都应该抽取到一个常量。这在修改的时候也不会容易修改漏掉
• 用户界面字符串：用于显示给用户看的字符串，都应该抽取出来方便国际化
• URLs ： 在 web 应用中，资源位置容易变更，所以推荐使用常量
• 任何可能会更改的值

# 性能（待补充）