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点击了‘);});
??
JS难点--组件开发
原文地址：http://www.cnblogs.com/shengnan-2017/p/7671167.html