设计模式-发布订阅模式

1、版本一

// 定义一家猎人工会 // 主要功能包括任务发布大厅（topics）， // 以及订阅任务（subscribe）， // 发布任务（publish） let HunterUnion = { // 任务发布大厅 topics: Object.create(null), // 发布任务（publish） publish: function (topic, money) { if (!this.topics[topic]) return false; for (let fn of this.topics[topic]) fn(money); }, // 订阅任务（subscribe） subscribe: function (topic, fn) { if (!this.topics[topic]) this.topics[topic] = []; this.topics[topic].push(fn); }, }; // 定义一个猎人类 // 包括姓名，级别 function Hunter(name, level) { this.name = name; this.level = level; } // 订阅 Hunter.prototype.subscribe = function (topic, fn) { console.log( this.level + "猎人" + this.name + "订阅了狩猎" + topic + "的任务。" ); HunterUnion.subscribe(topic, fn); }; // 发布 Hunter.prototype.publish = function (topic, money) { console.log( this.level + "猎人" + this.name + "发布了狩猎" + topic + "的任务。" ); HunterUnion.publish(topic, money); }; // 猎人工会走来了几个猎人 let hunterMing = new Hunter("小明", "黄金"); let hunterJin = new Hunter("小金", "白银"); let hunterZhang = new Hunter("小张", "黄金"); let hunterPeter = new Hunter("Peter", "青铜"); // Peter发布了狩猎tiger的任务 hunterPeter.publish("tiger", 198); // 小明，小金，小张分别订阅了狩猎tiger的任务 hunterMing.subscribe("tiger", function (money) { console.log("小明表示：" + (money > 200 ? "" : "不") + "接取任务。", money); }); hunterJin.subscribe("tiger", function (money) { console.log("小金表示：接取任务。", money); }); hunterZhang.subscribe("tiger", function (money) { console.log("小张表示：接取任务。", money); }); // 猎人们发布 (发布者) 或订阅 (观察者/订阅者) // 任务都是通过猎人工会 (调度中心) 关联起来的， // 他们没有直接的交流。 

2、版本二

class PublishAndSubscribe { constructor() { // 收集订阅信息，调度中心 this.eventList = {}; } // 收集打包传入的数据 // attributeName属性名 // datas数据 // fn 事件 collects(attributeName, datas, fn) { if (!(this.eventList[attributeName] instanceof Array)) this.eventList[attributeName] = []; this.eventList[attributeName].push({ datas, fn }); } // 通过属性名触发对应的事件 // attributeName属性名 release(attributeName) { if (!this.eventList[attributeName].length) throw "出错啦！"; this.eventList[attributeName].forEach((item) => item.fn(item.datas)); } // 通过属性名找到对应的属性下的数组 // 通过id移出对应的数组项 off(attributeName, id) { this.eventList[attributeName].forEach((item, index) => { if (item.datas.id == id) this.eventList[attributeName].splice(index, 1); }); } } let publishAndSubscribe = new PublishAndSubscribe(); // 收集属性 // attributeName1，attributeName2，attributeName3 // 并且，给它们绑定值和事件 publishAndSubscribe.collects( "attributeName1", { id: 1, content: "A4" }, function (datas) { console.log("接收发布的数据:", datas); } ); publishAndSubscribe.collects( "attributeName2", { id: 2, content: { a: 1, b: 6, c: 4 } }, function (datas) { console.log("接收发布的数据:", datas); } ); publishAndSubscribe.collects( "attributeName3", { id: 3, content: [1, 9, 6, 3], }, function (datas) { console.log("接收发布的数据:", datas); } ); publishAndSubscribe.collects( "attributeName4", { id: 4, content: "array", }, function (datas) { console.log("接收发布的数据:", datas); } ); // 通过属性触发对应的事件 publishAndSubscribe.release("attributeName1"); publishAndSubscribe.release("attributeName2"); publishAndSubscribe.release("attributeName3"); console.log("publishAndSubscribe:", publishAndSubscribe.eventList); // 移除 publishAndSubscribe.off("attributeName4", 4); console.log("publishAndSubscribe:", publishAndSubscribe.eventList); // publishAndSubscribe.release("attributeName4"); // Error: Failed to resolve async component default: 出错啦！ 

3、版本三

let publishAndSubscribe = { eventList: {}, // 订阅 add(propertyName, datas, listener) { if (!this.eventList[propertyName]) this.eventList[propertyName] = []; this.eventList[propertyName].push({ datas, listener }); }, // 发布 triggle(propertyName) { this.eventList[propertyName] && this.eventList[propertyName].forEach((item) => item.listener(item.datas)); }, // 移除 removes(propertyName, fn) { if (!this.eventList[propertyName]) return false; let index = this.eventList[propertyName].findIndex((listener) => listener === fn); this.eventList[propertyName].splice(index, 1); }, }; let event1 = (data) => { console.log("数据:", data); }; let event2 = (data) => { console.log("数据:", data); }; let event3 = (data) => { console.log("数据:", data); }; let datas = [1, 2, 3, 4, 5]; // 订阅 publishAndSubscribe.add("property1", datas, event1); publishAndSubscribe.add("property2", [9, 8, 6, 7, 3], event2); publishAndSubscribe.add("property3", [], event3); // 移除 publishAndSubscribe.removes("property2", event2); // 发布 publishAndSubscribe.triggle("property1"); publishAndSubscribe.triggle("property2"); publishAndSubscribe.triggle("property3");