JS 设计模式之发布-订阅
Posted jockerm
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JS 设计模式之发布-订阅相关的知识，希望对你有一定的参考价值。
1、JS ES6 定义类，并包含两个方法：subscribe（订阅）、publish（发布）。
class PubJs {
constructor () {
// 订阅名称列表
this.event_list = {};
}
// 订阅
subscribe (eventName, callback) {
}
// 发布
publish (eventName, ...args) {
}
}
2、编写订阅者基础逻辑：
- 允许订阅者订阅信息；
- 如果当前订阅关键字已存在，则更新订阅回调，否则，新增关键字，记录订阅回调；
class PubJs {
constructor () {
// 订阅名称列表
this.event_list = {};
}
// 订阅
subscribe (eventName, callback) {
if (this.event_list[eventName]) {
this.event_list[eventName].push(callback);
} else {
this.event_list[eventName] = [callback];
}
}
// 发布
publish (eventName, ...args) {
}
}
3、编写发布者基础逻辑：
- 发布者发布关键字相关信息
- 订阅者们需要都能接受到信息，并执行相应的回调
class PubJs {
constructor () {
// 订阅名称列表
this.event_list = {};
}
// 订阅
subscribe (eventName, callback) {
if (this.event_list[eventName]) {
this.event_list[eventName].push(callback);
} else {
this.event_list[eventName] = [callback];
}
}
// 发布
publish (eventName, ...args) {
if (this.event_list[eventName]) {
this.event_list[eventName].map(cb => cb(...args));
}
}
}
4、本地验证：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>练习发布-订阅模式</title> <script src="./pub.js"></script> </head> <body> <div> 练习发布-订阅模式 </div> <script> const pubSub = new PubJs(); // A订阅了SMS事件（A只关注SMS本身，而不关心谁发布这个事件） pubSub.subscribe(‘SMS‘, console.log); // B订阅了SMS事件 pubSub.subscribe(‘SMS‘, console.log); // C发布了SMS事件（C只关注SMS本身，不关心谁订阅了这个事件） pubSub.publish(‘SMS‘, ‘I published `SMS` event‘); setTimeout(() => { pubSub.publish(‘SMS‘, ‘I published `SMS` again‘); }, 5000) </script> </body> </html>
以上是关于JS 设计模式之发布-订阅的主要内容，如果未能解决你的问题，请参考以下文章