1、通过实例了解JavaScript
- HTML/CSS/JS各司其责
- 避免不必要的JS直接操作样式
- 用class表示状态
- 纯展示类交互寻求零JS方案
2、组件封装 组件： weby页面是抽出来一个个包含模板（HTML）、功能（JS）和样式的单元。具备封装性。 轮播图：典型的列表结构。用ul进行排列 例子：
- CSS：
使用CSS绝对定位将图片定位在同一位置，轮播图切换的状态用修饰符，切换的动画用CSS transition
高阶函数：HOF 使用纯函数，提升库的可维护性
3、过程抽象 JS既有命令式，又有声明式。 写代码原则：各司其职、组件分装（考虑复用性、可扩展性）做插件化、过程抽象的方式。
4、JS代码质量优化 数据抽象能够优化代码
- 使用合适的数据结构和算法： 选择合适的数据结构和算法能够明显地影响代码的性能。在处理大量数据时，使用高效的数据结构如Set、Map、Array等能够提升搜索、插入和删除操作的性能。同时，避免使用复杂度较高的算法，尽量选择时间复杂度较低的方案，从而保证代码的高效性。
- 避免全局变量和函数污染： 全局变量和函数的滥用容易导致代码难以维护和出现命名冲突。推荐使用模块化的方式，将功能拆分成小模块，通过导入和导出来控制作用域。这样可以减少全局作用域的污染，提高代码的可维护性。
- 优化循环和迭代： 避免在循环中进行复杂的计算或频繁的DOM操作。在可能的情况下，使用更高效的循环方式，例如使用
for循环替代forEach，因为for循环的性能更高。此外，对于数组的操作，可以考虑使用map、filter、reduce等函数，它们通常比手动编写循环更具可读性和性能优势。 - 优化DOM操作： 避免频繁地直接操作DOM，可以将需要多次修改的DOM操作合并成一次，或者使用文档片段（DocumentFragment）进行离线DOM操作，最后一次性插入到文档中。这样可以减少重绘和回流，提高性能。
- 选择合适的库和框架： 使用合适的库和框架可以显著提高代码的开发效率和性能。在选择库和框架时，要考虑其大小、功能、社区支持以及性能方面的考量。同时，要定期更新库和框架，以获取最新的功能和性能改进。
- 使用Web Workers： 对于一些耗时的计算或需要大量处理的任务，可以考虑使用Web Workers。Web Workers可以在后台线程中执行任务，不会影响主线程的响应性能，从而提升用户体验。
- 进行性能测试和代码审查： 定期进行性能测试和代码审查是优化代码质量的有效手段。性能测试可以帮助发现潜在的性能瓶颈，从而有针对性地进行优化。代码审查可以帮助发现代码中的潜在问题，提高代码的质量和可维护性。
- 使用工具进行静态代码分析： 静态代码分析工具可以帮助检测代码中的潜在错误、代码规范性问题和潜在的性能瓶颈。常用的工具如ESLint、JSHint等可以帮助我们发现潜在的问题并进行修复。
总结起来，JS代码质量优化涵盖了多个方面，包括选择合适的数据结构和算法、避免全局变量和函数污染、优化循环和迭代、减少DOM操作、选择合适的库和框架、使用Web Workers、进行性能测试和代码审查以及使用静态代码分析工具。通过综合运用这些优化策略，我们可以有效提升JavaScript代码的性能、可维护性和可扩展性，从而构建出更加高效和健壮的应用程序。
