页面模块之间的通信依赖解决方案

一个功能型页面通常由多个模块构成，模块都被统一到全局命名空间中。

模块之间需要互相通信。

 

比如：

A模块 是时间轴。(MX.timeLine)

B模块 是消息发布框。(MX.messageBox)

当消息模块用户发送一条信息时，时间轴模块要显示这条信息，这显然要通知时间轴更新。

最直接可用的代码是：

 

MX.messageBox.send:function(){
    $.ajax({
      //.....
      success:function( data ){
           MX.timeline.update( data );//当消息发布成功以后通知时间轴更新
           MX.cModel.update( data );//c模块更新
      }  
    })        
} 

在复杂一些需求。

1：有一天C模块被取消掉了，我们删除了C模块的代码，于是MX.cModel.update 就报错了。
（c模块被主动删除，还必须去MessagBoX模块修改代码。如果是另外一个程序员接手，他可能并不知道这两个模块还有关联。而且一个模块的功能应该是独立的，主动的，不应该影响到别人。）

2：一个单独的页面有2个模块通信，更多页面就可能有更多模块在通信，相互交错。说不定C模块需要MessageBox的通知，MessageBox又需要XXX模块的通知。也可能C模块会同时接受MessageBox 和 XXX模块的通知。（听着就头大了。）

问题看起来非常棘手。大家都不希望自己的程序会影响到别人的程序。我们需要依赖更简单一些。

一个简单的观察者模式。

我们可以把每个模块设置成 发布者（被观察）和 订阅者（观察者）两个身份。
具有 addObserver(添加观察者), notice（通知观察者），update（更新自己）

Observer : {
        notice:function(){//通知方法
            for(var i=0; this.observers && i<this.observers.length; i++){
                try{
                    Array.prototype.unshift.call(arguments, {target:this});
                    this.observers[i].update.apply(this.observers[i], arguments);
                }catch(e){
                    window.console && console.log( e );
                }
            }
        },
        addObserver:function( observer ){//添加观察者
            if(observer && observer.update){
                if(!this.observers){
                    this.observers = [];
                }
                this.observers.push(observer);
            }else{
                console.error("observer.update not fucntion ");
            }
        },
        removeObserver:function( observer ){
            for(var i=0; this.observers && i<this.observers.length; i++){
            
                if(observer === this.observers[i]){
                    this.observers.splice(i,1);
                    i--;
                }
            }
        }
    }

继承上面的代码，把messageBox设置成这两个身份。
当C模块需要接受它的通知的时候，代码可能是这样

MX.cModel = {
    init:function(){
    
        //其实这句代码也对timeline模块有了依赖，他直接调用了timeline模块的命名空间。
        //好像这是不可避免的，但如果你可以把这句代码移动到页面尾部，而不直接写在C模块的初始化代码中。
        //在页面尾部显示的添加。当timeline模块被删除 c模块的代码不用动，只需要在页面中把下面这句代码移除，没有任何风险。
        
        MX.timeline.addObserver( this );//把自己添加到timeline的观察者队列中。
    },
    update:function( a,b,c ){
        //a , b, c timeline模块的通知参数
        //...执行自己的update逻辑
        
    }
};

 

我们大可把每个模块直接继承 Observer。他们都是双重身份。可以被观察也可以观察别人。