组件

一、组件 

    * js组件

             *     把一个效果或者功能用面向对象的方法封装起来，只提供给用户一些相关的方法或者数据接口

             * 

             * 特点

             *     易扩展，易维护。相互之间不会有影响

             * 

             * 组件的组成

             *     1、配置参数

             *         放在初始化函数里（init）

             *     2、方法

             *         放在原型里的函数

             *     3、自定义事件

             *         除了系统以外的事件

二、配置参数

   自己设定的默认参数，如果默认参数没有传进来的参数，那么这个传进来的参数无效

			window.onload=function(){
			 		var p1=new Drage();
			 		//用户传进来的数据
			 		p1.init({
			 			id:'div',
			 			up:function(){
			 				console.log('起来了');
			 			}
			 		});
				
				
			}
			
			//组件的函数就像系统的函数一样，
				function Drage(){
					//在构造函数里面写默认参数
					this.settings={
						id:'',
						up:function(){},
						down:function(){}
					}
					
				}
				//配置默认参数
				Drage.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;  //因为click的主语是构造函数new出来的对象，，下面要调用就需要先存一下，
					this.obj.onclick=function(){
						This.click();
					}
				}
				Drage.prototype.click=function(){
					this.settings.up.call(this);  //调整this的指向。
				}

三、自定义事件

             * 自定义事件

             *     自己定义的事件，除了系统提供以外的事件。有利于多人协作开发，可扩展js原有事件

             *     需要用到事件绑定器、事件触发器

             * 

             *     自定义事件其实就是调用函数，在指定的环境下让这个函数触发，就相当于事件了

             *     （能够让同名的函数一起执行）

        

             * 自定义事件三要素

             *     对象、事件名、事件处理函数

             *         1、可以利用对象数据结构里的key:value的形式把事件名字与事件处理函数对应起来

             *         2、把多个函数放到一个数组里，循环去执行数组里每个函数，就可以做到让所有函数都执行

             * 

             * 定义事件

             *     obj.events={

             *         '事件名1':[fn1,fn2],

             *         '事件名2':[fn3,fn4,fn5],

             *     }

             * 

             * 调用事件（循环去调）让这个事件名的所有函数都被调用

             *     obj.events['事件名1'].fn1();

             *     obj.events['事件名1'].fn2();

             *         

             */

			//添加自定义事件
			function customEvent(obj,eventName,fn){
				/*
				 * obj			对象（）
				 * eventName		对象身上的一个事件名称（它的值是一个数组）
				 * fn			事件处理函数（它是放在数组里）
				 */
				
				obj.events=obj.events||{};		//如果obj身上已经有个这属性，就用自己的
				obj.events[eventName]=obj.events[eventName]||[];		//如果events里面有内容了，就用自己的
				obj.events[eventName].push(fn);		//把事件用push的方法添加到数组里
			}
			
			//触发自定义事件    触发对象身上的所有事件
			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);
					}
				}
			};

		//例子
			window.onload=function(){
				var box=document.getElementById("box");
				
				customEvent(box,'点击',function(){
					console.log('box点击了');
				});
				customEvent(box,'点击',function(){
					console.log('box又点击了');
				});
				
				
				
				box.onclick=function(){
					trigger(box,'点击');
				};
			}

null