类之间降低耦合javaScript

这篇文章其实是作为js自定义事件的补充，在那篇文章中我们说到了自定义事件对于避免类的污染作用，这篇主要讲讲自定义事件在类之间相互调用的解耦作用：

还是举个例子吧：

假设我们需要实现一个功能，点击登录，登录成功后，页面一部分出现一个欢迎您的信息；

为了便于说明我举了这个功能比较简单的例子，在这个例子中我们需要两个组件（也就是两个类），第一个是登陆模块类login（代表登陆组件），第二个是欢迎信息类welcome（代表登陆成功回调类）;

简单来写一下两个类的分别实现

function login(){}

login.prototype.success=function(){

    var d=new welcome();

    d.showDiv();

}

function welcome(){}

welcome.prototype.showDiv=function(){

      var div=document.createElement('div');

    div.innerHTML='欢迎光临';

     div.className='login';

   document.body.appendChild(div);

}

一般来说实现该功能我们需要在login类里面定义一个success函数，然后在该函数内部执行new welcome()的showDiv方法；

这样一来当welcome类中的showDiv修改之后，我们还必须修改success中的d所调用响应的函数名，这就是传说中的耦合性比较高；

要降低耦合性我们就要请出自定义事件来：

var definedEvent=function(){

this.events={};

}

definedEvent.prototype={

constructor:definedEvent,

addEvent:function(type,event){

if(typeof this.events[type]=='undefined'){
                this.events[type]=new Array();
            }
            this.events[type].push(event);

},

removeEvent:function(type,event){

if(this.events[type] instanceof Array){

var events=this.events[type];

for(var i=0,len=events.length;i<len;i++){

if(events[i]==event){

events.splice(i,1);

break;

}

}

}

},

fire:function(params){

if(!params.target){

params.target=this;

}

if(this.events[params.type] instanceof Array){

var events=this.events[params.type];

for(var i=0,len=events.length;i<len;i++){

events[i](params);

}

}

}

}

我们用自定义事件来修改一下上面的那个需求如下：

var myEvent=new definedEvent();

var wel=new welcome();

function login(){}

login.prototype.success=function(){

   myEvent.fire("myShowDivEvent");

}

function welcome(){

this.bindEvent();

}

welcome.prototype.bindEvent=function(){

    var that=this;

    myEvent.addEvent("myshowDivEvent",that.showDiv.bind(that));

}

welcome.prototype.showDiv=function(){

      var div=document.createElement('div');

    div.innerHTML='欢迎光临';

     div.className='login';

   document.body.appendChild(div);

}

我们利用自定义事件类似jquery中的trigger，将事件放入一个公共集合中，首先实例化自定义事件，然后实例化welcome（此时自定义一个事件并将该事件绑定为showdiv），当success时候直接fire刚才定义的事件名。

这样一来我们就解耦了两个类，其实解耦并不是真正完全解耦，而是降低两个类之间的耦合性，当修改showdiv时候只需要在welcome中修改即可，跟别的类就无关了。相互之间只是通过一个自定义事件作为接口。

在比较大型的项目中一般都会用到自定义事件去弱化类与类之间的耦合性，从而达到互不污染维护性强的效果；