观察者模式与发布订阅模式区别

（全文很长，认真读完相信你会有所收获）

纸上得来终觉浅

观察者模式与发布订阅模式区别
- 抽象模型
- - 观察者模式
  - 发布-订阅模式
- 结论
- 困惑
- - 发布订阅模式？？
  - jQuery的发布订阅方法
  - 原生JS实现
- 总结
- - 具体使用场景

最近学习的时候又遇到了发布订阅模式，但是跟之前学过的又好像不太一样。
而书上又把它称为观察者模式，而且说观察者模式跟发布订阅模式是一个意思。

观察者模式（又名发布者-订阅者(publisher-subscriber)模式）是一种人与其任务之间的关系 ——《Javascript设计模式》

实在是让人摸不着头脑。

为此本人查阅了大量的资料，抽象成两个模型

抽象模型

老王跟老李都是开书刊亭的，他们需要向出版商进报纸。
出版商只登记要订报纸的订阅者和通知出版。
出版的时候，老王跟老李就会在出版商那根据自身需要进报纸。

代码实现：

观察者模式

 // 出版商var publisher = {subscribers: [],// 出版publish() {// 遍历每个订阅者this.subscribers.forEach(subscribers =>{subscribers.update();});},// 新增订阅者add (subscribers) {this.subscribers.push(subscribers);}};// 老王var Wang = {// 进报纸update(){console.log('人民日报');console.log('光明日报');}};// 老李var Lee = {// 进报纸update(){console.log('人民日报');console.log('中国青年报');console.log('经济日报');}};publisher.add(Wang);publisher.add(Lee);publisher.publish();

网上经常能看到这张图

Subject其实就是出版商publisher,开书报亭的老王就是Observer
publisher负责通知（出版），Observer们观察变化（进货）
这就是为什么叫观察者模式吧。

发布-订阅模式

我们再来看看作为我们看报纸的人是如何订报纸的。
出版商不可能到处送，我们也不会大老远跑去出版商那买报纸。
所以经常需要一个中转站，就是老王的书报亭呀。

流程大概是这样的
我：我要XX报！
书报亭：明天进
出版商：有货了
书报亭：报来了
我：读报

关键在于：我与出版商是没有交流的，都是通过书报亭

代码实现

// 发布订阅模式var publisher = {// 送报给报刊亭sendToOffice(postOffice) {// 送报给订报的顾客postOffice.sendToSubscriber();}};var postOffice = {// 顾客subscribers: [],sendToSubscriber() {// 确保每个顾客都拿到报纸this.subscribers.forEach(subscriber => {subscriber.getTheNewspaper();})},// 新增的顾客add(subscriber) {this.subscribers.push(subscriber);}};var subscriber = {// 找报刊亭订报纸find(postOffice) {postOffice.add(this);}，getTheNewspaper() {// 拿报纸然后读console.log('read Newspaper');} };subscriber.find(postOffice);publisher.sendToOffice(postOffice);

值得注意的是，这里的subscriber和postOffiice是可以有多个的，而且publisher可以给指定的postOffice送货！

发布-订阅模式(图片来源: MSDN 博客)
图中的topic就是postOffice,其他都一样

结论

参考github
两种模式的本质其实是一样的，都是都过subscribers这样一个容器进行登记，关键的区别在于注册和触发，只是订阅/发布模式对注册和触发进行了解耦。
可以看到，使用订阅发布模式中发布者触发sendToOffice的时候，可以选择触发哪一些订阅者集合。

publisher.sendToOffice(postOffice1);
publisher.sendToOffice(postOffice2);
publisher.sendToOffice(postOffice3);

而观察者模式则只能触发所有的被观察对象。

publisher.publish();

实践出真知

困惑

也是偶然才让我对这个问题产生困惑，并不是为了学设计模式而研究它们的区别。

发布订阅模式？？

