原生JS（二）：手风琴组件

2018-02-03

项目地址：https://github.com/Neilai/widget/blob/master/code/accordion.js

总体架构

由于要把代码组件化，模块化，所以需要规范化。整个JS文件由一个立即函数构成，最后输出一个window.accordion全局变量，这样可以防止其他变量污染作用域。

组件接收两个参数，一个是CSS选择器（获取容器元素），一个是参数项。

核心思想

充分利用模块化，整个代码核心是一个父容器对象，里面包括传入的设置，以及对象获取
充分利用继承机制，将事件绑定，初始化设置，动画模块写在原型链中
充分利用闭包，将列表dom封装和CSS选择器的解析放在r函数的闭包中

具体实现

首先需要将一些参数初始化，分别是：listsize(子元件的offsetwidth)，

translatesize(exposesize到Listsize的差值)，并根据传入的是x还是y初始化需要用作动画的参数。

然后设定容器的宽度
1
boxWidth = this.listSize + (this.list.length - 1) * this.exposeSize;
它的长度等于每一个子元件长度加上其他子元件暴露长度
设定初始位置，根据listsize和exposesize
监听点击事件，如果某子元件点击了，从它开始往前的元件都要超传入方向移动translatesize。

for (var i = 0; i < this.list.length; i++) {
   (function(i){
      self.list[i].addEventListener('click', function() {
         self.setlistPos();
         for (var j = 1; j <= i; j++) {
            //左边距减小， 减小translate长度
            starmove(self.list[j],{[self.direction]:parseInt(self.list[j].style[self.direction]) - self.translate},self.params.speed)
         }
      } ,false);
   })(i)
}