js组件设计

日常工作中经常会用到各种的js插件，他们是怎么做的呢，这里假设制作一个滑块组件Slider。

html:
<div id="box"><div>

js:
var list = [{ }, { }, { }, …] //数据

//构造函数
function Slider(opts){
    //构造函数需要的参数
    this.wrap = opts.dom; //dom
    this.list = opts.list; //数据

    //构造三步曲
    this.init();
    this.renderDOM();
    this.bindDOM();
}

//第一步 -- 初始化 (定义或获取需要的参数)
Slider.prototype.init = function() {
  //设定宽度
  this.scaleW = window.innerWidth;
  //设定初始的索引值
  this.idx = 0;
};

//第二步 -- 根据数据渲染DOM
Slider.prototype.renderDOM = function(){
  var wrap = this.wrap;
  var data = this.list;
  var len = data.length;
  
  //创建dom
  this.outer = document.createElement('ul');
  for(var i = 0; i < len; i++){
    var li = document.createElement('li');
    var item = data[i];
    ……
    this.outer.appendChild(li);
  }
  //插入文档中
  wrap.appendChild(this.outer);
};

//第三步 -- 绑定 DOM 事件
Slider.prototype.bindDOM = function(){
  var self = this;
  var scaleW = self.scaleW;
  var outer = self.outer;
  
  //事件方法
  var startHandler= function (evt) { evt.preventDefault(); …… }
  var moveHandler= function (evt) {  evt.preventDefault(); …… }
  var endHandler= function (evt) {  evt.preventDefault(); …… }

  //绑定事件
  outer.addEventListener('touchstart', startHandler);
  outer.addEventListener('touchmove', moveHandler);
  outer.addEventListener('touchend', endHandler);
};

//初始化Slider 实例
new Slider({
  dom : document.getElementById('box'),
  list : list
});