JS难点--组件开发

 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点击了');
});