在当前前端框架以及各种组件库盛行的时代，从我学习前端到现阶段，像一些轮播图、日历等组件都是直接去使用UI组件库，学习Vue的时候用的Vant、ElementUI，学习React的时候使用Antd等组件库，都说现在轮子太多了，不需要再去造轮子了，但是这并不能让我们直接不去思考他们是如何实现的？
所以今天我就跟随着月影老师，看看如何使用原生的JavaScript写一个电商网站的轮播图？
组件：是指Web页面上抽出来一个个包含模板（HTML）、功能（JS）和样式（CSS）的单元。
一个好的组件需要具备封装性、正确性、扩展性、复用性等。
结构：HTML
轮播图是一个经典的列表结构，我们使用div容器内部使用无序列表<ul>元素来实现。
展示效果：CSS
轮播图，顾名思义在同一个容器中一定时间切换图片，当然可以手动点击轮播图左右侧或者底部，手动切换当前展示的图片。
CSS实现思路：
- 使用CSS绝对定位（position：absolute），将轮播图需要展示的图片重叠在同一个容器中，即在同一个位置
- 轮播图切换的状态使用修饰符（modifier）
- 轮播图的切换动画使用CSS transition
行为设计
API
通常我们使用JS来编写代码的行为，所以API设计应保证原子操作，指责单一，满足灵活性。
在轮播图组件中我们使用class类来实现，在代码中我们会定义以下几个API方法
- getSelectedItem() 获取到当前被选中的图片，也就是给当前被选中的图片添加上一个被选中的类名
- getSelectedItemIndex() 获取到当前被选中轮播图的下标，方便我们直接点击轮播图组件底部的圆点进行展示图片的切换
- slideTo() 跳转至我们选中的图片
- slideNext() 轮播图组件右侧切换至下一张轮播图
- slidePrevious() 轮播图组件左侧切换至上一张轮播图
具体代码实现：
控制流
使用自定义事件来解耦
解耦：
- 将控制元素抽取成插件
- 插件与组件之间通过
依赖注入方式建立联系
将HTML模板化，就像使用Vant等组件库一样，只有模板的HTML，并不需要将整个代码都写在页面上。当我们修改组件时，只需要修改模板代码，不需要修改页面源代码
抽象
- 将通用的组件模型抽象出来
总结
我们在设计组件时应该考虑封装性、正确性、扩展性、复用性等原则；实现一个组件应该先设计基本结构（HTML）、设计展示效果（CSS）、行为设计（API、控制流）；最后我们优化时需要插件化、模板化、抽象化（组件框架）。这样我们才能设计出一个比较实用并且考虑较为周全的组件了。
