JS难点--组件开发

Posted shengnan_2017

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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点击了‘);
});

 

 

 



以上是关于JS难点--组件开发的主要内容,如果未能解决你的问题,请参考以下文章

Relay.js 没有正确解析组合片段

前端开发常用js代码片段

前端开发中最常用的JS代码片段

关于js----------------分享前端开发常用代码片段

vscode代码片段生成vue模板

vue.js 2 - 将单个文件组件的 html 片段提取到独立文件中