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

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

模块之间需要互相通信。

 

比如:

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。他们都是双重身份。可以被观察也可以观察别人。

posted @ 2012-10-16 10:08  Jun.lu  阅读(855)  评论(0编辑  收藏