日常工作中经常会用到各种的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
});
