各司其责

切换白天和夜晚的案例

版本1：通过js来设置文字颜色和背景颜色

版本2:将样式class写在CSS里，JS仅仅做切换

版本3：将Label链接到checkbox，隐藏checkbox，根据checkbox进行切换，仅仅用到HTML

• HTML和CSS、JS 各司其责
• 避免不必要由JS直接操作样式
• 用class表示状态， 纯展示类交互寻求零JS方案，
• 同时要想写好js，要学习基本语法和语言特性，
• 理解DOM操作，使用适当的数据结构和算法，
• 异步编程，错误处理和调试，学习并使用相关框架和库，编写可读性强的代码

组件封装

• 定义组件
• 封装数据
• 暴露接口，处理事件和生命周期
• 可配置性，样式化
• 单元测试），

组件设计

• 单一职责原则
• 分离关注点
• 组件的组合和嵌套
• 函数式编程思想

案例：实现轮播图

重构：插件化，模板化，抽象化

在 JavaScript 中，重构是一种优化代码的过程，旨在改善代码的结构、性能、可读性和可维护性，而不改变其外部行为。

重构技巧和原则：

• 提取函数
• 合并函数
• 拆分函数
• 提取变量
• 合并变量
• 重命名变量和函数，给变量或函数命名更具描述性的名称，以提高代码的可读性和理解性。
• 优化算法和数据结构，使用更高效的算法和数据结构来改进代码的性能。
• 使用适当的设计模式来解决特定的问题，提高代码的可扩展性和可维护性。
• 添加注释和文档

重构是一个渐进的过程，可以逐步改进代码。在进行重构时，建议先编写测试用例，以确保代码在重构过程中不会引入新的问题。

过程抽象

将一段代码块封装成一个可执行的过程或函数，以实现对一系列操作的抽象和复用。

通过过程抽象，我们可以将复杂的逻辑分解成更小的可重用的模块，提高代码的可读性和可维护性。在JavaScript中，函数就是一种过程抽象的方式。

常见的编程范式有命令式编程，函数式编程，面向对象编程，响应式编程）