当前位置：网站首页>它们不一样！透析【观察者模式】和【发布订阅模式】

它们不一样！透析【观察者模式】和【发布订阅模式】

2022-08-08 16:13:00 【InfoQ】

观察者模式常常会和发布订阅模式一起哪来比较，它们二者同样重要。

直观的例子：

Vue 的双向绑定原理用到了发布订阅模式的思想；

在函数式编程中，广泛应用观察者设计模式思想。

但是，可能在平常，写业务代码，真实用到这两样设计思想的并不多，只好在做技术总结的时候复盘一下，温故再温故啦。（也有一种可能是：或许是运用还不是很熟，在有些场景，可以用到，但会忽视掉）

闲话少说，奥利给，冲它！！

<hr>

简介

观察者模式和发布订阅模式的区别在于：

后者比前者多了一个

中间商

。

观察者模式：

观察者 Observer

被观察者 Subject

发布订阅模式：

订阅者 subscriber （类似于观察者）

发布者 publisher （类似于被观察者）

调度中心（中间商）

一图胜千言：

有了以上的基本认识，咱们再展开说说~~

观察者模式

观察者模式之前写过

https://juejin.cn/post/7072898729388277797

，这里再优化下注解，并再封装一个 Observer 类，由此创建多个 Observer 实例：

class Subject{// 被观察者
 constructor(){
 this.observers=[]
 }
 add(observer){
 this.observers.push(observer)
 }
 notify(newMsg){
 this.observers.forEach(i=>i.consoleFn(newMsg))
 }
}

class Observer{// 观察者
 constructor(name){
 this.name=name
 }
 consoleFn(newMsg){
 console.log(newMsg + '======》》》'+ this.name +'收到了')
 }
}

let sub = new Subject()

let observer1 = new Observer(&quot;观察者1&quot;)
let observer2 = new Observer(&quot;观察者2&quot;)

sub.add(observer1) // Observer1 观察 sub
sub.add(observer2) // Observer2　观察　sub

sub.notify(&quot;我是被观察者，我发布了一个信息！&quot;) // sub 发布消息

// 我是被观察者，我发布了一个信息！======》》》观察者1收到了
// 我是被观察者，我发布了一个信息！======》》》观察者2收到了

要点小结：

写一个 Subject 类，有：添加观察者 add、通知观察者 notify 方法（也可补充写删除观察者 del 方法）；

写一个 Observer 类，打印出所接收到的信息；

实例化一个被观察者；

实例化一个或多个观察者；

用 add 方法进行绑定；

用 notify 方法进行通知；

发布订阅模式

发布订阅模式，就是比观察者模式多了一个“中间商”，也叫调度中心；

发布者 publisher == 被观察者 Subject

订阅者 subscriber == 观察者 Observer

调度中心 Event Channel，或者说是大家熟悉的 Vue 双向绑定中的 Dep，依赖管理中心、订阅中心


// 发布者 Publisher
class Pub {
 constructor() {
 this.deps = [];
 }
 addDep(dep) {
 this.deps.push(dep);
 }
 publish(dep) {
 this.deps.forEach(item => item === dep && item.notify());
 }
}
// 订阅者 Subscriber
class Sub {
 constructor(val) {
 this.val = val;
 }

 update(callback) {
 callback(this.val)
 }
}

// 调度中心
class Dep {
 constructor(callback) { // 核心是这个 callback 函数；
 this.subs = [];
 this.callback = callback;
 }
 addSub(sub) {
 this.subs.push(sub);
 }
 notify() {
 this.subs.forEach(item => item.update(this.callback));
 }
}

let pub = new Pub() // 实例化一个发布者

// 实例化一个调度中心，传入一个用于处理数据的函数；
const dep1 = new Dep((data) =>
 console.log('我是调度中心，我先把消息处理一下，然后发给 ===》》》', data)) 

let sub1 = new Sub(&quot;订阅者1&quot;) // 实例化订阅者1
let sub2 = new Sub(&quot;订阅者2&quot;) // 实例化订阅者2

pub.addDep(dep) // 发布者绑定调度中心

dep.addSub(sub1) // 调度中心添加订阅者1
dep.addSub(sub2) // 调度中心添加订阅者2

pub.publish(dep) // 发布者把消息推给调度者

// 我是调度中心，我先把消息处理下先 订阅者1
// 我是调度中心，我先把消息处理下先 订阅者2