使用Map對象實現的一個簡單的簡單的監聽者模式
對象
-
Subject 主題
定義方法：add(){ //訂閱 ... } remove(observe){ //取消訂閱 ... } notify(message){ //推送信息 ... } Observe 訂閱者
定義方法：
update(message){ //信息處理
...
}
/**
* 主題
*/
class Subject {
constructor() {
this.observes = new Map(); //訂閱者對象集合
this.messages = []; //推送的消息集合
}
// 訂閱主題
add(observe) {
this.messages.forEach(message => {
observe.update(message);
})
this.observes.set(observe.id, observe);
}
//取消訂閱
remove(observe) {
this.observes.has(observe.id) && this.observes.delete(observe.id);
}
//推送消息
notify(value) {
this.messages.push(value);
this.observes.forEach(observe => {
observe.update(value)
})
}
}
/**
* 訂閱者
*/
class Observe {
constructor(id) {
this.id = id; // 實例對象唯一標識
}
update(message) {
console.log("id: %s, value: %s", this.id, message)
}
}
// 假設生成guid
function Guid() {
function s4() {
return Math.floor((1 + Math.random()) * 0x10000)
.toString(16)
.substring(1);
}
return s4() + s4() + '-' + s4() + '-' + s4() + '-' + s4() + '-' + s4() + s4() + s4();
}
const subject = new Subject();
var o1 = new Observe(Guid()),
o2 = new Observe(Guid()),
o3 = new Observe(Guid()),
o4 = new Observe(Guid());
subject.add(o1);
subject.add(o2);
subject.add(o3);
subject.notify("推送1");
subject.remove(o1);
subject.notify("[刪除o1]: 推送2");
subject.remove(o2);
subject.notify("[刪除o1、02]: 推送3");
subject.remove(o3);
subject.notify("[刪除o1、02、03]: 推送4");
subject.add(o4); // 接收所有歷史消息
//輸出
id: e7766edc-f47d-d726-7ec6-456acf87dbb4, value: 推送1
id: 2d1c6763-8abf-e755-64ba-e87af7582f84, value: 推送1
id: 99d33283-6889-73af-da80-0f8c22a49983, value: 推送1
id: 2d1c6763-8abf-e755-64ba-e87af7582f84, value: [刪除o1]: 推送2
id: 99d33283-6889-73af-da80-0f8c22a49983, value: [刪除o1]: 推送2
id: 99d33283-6889-73af-da80-0f8c22a49983, value: [刪除o1、02]: 推送3
id: b67a8969-0051-41bc-8c76-08b400d80a9e, value: 推送1
id: b67a8969-0051-41bc-8c76-08b400d80a9e, value: [刪除o1]: 推送2
id: b67a8969-0051-41bc-8c76-08b400d80a9e, value: [刪除o1、02]: 推送3
id: b67a8969-0051-41bc-8c76-08b400d80a9e, value: [刪除o1、02、03]: 推送4
image.png
