[JS设计模式]：观察者模式(即发布-订阅者模式)（4）
程序员文章站
2023-04-05 14:00:40
简介 观察者模式又叫发布 订阅模式，它定义了对象间的一种一对多的关系，让多个观察者对象同时监听某一个主题对象，当一个对象发生改变时，所有依赖于它的对象都将得到通知。 举一个现实生活中的例子，例如小红在淘宝的一家店里看上了一双红色的鞋，小李也在这家店里面看上了一顶黑色的帽子，但是联系卖家时，卖家回答这 ......
简介
观察者模式又叫发布---订阅模式，它定义了对象间的一种一对多的关系，让多个观察者对象同时监听某一个主题对象，当一个对象发生改变时，所有依赖于它的对象都将得到通知。
举一个现实生活中的例子，例如小红在淘宝的一家店里看上了一双红色的鞋，小李也在这家店里面看上了一顶黑色的帽子，但是联系卖家时，卖家回答这两样都没货了。卖家告诉小红小李，要是喜欢的话，可以关注下店铺，到货了，我会给大家通知的。这就是一个典型的发布-订阅模式，卖家是发布者，买家是订阅者。当货来的时候，会依次通知小红、小李等买家，依次给他们发消息通知。
代码实现
var goodsobj = {};
goodsobj.list = []; //存放订阅者
//订阅者
goodsobj.subscribe = function(key,fn){
if(!this.list[key]){
this.list[key] = [];
}
//订阅的消息存放到缓存列表中
this.list[key].push(fn);
}
//取消订阅
goodsobj.unsubscribe = function(key,fn){
var fns = this.list[key];
//如果key对应的消息没有订阅过的话，则返回
if(!fns){
return false;
}
//如果没有传入具体的回调函数,表示取消key对应消息的所有订阅
if(!fn){
fns && (fns.length = 0);
}else{
for(var i = fns.length - 1; i >= 0; i--){
if(fns[i] === fn){
//删除订阅者的回调函数
fns.splice(i,1);
}
}
}
}
//发布者
goodsobj.publish = function(){
var key = array.prototype.shift.call(arguments);
var fns = this.list[key];
//如果没有订阅过该key的消息,直接返回
if(!fns || fns.length === 0){
return false;
}
for(var i = 0,fn; fn = fns[i++];){
fn.apply(this,arguments);
}
}
//小红订阅了鞋
goodsobj.subscribe('shoes',fn1 = function(color){
console.log('订阅鞋的颜色：' + color + '到货了，可以拍了');
});
//小李订阅了帽子
goodsobj.subscribe('cap',fn2 = function(size){
console.log('订阅帽子的尺寸：' + size + '到货了，可以拍了');
});
//发布
goodsobj.publish('shoes','red');
goodsobj.publish('cap',40);
//取消订阅
goodsobj.unsubscribe('shoes',fn1);
//发布消息,看是否能收到
goodsobj.publish('shoes','block');
优化取消订阅
为了优化取消订阅，在订阅的时候，给每个订阅者一个不同的标识，代码如下：
var goodsobj = {};
goodsobj.list = {}; //存放订阅者
var subuid = -1; //每个订阅者标识不一样
//订阅者
goodsobj.subscribe = function(key,fn){
if(!this.list[key]){
this.list[key] = [];
}
//订阅的消息存放到缓存列表中
var token= (++subuid).tostring();
this.list[key].push({
token:token,
fn:fn
});
return token;
}
//取消订阅
goodsobj.unsubscribe = function(token){
for(var m in goodsobj.list){
if(goodsobj.list.hasownproperty(m)){
for(var i = 0, j = goodsobj.list[m].length; i < j; i++ ){
if(goodsobj.list[m][i].token == token){
goodsobj.list[m].splice(i,1);
break;
}
}
}
}
}
//发布者
goodsobj.publish = function(){
var key = array.prototype.shift.call(arguments);
var fns = this.list[key];
//如果没有订阅过该key的消息,直接返回
if(!fns || fns.length === 0){
return false;
}
for(var i = 0,obj; obj = fns[i++];){
obj.fn.apply(this,arguments);
}
}
//小红订阅了鞋
var token1 = goodsobj.subscribe('shoes',function(color){
console.log('订阅鞋的颜色：' + color + '到货了，可以拍了');
});
//小李订阅了帽子
goodsobj.subscribe('cap',function(size){
console.log('订阅帽子的尺寸：' + size + '到货了，可以拍了');
});
//发布
goodsobj.publish('shoes','red');
goodsobj.publish('cap',40);
//取消订阅
goodsobj.unsubscribe(token1);
//发布消息,看是否能收到
goodsobj.publish('shoes','block');
封装全局发布订阅对象
封装一个全局的发布-订阅对象，代码如下：
var event = (function(){
var list = {}, //存放订阅者
subscribe,
unsubscribe,
publish,
subuid = -1; //每个订阅者标识不一样
//订阅者
subscribe = function(key,fn){
if(!list[key]){
list[key] = [];
}
//订阅的消息存放到缓存列表中
var token= (++subuid).tostring();
list[key].push({
token:token,
fn:fn
});
return token;
};
//取消订阅
unsubscribe = function(token){
for(var m in list){
if(list.hasownproperty(m)){
for(var i = 0, j = list[m].length; i < j; i++ ){
if(list[m][i].token == token){
list[m].splice(i,1);
break;
}
}
}
}
};
//发布者
publish = function(){
var key = array.prototype.shift.call(arguments);
var fns = list[key];
//如果没有订阅过该key的消息,直接返回
if(!fns || fns.length === 0){
return false;
}
for(var i = 0,obj; obj = fns[i++];){
obj.fn.apply(this,arguments);
}
};
return {
publish:publish,
subscribe:subscribe,
unsubscribe:unsubscribe
}
})();
//小红订阅了鞋
var token1 = event.subscribe('shoes',function(color){
console.log('订阅鞋的颜色：' + color + '到货了，可以拍了');
});
//小李订阅了帽子
event.subscribe('cap',function(size){
console.log('订阅帽子的尺寸：' + size + '到货了，可以拍了');
});
//发布
event.publish('shoes','red');
event.publish('cap',40);
//取消订阅
event.unsubscribe(token1);
//发布消息,看是否能收到
event.publish('shoes','block');
实例
我们使用上面封装的全局的发布-订阅对象来实现两个模块之间的通信问题；比如现在有一个页面有一个按钮，每次点击此按钮后，div中会显示此按钮被点击的总次数；如下代码：
<button id="clickbtn">点击我计数</button> <div id="showcount">0</div>
js代码如下：
(function(){
var count = 0;
//发布(责处理点击操作、发布消息)
document.getelementbyid('clickbtn').addeventlistener('click',function(){
event.publish('add',count++);
},false);
//订阅(负责监听add这个消息，并把点击的总次数显示到页面上来)
event.subscribe('add',function(curcount){
document.getelementbyid('showcount').innerhtml = curcount;
})
})();
订阅发布更精简代码：
var event = function(){
var listen,obj,remove,one,trigger,__this;
obj = {};
__this = this;
listen = function(key,eventfn){
var _ref,stack;
stack = (_ref = obj[key]) != null ? _ref : obj[key] = [];
return stack.push(eventfn);
};
one = function(key,eventfn){
remove(key);
return listen(key,eventfn);
};
remove = function(key){
var _ref;
return (_ref = obj[key]) != null ? _ref.length = 0 : void 0;
};
trigger = function(){
var fn,stack,_i,_len,_ref,key;
key = array.prototype.shift.call(arguments);
stack = (_ref = obj[key]) != null ? _ref :obj[key] = [];
for(_i=0,_len=stack.length;_i<_len;_i++){
fn = stack[_i];
if(fn.apply(__this,arguments) === false){
return false;
}
}
}
return {
listen:listen,
one:one,
remove:remove,
trigger:trigger
}
}
var addtv = event();
addtv.listen('play',function(data){
console.log('今天上午要播放的电影是：' +data.name);
});
addtv.one('play',function(data){
console.log('只有我订阅的电影信息：' +data.name);
});
addtv.trigger('play',{'name':'国产凌凌漆'});
addtv.remove('play');
addtv.trigger('play',{'name':'国产凌凌漆22'});
参考
上一篇： Vue编程式跳转
下一篇： 创建型设计模式--单例模式