本文介绍 JavaScript 中发布订阅模式的基本概念，通过门店与顾客的类比解释其工作原理。提供了包含 on、off、trigger 和 once 方法的完整类实现代码，并展示了在异步通信和多页面交互中的具体使用场景与调用示例。
发布订阅模式概述
发布与订阅模式的核心定义
为了便于理解，可以将其类比为购物场景：顾客与店主之间无需直接认识。店主负责展示商品，不关心购买者身份；顾客挑选所需商品，不关心店铺来源。这种通过中间媒介进行信息传递的机制，即构成了发布与订阅关系的基础。
具体流程为：店主展示商品款式，顾客根据需求查找。若找到心仪商品则购买，否则离开。整个过程逻辑清晰且简单，体现了发布订阅模式解耦发送方与接收方的特点。
应用场景分析
典型应用场景
该模式常用于处理异步通信以及多页面间的交互。例如，当页面 A 中的某个方法需要在页面 B 的特定操作时机被触发时，发布订阅模式能有效解耦这两个页面的逻辑依赖。
代码实现与使用
核心代码实现
class Publish {
constructor() {
this.listMap = {};
}
// 订阅
on(key, fn) {
this.listMap[key]
? this.listMap[key].push(fn)
: this.listMap[key] = [fn];
// 存储订阅fn的下标
const index = this.listMap[key].length - 1;
// 返回取消订阅的function
return () => this.clear(key, index);
}
// 取消所有该key订阅
off(key) {
delete this.listMap[key];
}
// 取消key的指定的某个订阅
clear(key, index) {
index === this.listMap[key].length - 1
? this.listMap[key].pop()
: this.listMap[key][index] = null;
}
//订阅一次触发后自动取消订阅
once(key, fn) {
this.on(key, (...rest) => {
fn(...rest);
this.off(key);
});
}
// 发布key
trigger(key, ...rest) {
if(key in this.listMap) {
this.listMap[key].forEach(fn => {
fn(...rest);
});
}
}
}
具体使用方式
const ob = new Publish();
// 订阅 sub1
const sub1 = ob.on('sub1', (a, b) => {
console.log('sub1', a, b);
});
// 订阅 sub1
const sub11 = ob.on('sub1', (a, b) => {
console.log('sub11', a, b);
});
ob.trigger('sub1', 2, 3);
// 取消订阅sub1
sub1();
// 取消订阅sub11
sub11();
// 订阅 sub3
ob.on('sub3', (a, b) => {
console.log('sub3', a, b);
});
// 订阅 sub3
ob.on('sub3', (a, b) => {
console.log('sub33', a, b);
});
ob.trigger('sub3', 6, 7);
// 取消订阅所有的sub3
ob.off('sub3');
// 订阅一次就自行取消订阅
ob.once('sub4', (a, b) => {
console.log('sub4', a, b);
});
ob.trigger('sub4', 8, 9);
总结
本文介绍了 JavaScript 中发布订阅模式的简易实现。如需了解更多相关内容，可参考本站过往文章或继续浏览后续教程，感谢支持。