javascrpt设计模式实践——发布订阅模式

发布订阅模式

发布订阅模式，基于一个主题/事件通道，希望接收通知的对象（称为subscriber）通过自定义事件订阅主题，被激活事件的对象（称为publisher）通过发布主题事件的方式被通知。

需求背景：

1. 有A、B两个页面，其中B页面依赖A页面的数据。当A页面数据发生改变时，B页面数据没有实时更新。
2. 实现如下图所示功能：
   

实现思路：

1. 使用发布订阅模式维护一系列订阅者。
2. 用户管理页面订阅角色管理新增修改操作。
3. 角色管理页面新增修改后发布通知。
4. 用户管理页面接受到通知后更新下拉框数据。

上代码

1. 实现维护订阅者对象Subject

//维护一系列订阅者，用来更新引用的依赖
function Subject(){
    this.winList = []
}
/*
*添加订阅者（type：订阅的事件类型，win：订阅者页面）
*/
Subject.prototype.Add = function(type,win){
    if($.isArray(type)){ //如果该页面订阅多个类型
        for(var i = 0;i<type.length;i++){
            this.winList.push({type:type[i],observer:win})
        }
    }else if(typeof type == 'string'){
        this.winList.push({type:type,observer:win})
    }
}
/*
*发送通知（type：事件类型）
*/
Subject.prototype.Notify = function(type){
    var _this = this;
    //循环订阅者，给订阅了该事件的订阅者发送通知。
    for(var i = 0;i< this.winList.length;i++){
        if(this.winList[i].type == type){
            this.winList[i].observer.update && this.winList[i].observer.update(type)
        }
    }
}
//省略部分方法、、、
//Subject.prototype.clear = function () {}
//Subject.prototype.remove = function(){}

2. 用户管理页面

win.update = function(type){ //用来接收事件通知的方法
	if(type === 'role'){
		//更新角色下拉框数据
	}
}
subject.Add('role', win) //用户管理页面订阅role事件
//只需要通过一个subject来维护订阅者，subject可以改成单例模式。
//通过getSubject.Add('role', win) 订阅。

3. 角色管理页面

subject.Notify('role'); //在新增修改角色后发布role事件，所有订阅了role事件的页面会接受到通知，并做对应的逻辑处理。

注

只是上了和发布订阅模式相关的代码，具体实现中还有很多逻辑需要处理，在此简化掉了。如有问题或错误，欢迎大神在评论区指正。