组件封装

组件是指Web页面上抽出来一个个包含模板（HTML）、功能（JS）、和样式（css）的单元。 好的组件具备封装性、正确性、扩展性、复用性。

例子：用原生js写一个电商网站的轮播图，应该怎样实现？

结构:HTML

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

表现：CSS

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

行为:JS

• API设计应保证原子操作，职责单一,满足灵活性。
• Slider
  • +getSeleto1843
  • +getSelectedltemlndex()- +slideTo()
  • +slideNext（）
  • +slidePrevious()

总结：基本方法

• 结构设计
• 展现样式
• 行为设计
  • API（功能）
  • Event（控制流）

重构

重构：插件化

• 将控制原生抽取成插件
• 插件与组件之间通过以来注入方式建立联系

重构：模板化

重构：组件框架

总结

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

  高阶函数

  常用的高阶函数

• Once
• Throttle
• Debounce
• Consumer/2
• Iterative