# 写好 JS 的一些原则

• 各司其责

  让 HTML、CSS 和 JavaScript 职能分商

• 组件封装

  好的 UI 组件具备正确性、扩展性、复用性

• 过程抽象

  应用函数式编程思想

# HTML/CSS/JS 各司其责 结论

• 应当避免不必要的由 JS 直接操作样式
• 可以用 class 来表示状态
• 纯展示类交互寻求零 JS 方案

# 例子：轮播图制作

# 结构

轮播图是一个典型的列表结构，我们可以使用无序列表 ul 元索来实现

# 表现

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

# 行为: API

• Slider
  • +getSelectedltem()
  • +getSelectedltemIndex()
  • +slideTo()
  • +slideNext()
  • +slidePrevious(

# 行为：控制流

使用自定义事件来解耦

# 总结：基本方法

• 结构设计
• 展现效果
• 行为设计
  • API (功能)
  • Event (控制流

# 重构：插件化

# 解耦

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

# 抽象

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

# 总结

• 组件设计的原则：封装性、正确性、扩展性、复用性
• 实现组件的步骤： 结构设计、展现效果、行为设计
• 三次重构
  • 插件化
  • 模板化
  • 抽象化 (组件框架)