最佳实践(best practice)，是一个管理学概念，认为存在某种技术、方法、过程、活动或机制可以使生产或管理实践的结果达到最优，并减少出错的可能性。
JavaScript 的最佳实践可以分成几类，适用于开发流程的不同阶段：
一、可维护性
可理解易于理解代码的用途可适应数据的变化，不需要完全重写代码可扩展要考虑未来对核心功能的扩展可调试给出足够的信息，让调试的时候，确定问题所在不可分割函数的功能要单一，功能粒度不可分割，可复用性增强
1、编码规范：编写可维护代码的第一步是认真考虑编码规范。大多数编程语言会涉及编码规范，专业组织有为开发者建立的编码规范，旨在让人写出更容易维护的代码。优秀开源项目有严格的编码规范，可以让社区的所有人容易地理解代码是如何组织的。编码规范对 JavaScript 而言非常重要，因为这门语言实在太灵活了。与大多数面向对象语言不同，JavaScript 并不强迫开发者把任何东西都定义为对象。它支持任何编程风格，包括传统的面向对象编程、声明式编程，以及函数式编程。简单看几个开源的 JavaScript 库，就会发现有很多方式可以创建对象、定义方法和管理环境。编码规范应该尤其注意以下几个方面：
1.1 可读性（统一的代码风格，规范合理的注释信息、报错信息）
1.2 合理的变量函数命名（如：统一的驼峰命名）
1.3 变量类型透明化（默认值、合理的命名、ES6中的函数声明）
**
**
2、松散耦合：只要应用程序的某个部分对另一个部分依赖得过于紧密，代码就会变成紧密耦合，因而难以维护。典型的问题是在一个对象中直接引用另一个对象，这样，修改其中一个，可能必须还得修改另一个。紧密耦合的软件难于维护，肯定需要频繁地重写。考虑到相关的技术，Web 应用程序在某些情况下可能变得过于紧密耦合。关键在于有这个意识，随时注意不要让代码产生紧密耦合。在开发阶段应该尤其注意：
2.1 解耦 HTML/JavaScript（js和html分离）；
**
**
![]( "冯泽刚 > 2021/09/24 > JavaScript中的最佳实践 > image2021-9-24 15:26:27.png")
**
**
2.2 解耦 CSS/JavaScript（通过类名控制css，使用js来控制类名）；
**
**
** ![]( "冯泽刚 > 2021/09/24 > JavaScript中的最佳实践 > image2021-9-24 15:23:7.png")**
**
**
2.3 解耦应用程序逻辑/事件处理程序，如下图：事件处理和逻辑处理代码紧密耦合在一起，结果会导致调试困难，其次也会导致代码复用性问题。
**
**
不要把 event 对象传给其他方法，而是只传递 event 对象中必要的数据。
应用程序中每个可能的操作都应该无须事件处理程序就可以执行。
事件处理程序应该处理事件，而把后续处理交给应用程序逻辑。
**
**
**
**
3、编码惯例：编写可维护的 JavaScript 不仅仅涉及代码格式和规范，也涉及代码做什么。企业开发 Web 应用程序通常需要很多人协同工作。这时候就需要保证每个人的浏览器环境都有恒定不变的规则。为此，开发者应该遵守某些编码惯例：
**3.1 尊重对象所有权（不要直接修改原生对象，重新创建新对象或者使用继承处理）； **
不要给实例或原型添加属性；
不要给实例或原型添加方法；
不要重定义已有的方法；
以上规则也同样适用于原生类型和对象，比如Object、String、document、window。
3.2 不声明全局变量（变量名重复导致代码互相污染，命名空间代替处理）；
**
**
3.3 不要比较 null（js不会自动做类型检查，直接比较具体的类型）；
**
**
3.4 使用常量（重复出现的值、用户界面字符串提取、URL以及其他任何可能变化的值）
重复出现的值：任何使用超过一次的值都应该提取到常量中，这样可以消除一个值改了而另一个值没改造成的错误。这里也包括 CSS 的类名。
用户界面字符串：任何会显示给用户的字符串都应该提取出来，以方便实现国际化。
URL：Web 应用程序中资源的地址经常会发生变化，因此建议把所有 URL 集中放在一个地方管理。
**
**
二、性能
**
**
****1、避免全局查找 （作用域查找开销较大） ，避免使用 with 语句（with会创建内部作用域）， ****改进代码性能非常重要的一件事，可能就是要提防全局查询。全局变量和函数相比于局部值始终是最费时间的，因为需要经历作用域链查找。
![]( "冯泽刚 > 2021/09/24 > JavaScript中的最佳实践 > image2021-9-24 13:51:9.png")
**
**
2、避免不必要的属性查找（频繁使用的全局变量进行缓存处理）、 优化循环（简化终止条件、简化循环体、后测试循环），展开循环（达夫设备：仅适用于超大量数据进行复杂迭代操作的场景）；
****2.1 避免不必要的属性查找： 尽量通过在局部变量中保存值来替代属性查找。
**
**
2.2 优化循环
**
**
2.3 展开循环 达夫设备示例代码：
![]( "冯泽刚 > 2021/09/24 > JavaScript中的最佳实践 > image2021-9-24 14:13:20.png")
**
**
3、适当保持语句最少化（多个变量声明合并、插入迭代性值使用组合语句、 应尽可能使用数组或对象字面量，以消除不必要的语句 ）；
**
**
4、优化dom交互（减少合并dom操作、事件委托、减少对 HTMLCollection 的访问）；
**
**
三、部署
**
**
1、构建流程：文件结构、任务运行器、摇树优化、模块打包器；
2、验证（eslint+prettier）：代码检查工具可以发现 JavaScript 代码中的语法错误和常见的编码错误；
3、压缩（打包）：代码压缩、JavaScript 编译、JavaScript 转译、 HTTP 压缩
**
**
总结：
其他语言的编码惯例可以作为添加注释和确定缩进的参考，但 JavaScript 作为一门适合松散类型 的语言也有自己的一些特殊要求。 由于 JavaScript 必须与 HTML 和 CSS 共存，因此各司其职尤为重要：JavaScript 负责定义行为，HTML 负责定义内容，而 CSS 负责定义外观。如果三者职责混淆，则可能导致难以调试的错误和可维护性问题。随着 Web 应用程序中 JavaScript 代码量的激增，性能也越来越重要。因此应该牢记如下这些事项：
1、执行 JavaScript 所需的时间直接影响网页性能，其重要性不容忽视。 很多适合 C 语言的性能优化策略同样也适合 JavaScript，包括循环展开和使用 switch 语句而不是 if 语句；
2、DOM 交互很费时间，因此应该尽可能限制 DOM 操作的数量；
3、开发 Web 应用程序的最后一步是上线部署， 为辅助部署，应该建立构建流程，将 JavaScript 文件合并为较少的（最好是只有一个）文件。构建流程可以实现很多源代码处理任务的自动化。例如，可以运行 JavaScript 验证程序，确保没有语法错误和潜在的问题。压缩可以让文件在部署之前变得尽量小。启用 HTTP 压缩可以让网络传输的 JavaScript 文件尽可能小，从而提升页面的整体性能。