刚开始学前端的时候，用jQuery做一些小动画，比如说监听动画开始，动画结束，不同的时刻做一些处理，让动画更加完善。
那时候经常听老师讲什么发布订阅，其实就是使用on、trigger这两个API。

比如:
在动画结束以后让小球变色。

let ballMove = ()=> {// animation$('.ball').trigger('moveEnd');
}
$('.ball').on('moveEnd', () => {changeColor();
})

后来过了一段时间偶然看了三元大佬的博客，模仿封装了一个插件

里面有这么一段

jQuery的发布订阅方法

//开辟一个容器
let $plan =  $.callBack();
//往容器里面添加函数
$plan.add(function(x, y){console.log(x, y);
})
$plan.add(function(x, y){console.log(y, x);
})
$plan.fire(10, 20);//会输出10，20 20,10
//$plan.remove(function)用来从容器中删除某个函数

原生JS实现

这个是我自己写的，一个意思

# Subscribe.js
class Subscribe {// drag.subDown.add(stopAnimate);constructor() {// 事件池this.pond = [];}add(fn) {// 重复标志位let flag = false;this.pond.forEach((item, index) => {item === fn ? flag = true : null;if (flag) {this.pond[index] = fn;return;}});// 不存在重复的方法名if (!flag) {this.pond.push(fn);}}remove(fn) {for (let i = 0; i < this.pond.length; i++) {if (this.pond[i] === fn) {this.pond.splice(i, 1);// 阻止塌陷i--;continue;}}}fire(...arg) {this.pond.forEach(item => {item(...arg);})}
}

测试subscribe.js

// test
let fn1 = function (){console.log(1);};let fn2 = function (){console.log(2);};let sub = new Subscribe;sub.add(fn1);sub.add(fn2);sub.fire(); // 1 2sub.remove(fn1);sub.fire(); // 2

优化后的代码
（在原文的基础上做了一些调整，原文的动画可能会出现小球停止在半空的情况）

不需要关心代码细节是如何实现的，只需要关心new Subscribe 以及注释以后的fire这个方法！
不需要关心代码细节是如何实现的，只需要关心new Subscribe 以及注释以后的fire这个方法！
不需要关心代码细节是如何实现的，只需要关心new Subscribe 以及注释以后的fire这个方法！

