概念
有的人说：发布—订阅模式又叫观察者模式，但是我不这么认为，感觉它们之间其实还是有区别的。
观察者模式：
- 结构： 在观察者模式中，通常包含两个主要角色 — 观察者（Observers）和被观察者（Subject）。
- 关系： 观察者直接订阅被观察者。被观察者维护一个观察者列表，并在状态变化时通知所有观察者。
- 通知方式： 被观察者主动向观察者推送信息，通常是调用观察者的方法来进行通知。
发布-订阅模式：
- 结构： 在发布-订阅模式中，有一个中介者（通常称为“事件总线”或“消息队列”）来管理订阅者和发布者之间的关系。
- 关系： 发布者和订阅者不直接耦合，它们通过中介者进行通信。发布者将消息发送到中介者，然后中介者将消息传递给所有订阅者。
- 通知方式： 订阅者通过向中介者注册感兴趣的事件或主题，中介者在接收到消息后负责将消息分发给所有订阅者。
关键区别：
- 直接耦合 vs 间接耦合： 观察者模式中，观察者和被观察者直接耦合；而发布-订阅模式中，发布者和订阅者通过中介者间接耦合。
- 通信方式： 观察者模式中，通常是被观察者直接通知观察者；发布-订阅模式中，通过中介者进行通信，发布者只需向中介者发布消息，而不需要直接通知订阅者。
观察者模式更适合简单的一对多通信，而发布-订阅模式则更适用于松散耦合的场景，尤其是在复杂系统中需要处理多个事件和消息的情况。
发布订阅模式： 订阅者（Subscriber）把自己想订阅的事件注册（Subscribe）到调度中心（Topic），当发布者（Publisher）发布该事件（Publish topic）到调度中心，也就是该事件触发时，由调度中心统一调度（Fire Event）订阅者注册到调度中心的处理代码。
在 JavaScript 开发中，我们一般用事件模型来替代传统的发布—订阅模式。
作用
可以广泛应用于异步编程中，这是一种替代传递回调函数的方案。
可以取代对象之间硬编码的通知机制，一个对象不用再显式地调用另外一个对象的某个接口。
从架构上来看，无论是 MVC 还是 MVVM，都少不了发布—订阅模式的参与，而且 JavaScript 本身也是一门基于事件驱动的语言。
简单的理解
DOM 事件
下边这段代码就是利用了发布订阅模式。
document.getElementById("myBtn").addEventListener("click", function(){
alert("Hello World!");
});
简易发布订阅
// on 是订阅 emit 是发布
let e = {
// 存订阅
_callback: [],
on(callback) {
// 订阅一件事 当这件事发生的时候 触发对应的函数
// 订阅 就是将函数放到数组中
this._callback.push(callback);
},
emit(value) {
this._callback.forEach(method => {
method(value);
});
}
};
// 订阅
e.on(function (value) {
console.log(value + ":张三的订阅");
});
// 订阅
e.on(function (value) {
console.log(value + ":李四的订阅");
});
// 订阅
e.on(function (value) {
console.log(value + ":王五的订阅");
});
// 发布
e.emit('发布')
自定义事件
let salesOffices = { // 定义售楼处
clientList: {}, // 缓存列表，存放订阅者的回调函数
listen(key, fn) {
if (!this.clientList[key]) { // 如果还没有订阅过此类消息，给该类消息创建一个缓存列表
this.clientList[key] = [];
}
this.clientList[key].push(fn); // 订阅的消息添加进消息缓存列表
},
trigger() { // 发布消息
let key = Array.prototype.shift.call(arguments) // 取出消息类型
let fns = this.clientList[key]; // 取出该消息对应的回调函数集合
if (!fns || fns.length === 0) { // 如果没有订阅该消息，则返回
return false;
}
for(let fn of fns){ // (2) // arguments是发布消息时附送的参数
fn.apply(this, arguments);
}
}
};
// 例子
salesOffices.listen('squareMeter88', price => console.log(`价格= ${price}`));
salesOffices.listen('squareMeter110', price => console.log(`价格= ${price}`));
salesOffices.trigger('squareMeter88', 2000000);
salesOffices.trigger('squareMeter110', 3000000);
通用的实现
通用的一种封装，实现了订阅、发布、取消。
const event = {
clientList: [],
listen: function( key, fn ){
if (!this.clientList[key] ){
this.clientList[key] = [];
}
this.clientList[key].push(fn); // 订阅的消息添加进缓存列表
},
trigger: function(){
const key = Array.prototype.shift.call( arguments ) // (1);
const fns = this.clientList[ key ]
if (!fns || fns.length === 0){ // 如果没有绑定对应的消息
return false;
}
for(let i = 0, fn; fn = fns[i++];){
fn.apply(this, arguments); // (2) // arguments是trigger时带上的参数
}
},
remove: function(key, fn){
let fns = this.clientList[key];
if (!fns){ // 如果key对应的消息没有被人订阅，则直接返回
return false;
}
if (!fn){ // 如果没有传入具体的回调函数，表示需要取消key对应消息的所有订阅
fns && (fns.length = 0);
} else {
for (let l = fns.length -1; l >=0; l--){ // 反向遍历订阅的回调函数列表
let _fn = fns[l];
if (_fn === fn){
fns.splice(l, 1); // 删除订阅者的回调函数
}
}
}
}
};
const installEvent = function( obj ){
obj = { ...obj, ...event }
};
let salesOffices = {};
installEvent(salesOffices);
salesOffices.listen( 'squareMeter88', fn1 = function(price){ // 小明订阅消息
console.log('价格= ' + price);
});
salesOffices.listen( 'squareMeter100', fn2 = function(price){ // 小红订阅消息
console.log('价格= ' + price );
});
salesOffices.remove('squareMeter88', fn1); // 删除小明的订阅
salesOffices.trigger('squareMeter88', 2000000); // 输出：2000000
salesOffices.trigger('squareMeter100', 3000000); // 输出：3000000
谁用了？
在前端开发中，有许多库和框架使用了发布-订阅模式或提供了类似的机制，以便实现组件通信、事件处理、状态管理等功能。
以下是一些常见的前端库和框架，它们使用了发布-订阅模式或相关的设计模式：
PubSubJS
PubSubJS 是一个实现发布-订阅模式的 JavaScript 库。
PubSubJS 是一个独立的 JavaScript 模块，它提供了发布-订阅模式的实现。它可以在任何 JavaScript 环境中使用，包括浏览器和 Node.js。
以下是 src/pubsub.js 文件的核心部分的简要解释：
- 模块模式： 代码使用了 JavaScript 的模块模式，通过 IIFE（立即调用函数表达式）封装了整个库。
(function (root, factory) {
// ...
}(this, function () {
// ...
}));
- 核心对象： 主要的 PubSub 对象，并且有一些私有的辅助函数和变量。
var PubSub = {};
// 发布
PubSub.publish = function( message, data ){};
PubSub.publishSync = function( message, data ){};
// 订阅
PubSub.subscribe = function( message, func ){};
// 订阅所有
PubSub.subscribeAll = function( func ){};
// 允许只订阅一次的消息
PubSub.subscribeOnce = function( message, func ){};
// 用于清除所有订阅
PubSub.clearAllSubscriptions = function clearAllSubscriptions(){};
PubSub.clearSubscriptions = function clearSubscriptions(topic){};
PubSub.countSubscriptions = function countSubscriptions(topic){};
PubSub.getSubscriptions = function getSubscriptions(topic){};
// 取消订阅
PubSub.unsubscribe = function(value){};
var messages = {};
Vue
Vue 提供了一个简单的事件系统，通过 vm.$emit 发布事件，vm.$on 订阅事件。这种机制类似于发布-订阅模式，允许组件之间进行松散耦合的通信。
在 Vue 中使用发布-订阅模式的例子：
- 使用 EventBus: 你可以创建一个简单的 EventBus，用于在不同组件之间进行通信。
// EventBus.js
import Vue from 'vue';
export const EventBus = new Vue();
// ComponentA.vue
import { EventBus } from './EventBus';
export default {
methods: {
sendMessage() {
EventBus.$emit('message', 'Hello from ComponentA!');
}
}
}
// ComponentB.vue
import { EventBus } from './EventBus';
export default {
created() {
EventBus.$on('message', message => {
console.log('Received message in ComponentB:', message);
});
}
}
- 使用 provide/inject: 如果你在一个深层嵌套的组件结构中，可以使用
provide和inject来提供一个全局的事件总线。
// EventBus.js
import Vue from 'vue';
export const EventBus = new Vue();
// App.vue
import { EventBus } from './EventBus';
export default {
provide: {
eventBus: EventBus
}
}
// ComponentA.vue
export default {
inject: ['eventBus'],
methods: {
sendMessage() {
this.eventBus.$emit('message', 'Hello from ComponentA!');
}
}
}
// ComponentB.vue
export default {
inject: ['eventBus'],
created() {
this.eventBus.$on('message', message => {
console.log('Received message in ComponentB:', message);
});
}
}
React
在 React 中，并没有像 Vue 那样直接提供发布-订阅模式的特定实现。React 更倾向于使用单向数据流和通过 props 和回调函数进行组件通信。
然而，如果你需要在 React 中实现发布-订阅模式，你可以借助全局状态管理库（如Redux）、或使用第三方发布订阅库 PubSubJS 、或使用 React 的 Context API 。
以下是一个使用 React Context API 来实现发布-订阅模式的简单例子：
// EventBusContext.js
import { createContext, useContext } from 'react';
const EventBusContext = createContext();
export const useEventBus = () => {
return useContext(EventBusContext);
};
export const EventBusProvider = ({ children }) => {
const listeners = {};
const subscribe = (eventName, callback) => {
if (!listeners[eventName]) {
listeners[eventName] = [];
}
listeners[eventName].push(callback);
return () => {
listeners[eventName] = listeners[eventName].filter(cb => cb !== callback);
};
};
const publish = (eventName, data) => {
if (listeners[eventName]) {
listeners[eventName].forEach(callback => {
callback(data);
});
}
};
const value = {
subscribe,
publish
};
return (
<EventBusContext.Provider value={value}>
{children}
</EventBusContext.Provider>
);
};
// ComponentA.js
import React from 'react';
import { useEventBus } from './EventBusContext';
const ComponentA = () => {
const eventBus = useEventBus();
const sendMessage = () => {
eventBus.publish('message', 'Hello from ComponentA!');
};
return (
<div>
<button onClick={sendMessage}>Send Message</button>
</div>
);
};
export default ComponentA;
// ComponentB.js
import React, { useEffect } from 'react';
import { useEventBus } from './EventBusContext';
const ComponentB = () => {
const eventBus = useEventBus();
useEffect(() => {
const unsubscribe = eventBus.subscribe('message', message => {
console.log('Received message in ComponentB:', message);
});
return () => {
unsubscribe();
};
}, [eventBus]);
return <div>ComponentB</div>;
};
export default ComponentB;
Redux
在 Redux 中，并没有直接提供经典的发布-订阅模式，Redux 引入了一种单向数据流的架构，其中状态的变化通过派发（dispatch）动作来进行管理。
Redux 中有一些机制可以达到一些类似发布-订阅的效果：
- 中间件（Middleware）: Redux 中的中间件可以截获派发的动作，进行一些额外的操作，然后将动作传递给下一个中间件或 Redux store。
const loggerMiddleware = store => next => action => {
console.log('Dispatching action:', action);
return next(action);
};
const store = createStore(
rootReducer,
applyMiddleware(loggerMiddleware)
);
- Store.subscribe 方法: Redux 的
store对象提供了一个subscribe方法，该方法接受一个回调函数，每当状态发生变化时都会被调用。
const store = createStore(rootReducer);
const unsubscribe = store.subscribe(() => {
console.log('State changed:', store.getState());
});
// 当不再需要订阅时，调用 unsubscribe 取消订阅
unsubscribe();
jQuery
jQuery 中的事件系统是一个经典的发布-订阅模式的实现。通过 jQuery 的事件系统，你可以轻松地订阅和发布自定义事件，以及处理浏览器原生事件。
jQuery 提供了一种简单而强大的方式来实现发布-订阅模式，使得在应用中不同模块之间的通信更加灵活和可维护。
在现代的前端开发中，虽然现代框架提供了更先进的状态管理和组件通信机制，但对于一些小型项目或不需要引入复杂状态管理的场景，jQuery 事件系统仍然是一个实用的工具。
- 事件绑定：
// 订阅自定义事件
$(document).on('customEvent', function(event, data) {
console.log('Custom event received with data:', data);
});
// 发布自定义事件
$(document).trigger('customEvent', 'Hello, jQuery!');
- 事件命名空间：
// 订阅带有命名空间的事件
$(document).on('customEvent.myNamespace', function(event, data) {
console.log('Custom event with namespace received with data:', data);
});
// 发布带有命名空间的事件
$(document).trigger('customEvent.myNamespace', 'Hello, jQuery with namespace!');
- 一次性事件处理：
// 订阅一次性事件
$(document).one('customEvent', function(event, data) {
console.log('One-time custom event received with data:', data);
});
// 发布一次性事件
$(document).trigger('customEvent', 'Hello, jQuery one-time!');
- 解除事件绑定：
// 解除事件绑定
$(document).off('customEvent');
// 将不再接收 customEvent 事件
$(document).trigger('customEvent', 'This will not be logged.');
最后
发布-订阅模式在前端开发中有许多实际应用场景，它提供了一种松散耦合的机制，允许不同模块或组件之间进行灵活的通信。
参考资料
《JavaScript 设计模式与开发实践》
原文链接：https://juejin.cn/post/7323126379813765132 作者：Bigger
