一个功能型页面通常由多个模块构成,模块都被统一到全局命名空间中。
模块之间需要互相通信。
比如:
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。他们都是双重身份。可以被观察也可以观察别人。