如何写好JavaScript

什么是好的JavaScript代码

写好JavaScript的一些原则

• 各司其责
• 组件封装
• 过程抽象

各司其责

• html/css/js各司其责（css负责样式，js负责行为，将功能分开负责）
• 应当避免不必要的由js直接操作样式（有些功能可以由css直接解决，可以避免使用js，方便进行修改和调试）
• 可以用class来表示状态（通过修改不同的class来快速修改样式等功能）
• 纯展示类交互寻求零js方案（eg：页面深色和浅色模式）

组件封装

组件是指Web页面上抽出来一个个包含模板{html}、功能{js}和样式{css}的单元，好的组件具备时装性、正确性、扩展性、复用性。（通过封装组件，在实际编写程序时直接调用，既方便后期修改功能，也方便进行代码阅读）

基本方法：

• 结构设计
• 展现效果
• 行为设计：API（功能）、Event（控制流）

解耦：

• 将控制元素抽取成插件
• 插件与组件之间通过依赖注入方式建立联系
• 将HTML模板化，更易于扩展

抽象：

• 将组件通过模型抽象出来

过程抽象

过程抽象：

• 用来处理局部细节控制的一些方法
• 函数式编程思想的基础应用

高阶函数

将页面响应等功能也写成相应的函数 HOF：

• 以函数作为参数
• 以函数作为返回值
• 常用于作为函数装饰器

JavaScript代码质量优化

案例：红绿灯、4的幂、洗牌、分红包