# drag.js
~function(){class Drag {constructor(ele) {this.ele = ele;// 初始化属性['strL', 'strT', 'strX', 'strY','curL', 'curT'].forEach(item => this[item] = null);// 创建订阅this.subDown = new Subscribe;this.subMove = new Subscribe;this.subUp = new Subscribe;// this: instance// 通过bind让函数的this统一指向实例this.Down = this.down.bind(this);this.ele.addEventListener('mousedown', this.Down);}down(ev) {// 记录初始位置this.strL = this.ele.offsetLeft;this.strT = this.ele.offsetTop;this.strX = ev.clientX;this.strY = ev.clientY;// this:instancethis.Move = this.move.bind(this);this.Up = this.up.bind(this);document.addEventListener('mousemove', this.Move);document.addEventListener('mouseup', this.Up);// clearInterval(this.verticalAnimate);// clearInterval(this.horizontalAnimate);// this.start_pos = null;// this.moveDistance = null;this.subDown.fire(this.ele);}move(ev) {this.curL = ev.clientX - this.strX + this.strL;this.curT = ev.clientY - this.strY + this.strT;this.ele.style.left = this.curL + 'px';this.ele.style.top = this.curT + 'px';// // 记录松手移动距离// if (!this.start_pos) {//     this.start_pos = this.ele.offsetLeft;//     this.moveDistance = 0;// }//// // 当前位置 - 上次初始位置 => 位移// this.moveDistance  = this.ele.offsetLeft - this.start_pos;//// // 记录速度初始位置// this.start_pos = this.ele.offsetLeft;this.subMove.fire(this.ele);}up() {document.removeEventListener('mousemove', this.Move);document.removeEventListener('mouseup', this.Up);// this.horizontalMove();// this.verticalMove();this.subUp.fire(this.ele);}// horizontalMove() {//     // 最小最大移动距离//     let minL = 0,//         maxL = document.documentElement.clientWidth - this.ele.offsetWidth;////     let speed = this.moveDistance;////     // 目标位移//     let targetDistance = 0;//     this.horizontalAnimate = setInterval(()=> {//         speed *= 0.98;////         speed = Math.abs(speed) < 0.1 ? clearInterval(this.horizontalAnimate) : speed;////         targetDistance = this.ele.offsetLeft + speed;////         // 碰壁反向//         if (targetDistance < minL) {//             speed *= -1;//         }////         if (targetDistance > maxL) {//             speed *= -1;//         }//         this.ele.style.left = targetDistance + 'px';//     }, 20);// }// verticalMove() {//     // 底部最大距离//     let maxT = document.documentElement.clientHeight - this.ele.offsetHeight;////     // speed: 初始速度//     // lastSpeed: 上一次运动的速度//     // flag: 每次运动连续变化速度小于最小速度差//     // speedChangeCount: 连续变化小于最小速度差的次数//     // targetDistance: 运动目标位置//     let speed = 9.8,//         lastSpeed = 0,//         flag = false,//         speedChangeCount = 0,//         targetDistance = 0;////     // 最小速度差//     const MINSPEEDDELTA = 4.1;////     this.verticalAnimate = setInterval(() => {//         // 垂直加速度//         speed += 10;//         speed *= 0.98;//////         if (Math.abs(speed + lastSpeed) < MINSPEEDDELTA) {//             if (speedChangeCount > 5 && flag) {//                 speedChangeCount = 0;//                 clearInterval(this.verticalAnimate);//             }//             flag = true;//             speedChangeCount++;//         } else {//             flag = false;//         }////         targetDistance = this.ele.offsetTop + speed;////         // 触底反弹//         if (targetDistance > maxT) {//             speed *= -1;//             this.ele.style.top = maxT + 'px';//             return;//         }////         this.ele.style.top = targetDistance + 'px';//         // 记录上一次速度//         lastSpeed = speed;//     }, 20)// }}window.Drag = Drag;
}();

将内部的方法提取出来，单独放入一个函数中。

不需要关注实现细节，省略的部分就是上面代码块注释的代码。
不需要关注实现细节，省略的部分就是上面代码块注释的代码。
不需要关注实现细节，省略的部分就是上面代码块注释的代码。

#  extendDrag.js
function extendDrag(drag) {let stopLastAnimate = function stopLastAnimate(curEle) {clearInterval(curEle.verticalAnimate);clearInterval(curEle.horizontalAnimate);curEle.start_pos = null;curEle.moveDistance = null;};let computedPos = function dragMove(curEle) {//...};let horizontalMove = function horizontalMove(curEle) {//...};let verticalMove = function verticalMove(curEle) {//...};drag.subDown.add(stopLastAnimate);drag.subMove.add(computedPos);drag.subUp.add(horizontalMove);drag.subUp.add(verticalMove);
}

html

<div id="ball" class="ball"></div>
<script src="subscribe.js"></script>
<script src="drag.js"></script>
<script src="extendDrag.js"></script><script>let ball = document.querySelector('.ball');let drag = new Drag(ball);extendDrag(drag);
</script>

如果你能看完，我产生疑惑的地方就在这里，虽然都叫发布订阅，但是好像还是有区别的。
我们使用jQuery的trigger-on的发布订阅好像是为了完成某一件特定的事情，而fire-add好像是为了统一管理代码。

如果不能很好理解，建议你跟着敲上面两个例子，如果你跟我一样是小白，你会学到很多

总结

jQuery的trigger和on其实就是基于DOM2addEventListener完成的，这种模式都叫做发布订阅模式。
而add和fire这对组合其实是不能选择究竟触发哪个订阅者集合（上面的模型讲过），因此叫观察者模式更加贴切。

纠结名字其实意义不大，它们的本质其实是一样的，都是通过一个容器存储订阅者集合，上面两个例子的订阅者其实都是事件。

具体使用场景

发布订阅模式更适合完成某件/些特定的事件
观察者模式更适合统一执行一群事件
两种模式都可以用于松散耦合，改进代码管理和潜在的复用

举个例子
观察者模式
（不能选择触发哪个订阅者）

class Drag {//...Up() {// 具体实现在extendDrag.js// 实际就是执行horizontalMove 和 verticalMove 这两个方法this.subUp.fire(this.ele);}
}

发布订阅模式
（可以选择触发哪个订阅者）

class Drag {//...Up() {// 也可以写成this.ele.trigger('horizontalMove');this.ele.trigger('verticalMove');}
}

深入理解观察者模式与发布订阅模式相关推荐

观察者模式VS发布-订阅模式
前言观察者模式的大名,想必各位看官早已有所耳闻.从我们现实生活来说,微信公众号订阅.医院挂号叫号等都属于它的实际应用.在程序世界中,它是一种用于将代码解耦的设计模式,如果你想掌握并理解这种设计模式, ...
不好意思，观察者模式跟发布订阅模式就是不一样
一.前言一天,小猪佩奇去了一家西餐厅,点了一份西冷牛扒,还叫了圣女果.后来服务员上了一碟番茄:佩奇小姐,这是你的「圣女果」.佩奇猪一眼就看出了猫腻:这tm是番茄,不是圣女果啊!于是就跟服务员理论起来 ...
观察者模式VS发布订阅模式
一.前言观察者模式vs发布/订阅模式很容易混淆,像是凤梨和菠萝,傻傻分不清.Observer模式通常用Publish/Subscribe模式实现,我刚开始学习js的时候,以为这是同一回事,但是仔细学 ...
JavaScript 设计模式之观察者模式与发布订阅模式
前言在软体工程中,设计模式(design pattern)是对软体设计中普遍存在(反复出现)的各种问题,所提出的解决方案. 设计模式并不直接用来完成程式码的编写,而是描述在各种不同情况下,要怎么解决 ...
游戏服务器架构-设计模式之观察者模式和发布订阅模式真的一样吗？
前面我给大家分享了观察者模式和发布订阅模式,有人私信给我说这俩不是一样嘛,大体没什么区别,我猜测大多数认为这两者是一样的可以继续阅读这两篇文章,如果还不能解答你的问题,我相信这篇文章对比两者的关系会让 ...
观察者模式与发布/订阅模式的区别
[原]观察者模式与发布/订阅模式的区别不管是维基百科还是百度百科,搜索观察者模式,都会发现观察者模式的定义是观察者模式(有时又被称为发布/订阅模式),即一个目标对象管理所有相依于它的观察者对象,并且 ...
观察者模式VS发布订阅模式区别
观察者模式VS发布订阅模式区别观察者模式:订阅者收集函数,发布者循环调用发布订阅:收集发布单独给一个中介对比以结构来分辨模式,发布订阅模式相比观察者模式多了一个调度中心: 以意图来分辨模式,都 ...
2.设计模式-观察者模式（发布-订阅模式）
观察者模式(发布-订阅模式)一个简单的使用简介例子被监听者(被观察者) 监听者(观察者) 测试类简介观察者模式(有时又被称为模型(Model)-视图(View)模式.源-收听者(Listen ...
JS观察者模式和发布订阅模式
观察者模式观察者模式在前端工程中是很常见的设计模式,因为前端交互中充斥着大量多控件联动的交互,当参与联动的组件数量比较多或者组件数量可能变化的时候,代码就会变得难以维护.但是如果我们写代码时遵循了观 ...

深入理解观察者模式与发布订阅模式