JavaScript 编码原则之组件封装
组件封装
做前端，更多的时候是跟 ui打交道，我们是需要把一些 ui的组件给封装起来，然后使用。
组件是指Web页面上抽出来一个个包含模版(HTML)、功能(JS)和样式(CSS)的单元。 好的组件具备封装性、正确性、扩展性、复用性。
定义一个 html结构 轮播图是一个典型的列表的结构 我们可以用无序列表去实现这样的一个结构。
一个列表的结构 有10张图片 这个列表结构重叠切换效果就要通过 css来实现 我们可以用 css绝对定位，将这个图片重叠在同一个位置。修饰符切换图片的状态 图片切换的时候，我们有个动画 可以通过css的transaction，css的这个过渡动画来实现 我们把这个css的样式加上去，然后这个时候几张图片，就会重叠在一起啊，因为现在我们选的是第一张图片 如果我们把它比如选中第3张图片，它就会切换成第三张的图片，就实现了这个css我们要的这个效果。
我们有 html css之后 我们就来用 java script来实现我们的切换行为，我们要去设计就是交互的api，我们要用到的几个 api呢 第一个的话，我们要得到一个就是我们有个叫做getselecteditem的这样的一个就是我们得到当前选中的那个图片元素，然后第2个的我们有 data selected itemindex 得到当前选中的这个图片元素在这个列表里面的这个下标。然后第 3个select to select to某个特定的 index元素上。然后还有select和 slave previous，就分别表示，向后轮播下一张图片和轮播上一张图片。
我们可以定义叫做 spider的一个类 然后在这个类里面我们去实现这样的一些 api，我们已经把这个slide的类给实现了 构造函数里面我们是根据这个container id获得y外面的div的这个元素,然后这个item，就是里面的这些li的这些元素，items是怎么来的呢?它是这个 container点 query selector，把这个item和 list item selected都给取出来，然后把它放到这个items里面去。getselected item，我们只要去判断一下用这个数组的index of方法判断一下这个selected items里面的这个元素是这个 item里面的第几个元素，然后我们 slide to，它 to一个index，那么这个时候，我们首先得到当前被选中的这个元素 然后把当前被选中的这个元素的 class name给设置成非选中状态，然后接下来，我们得到因为这里来 index，我们得到这个item index里面就是要选中的这个 item，然后我们把这 item的这个这个状态呢设置成被选中。实现的是lightroom的功能。
那么select的话呢，我们就可以通过 data selected item得到当前选中的这个index，然后我们的 next index就是这个选中的一个加 1，然后取模因为我们，我们有一个总 items的数量就是取一个余数然后我们就是light to到这个 next，那同样的道理，也是一样的 这个当前的这个元素，然后再减1，然后再减 1之后，我们为什么要用这个 next，加呢?是因为当前，这个元素是零它下到大 s0减 1会变成负 1，然后负 1取余数的话，其实它得到的是一个负数 所以我们，我们这时候，我们统一用这个items，加上就能保证说，它取到的这个余数，是一个正数好然后接下来的话，我们在这个 select to，这个 previous，这样就可以得到这个select的上一张的这个功能。
- 结构设计：HTML
- 展现效果：CSS
- 行为设计：API
- 行为设计：控制流
- 总结
