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

前言

上次记录到js语法原则的各司其职，这次继续上次的课程内容记录

组件封装

组件是指web页面上抽出来的一个个包含模板(HTML)、功能（JS）和样式（CSS）的单元，好的组件具备封装性、正确性、扩展性和复用性。虽然现在由于有很多优秀的组件存在，往往我们不需要去自己设计一个组件，但我们也要去试着了解他们的实现。

例子：

结构：HTML中的无序列表（ul）

轮播图是典型的列表结构，可以用无序列表（ul）元素来实现，每个图放在一个li标签中。

表现：CSS 绝对定位

使用CSS的绝对定位，将图片重叠在一个位置

切换状态使用修饰符（modifier）

轮播图切换动画使用CSS transition 实现

行为：JS

API设计应保证原子操作，职责单一，满足灵活性

ps：原子操作就是指 不可中断的一个或一系列操作，比如操作系统中的原语wait、read等。
封装一些事件：getSelectedItem()、getSelectedItemIndex()、slidTo()、slideNext()、slidePrevious()……

更进一步：控制流，使用自定义事件来进行解耦。

总结：组件封装需要注意其结构设计、展现效果、行为设计（API、Event等）是否达标

思考：如何来改进这个轮播图？