Javascript 最佳实践 10 条建议

初级开发人员维护自己开发的产品可能也会是一个噩梦，比如我。过年前写的一个产品因为数据不全的问题一直没有上线，昨天数据库的搞定了，要准备上线了，需要我这边改一下功能，我喵了一眼JS，发现其中一个 drawChart() 的函数就用了1000多行，调用了 D3 的 12 个 API 接口，这就是新手写的代码。。。

为了避免自己被自己写过的代码拖累，今天恶补了 Nicholas 的 《Javascript 高级程序设计》中的第 24 章 —— 最佳实践，整理出了 15 条建议，希望可以牢记在心。

1. 有了合适的命名，代码阅读起来就像讲诉故事一样，更容易理解。如要明确变量的类型，可以使用匈牙利命名法，在变量名前加上类型的缩写。例如字符串的缩写是 "s"，字符串变量 "name" 可以命名为 "sname"。

2. 注意代码的松散和耦合，HTML 用于表示数据，JS 用于定义行为，所以应该将应用逻辑、事件处理程序、常量分离开。主要表现为：一个事件处理程序应该从事件对象中提取相关信息，并将这些信息传送到处理应用逻辑的某个方法中；任何用于显示给用户的字符串都应该抽取出来方便国际化；推荐使用一个公共地方用于存放所有的 URL。

3. 不要为实例或原型添加属性、方法；不要重定义已经存在的方法；不要篡改其他人创建的对象，除非这个对象是你在维护。

4. 最多创建一个全局变量，让其他对象和函数存在其中；单一全局变量的延伸便是命名空间的概念，单一的全局对象可以用公司名来命名，将其看作一个容器，其中定义了其他对象和变量。

5. 在判断语句中避免与 null 进行比较。一般通过 API 接口获取数据后都会检查是否获取到结果，这个时候不要直接拿结果跟 null 比较，而应该先确定 API 提供的数据类型是什么。假设数据类型是数组，那么就要通过 instanceof 来检查其是否是一个数组，而非检查其是否非 null。

6. 只要能减少花费在作用域链上的时间，就能增加脚本的整体性能，因此，应该避免全局查找。使用全局变量和函数肯定要比局部的开销更大，所以将在一个函数中会用到多次的全局对象存储为局部变量总是没错的。

7. 对象上的任何属性查找都要比访问变量或者数组花费更长的时间，一旦多次用到对象属性，应该将其存储在局部变量中。

8. 当循环的次数是确定的，消除循环并使用多次函数调用往往更快。（但我还是使用循环吧，除非循环两三次）

9. 最小化语句数：避免多个变量声明；使用数组和对象字面量；三元表达式；

10. 开发环境下将每个对象或自定义类型分别放入其单独的文件中；但在生产环境中，应该合并这些文件，还应该压缩合并后的文件，这样做都是为了优化 http 请求和 web 性能。

现在 Javascript 框架比较成熟的，已经形成生态系统的有 Vue.js 和 React.js 和 Angular.js ，都是为了实现代码的模块化，提高性能和提升代码的可维护性和核心功能的扩展性。在实际开发工作中才发现，确实需要掌握这样一个框架，目前在学 Vue.js，不然全部用原生的 jquery 框架拼装太累了，特别是对于数据导向型的产品。

总觉得这个世界好复杂，人类真的是很聪明，我们现在研发产品都是站在巨人的肩膀上，很多底层的细节都不需要接触到，这是许许多多的人穷尽一生不断努力不断研究的成果。我们应该对科技抱有敬畏之心，不是因为现在风口上的人工智能打败了多少不可能，而是因为很多人一辈子的心血都凝聚在其中。