简介

观察者模式又叫发布---订阅模式,它定义了对象间的一种一对多的关系,让多个观察者对象同时监听某一个主题对象,当一个对象发生改变时,所有依赖于它的对象都将得到通知。

举一个现实生活中的例子,例如小红在淘宝的一家店里看上了一双红色的鞋,小李也在这家店里面看上了一顶黑色的帽子,但是联系卖家时,卖家回答这两样都没货了。卖家告诉小红小李,要是喜欢的话,可以关注下店铺,到货了,我会给大家通知的。这就是一个典型的发布-订阅模式,卖家是发布者,买家是订阅者。当货来的时候,会依次通知小红、小李等买家,依次给他们发消息通知。

代码实现

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'});

参考

[JS设计模式]:观察者模式(即发布-订阅者模式)(4)的更多相关文章

  1. js之观察者模式和发布订阅模式区别

    观察者模式(Observer) 观察者模式指的是一个对象(Subject)维持一系列依赖于它的对象(Observer),当有关状态发生变更时 Subject 对象则通知一系列 Observer 对象进 ...

  2. C#设计模式--观察者模式(发布-订阅模式)

    0.C#设计模式--简单工厂模式 1.C#设计模式--工厂方法模式 2.C#设计模式--抽象工厂模式 3.C#设计模式--单例模式 4.C#设计模式--建造者模式 5.C#设计模式--原型模式 6.C ...

  3. 观察者模式 vs 发布-订阅模式

    我曾经在面试中被问道,_“观察者模式和发布订阅模式的有什么区别?” _我迅速回忆起“Head First设计模式”那本书: 发布 + 订阅 = 观察者模式 “我知道了,我知道了,别想骗我” 我微笑着回 ...

  4. 观察者模式(Observer)和发布-订阅者模式(Publish/Subscribe)区别

    观察者模式:定义一对多的关系,让多个观察对象同时监听某一个主题对象,主题对象状态发生变化就通知所有观察者对象.所以它是由两类对像组成:Subject主题+Observer观察者.主题发布事件,观察者通 ...

  5. js设计模式-观察者模式

    定义: 观察者模式又叫发布订阅模式,它定义了对象间的一种一对多的依赖关系.观察者模式让两个对象松耦合地联系在一起,虽然不太清楚彼此的细节,但这不影响他们之间的互相通信. 思路 定义一个对象,在对象中实 ...

  6. js 设计模式——观察者模式

    观察者模式 定义 观察者模式(又被称为发布-订阅(Publish/Subscribe)模式,属于行为型模式的一种,它定义了一种一对多的依赖关系,让多个观察者对象同时监听某一个主题对象.这个主题对象在状 ...

  7. 设计模式--观察者模式初探和java Observable模式

    初步认识观察者模式 观察者模式又称为发布/订阅(Publish/Subscribe)模式,因此我们可以用报纸期刊的订阅来形象的说明: 报社方负责出版报纸. 你订阅了该报社的报纸,那么只要报社发布了新报 ...

  8. “一切都是消息”--MSF(消息服务框架)之【发布-订阅】模式

    在上一篇,“一切都是消息”--MSF(消息服务框架)之[请求-响应]模式 ,我们演示了MSF实现简单的请求-响应模式的示例,今天来看看如何实现[发布-订阅]模式.简单来说,该模式的工作过程是: 客户端 ...

  9. “一切都是消息”--iMSF(即时消息服务框架)之【发布-订阅】模式

    MSF的名字是 Message Service Framework 的简称,由于目前框架主要功能在于处理即时(immediately)消息,所以iMSF就是 immediately Message S ...

随机推荐

  1. Java 基本类型、封装类型、常量池、基本运算

    基本数据类型: byte:Java中最小的数据类型,在内存中占8位(bit),即1个字节,取值范围-128~127,默认值0 short:短整型,在内存中占16位,即2个字节,取值范围-32768~3 ...

  2. 使用Git Flow进行版本控制

    重置 # force reset $ git flow init -f

  3. postman使用--Monitor

    前戏 现在我们已经能完成接口的批量执行,添加断言,数据驱动,设置变量等等方法.但是有一天,用户反应说我们的网站访问不了了.这时候,那帮程序猿查日志的查日志,看数据库的看数据库,找到原因在发布到线上已经 ...

  4. Set学习笔记

    今天又去看了一下STL里的set,来这里水一下博客 What is set? set的本质是一种功能受限的平衡树,不支持重复数字,也就是说如果插入一大堆数字12,输出它的长度还是1 如何定义 定义 s ...

  5. vs工具类SQLhelper参考

    参考 https://www.cnblogs.com/liyangLife/p/5036636.html

  6. 剑指offer:机器人的运动范围(回溯法DFS)

    题目描述 地上有一个m行和n列的方格.一个机器人从坐标0,0的格子开始移动,每一次只能向左,右,上,下四个方向移动一格,但是不能进入行坐标和列坐标的数位之和大于k的格子. 例如,当k为18时,机器人能 ...

  7. Linux stty命令

    stty是linux下改变和打印终端设置的常用命令. 一.参数: 1.打印终端行设置 -a,--all   以人可读的方式打印所有当前设置:-a参数比单独的stty命令输出的终端信息更详细 -g,-- ...

  8. atlassian-confluence - docker安装

    一下内容在centos 7安装成功.一.安装docker 1.yum安装docker12 yum update # 更新yumyum install docker # yum安装docker 2.开启 ...

  9. CentOS中使用FIO测试磁盘IO性能

    $ yum install fio 0x02 命令 随机读: $ fio -filename=/dev/sda1 -direct=1 -iodepth 1 -thread -rw=randread - ...

  10. linux ffmpeg 源码安装教程

    AMR格式是智能手机上的常用音频文件格式,比MP3格式的压缩比大.同样时长的AMR文件大概是MP3的十分之一,所以在移动互联项目中应用比较广泛.但目前AMR格式在个人电脑上应用较少,所以目前大部门播放 ...