JS编码原则 | 青训营笔记

这是我参与「第五届青训营 」伴学笔记创作活动的第 4 天

本节课重点内容

• JS编码原则 - 各司其责
• JS编码原则 - 组件封装
• JS编码原则 - 过程抽象

JS编码原则 - 各司其责

HTML, CSS, JavaScript分别有不同的职责：

• HTML：负责网页结构 (Structural)
• CSS：负责网页展示 (Presentational)
• JavaScript：负责网页行为 (Behavioral)

具体实现方法：

• 避免不必要的由JS直接操作样式
• 用Class来表示状态，在CSS中编写对应的Class内容
• 纯展示类交互寻求零JS方案

JS编码原则 - 组件封装

组件指的是Web页面上抽出来一个个包含模板(HTML)、功能(JS)和样式(CSS)的单元。

好的组件具备封装性、正确性、扩展性、复用性。

实战例子：轮播图

• 结构(HTML):

  • 轮播图是典型的列表结构 --> 用无序列表<ul>元素来实现

• 展示(CSS)：

  • 使用CSS绝对定位将图片重叠在同一个位置
  • 轮播图切换的状态使用修饰符(modifier)
  • 轮播图的切换动画使用 CSS transition

• 行为(JS):

  • API设计应保证原子操作，职责单一，满足灵活性
  • e.g. slideTo(), slideNext(), slidePrevious()
  • 控制流： 使用自定义事件来解耦

• 重构

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

JS编码原则 - 过程抽象

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

高阶函数：

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

编程范式：

• 命令式 (imperative)
• 声明式 (declarative)

总结

本堂课从JavaScript的编码原则出发，从职责、组件、过程三个角度介绍了如何写出好的JavaScript代码，并且通过主题切换、轮播图等例子实际地展示了不同风格JavaScript代码的效果。