js组件
把一个效果或者功能用面向对象的方法封装起来，只提供给用户一些相关的方法或者数据接口
1、特点
易扩展，易维护。相互之间不会有影响
2、组件的组成
①配置参数
放在初始化函数里，这是一段关于拖拽的代码
初始化函数
Drag.prototype.init=function(opt){
this.settings={
downFn:opt.downFn||function(){},
moveFn:opt.moveFn||function(){},
upFn:opt.upFn||function(){}
};
};
默认参数
//这是默认参数，下面的程序都要用这里的参数
this.settings={
id:'', //这个属性是必传的
downFn:function(){},
moveFn:function(){},
upFn:function(){}
};
要拿用户传的参数，去覆盖默认参数，用for in方法
//初始化函数
Drag.prototype.init=function(opt){
//在初始化函数里面，拿用户传进来的参数去覆盖默认的参数，并且这个代码要放在init函数的最上面
for(var attr in opt){
if(this.settings.hasOwnProperty(attr)){
//如果默认参数里有这个属性的话，才拿用户传入的参数去覆盖
this.settings[attr]=opt[attr];
}
} this.obj=document.getElementById(this.settings.id); var This=this;
this.obj.onmousedown=function(ev){
This.down(ev);
};
};
②方法
放在原型里的函数
Drag.prototype.down=function(ev){
this.settings.downFn.call(this);
this.disX=ev.clientX-this.obj.offsetLeft;
this.disY=ev.clientY-this.obj.offsetTop;
var This=this;
document.onmousemove=function(ev){
This.move(ev);
};
document.onmouseup=function(){
This.up();
};
};
③自定义事件
除了系统以外的事件
需要用到事件绑定器、事件触发器
自己定义的事件，除了系统提供以外的事件。有利于多人协作开发，可扩展js原有事件
自定义事件其实就是调用函数，在指定的环境下让这个函数触发，就相当于事件了
(1)自定义事件三要素
对象、事件名、事件处理函数
1、可以利用对象数据结构里的key:value的形式把事件名字与事件处理函数对应起来
2、把多个函数放到一个数组里，循环去执行数组里每个函数，就可以做到让所有函数都执行
(2)定义事件
obj.events={
'事件名1':[fn1,fn2],
'事件名2':[fn3,fn4,fn5],
}
//添加自定义事件
function customEvent(obj,eventName,fn){
obj.events=obj.events||{}; //如果obj身上已经有个这属性，就用自己的
obj.events[eventName]=obj.events[eventName]||[]; //如果events里面有内容了，就用自己的
obj.events[eventName].push(fn); //把事件用push的方法添加到数组里
}
(3)调用事件（循环去调）
obj.events['事件名1'].fn1();
obj.events['事件名1'].fn2();
//触发自定义事件
function trigger(obj,eventName){
//触发的时候要去看一下对象身上有没有这个事件，事件是放在对象身上的events下
if(obj.events[eventName]){
for(var i=0;i<obj.events[eventName].length;i++){
obj.events[eventName][i].call(obj);
}
}
};
调用事件
customEvent(box,'点击',function(){
console.log('box点击了');
});