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


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

模块之间需要互相通信。

比如:

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

优质内容筛选与推荐>>
1、android壁纸路径/目录
2、属性选择器-属性选择器-ID选择器
3、微信小程序顶部(navigationBar)设置为透明
4、云中的微软…
5、转载 藏经阁第2卷-SQL常用的函数


长按二维码向我转账

受苹果公司新规定影响,微信 iOS 版的赞赏功能被关闭,可通过二维码转账支持公众号。

    阅读
    好看
    已推荐到看一看
    你的朋友可以在“发现”-“看一看”看到你认为好看的文章。
    已取消,“好看”想法已同步删除
    已推荐到看一看 和朋友分享想法
    最多200字,当前共 发送

    已发送

    朋友将在看一看看到

    确定
    分享你的想法...
    取消

    分享想法到看一看

    确定
    最多200字,当前共

    发送中

    网络异常,请稍后重试

    微信扫一扫
    关注该公众号





    联系我们

    欢迎来到TinyMind。

    关于TinyMind的内容或商务合作、网站建议,举报不良信息等均可联系我们。

    TinyMind客服邮箱:support@tinymind.net.cn