【1】观察模式
理解: 观察者模式有两个主要的特点
1、观察者通过继承基类将自己注册到目标对象上(发布者)
2、目标对象(发布者)提供了维护观察者的一系列方法(增、删、遍历执行)
// 这种模式中 只有两个角色 1. 订阅者(观察者) 2 发布者 (目标对象)
// 订阅者直接将事件注册到发布者
// 发布者参数发生改变直接广播订阅者
/**
* 观察者模式我觉最主要的有两点 1 目标对象同时监管观察者 的增删执行
* 2 观察者通过继承实现基类把自己注册到目标对象
*/
class Observer{
constructor(fn) {
this.update = fn;
}
}
class SubjectDish{
constructor() {
this.observerList = [];
}
submit(observer) {
console.log('--添加订阅' + observer.name);
this.observerList.push(observer);
}
unsubmit(observer) {
this.observerList.fliter(ob => {
console.log('---取消订阅'+ observer.name);
return ob !== observer;
})
}
notify () {
this.observerList.map(ob => ob.update());
}
onDishChange() {
setTimeout(() => {
this.notify();
}, 1000)
}
}
const subject = new SubjectDish();
const obserber1 = new Observer(function() {
console.log('---加菜');
});
const obserber2 = new Observer(function() {
console.log('---减菜');
});
// 菜品模块 订阅者
subject.submit(obserber1);
subject.submit(obserber2);
// 发布者 加菜逻辑 像是服务端
subject.onDishChange();
观察者模式.png
【2】发布订阅模式
理解:订阅者 -> 事件控制中心 <- 发布者
class EventCenter {
constructor() {
this.observer = {};
}
on(eventName, observer) {
this.observer[eventName] = this.observer[eventName] || [];
this.observer[eventName].push(observer);
}
emit(eventName, ...args) {
this.observer[eventName].map(ob => ob(...args));
}
off(eventName) {
delete this.observer[eventName];
}
}
// eg:
var observer = new EventCenter();
// 这个是目标对象(订阅者) 要将一个函数托管到 中间控制器上
observer.on('addDish', function() {
console.log('---加菜函数');
});
// 事件触发(点了加菜的按钮)(发布者)
// 发布者告知订阅者加菜了啦(广播)
setTimeout(function() {
observer.emit('addDish');
}, 2000)
发布订阅模式.png
[参考文件] https://www.cnblogs.com/lovesong/p/5272752.html
网友评论