目的
发布订阅
- 核心就是创造一个事件处理中心,将订阅的任务在任务完成是发布出去,这样说很模糊,代码比较直观
//发布订阅
let events = {
_events: [],
//收集要处理的任务
on(fn) {
this._events.push(fn);
},
//发布执行已收集的任务(方法)
emit(data) {
this._events.forEach((event) => {
event(data);
});
},
};
setTimeout(() => {
//发布
events.emit("第一次舔");
}, 1000);
setTimeout(() => {
//发布
events.emit("第二次舔");
}, 2000);
//订阅
events.on((data) => {
arr.push(data);
console.log(data);
});
let arr = [];
events.on(() => {
if (arr.length === 2) {
console.log("老子不舔了");
}
});
观察者模式
- 存在一个观察者,一个被观察者,当被观察者变化时通知观察者,
- 要实现上面的功能就需要被观察者将所有的观察者收集起来
- 代码如下
class Subject {
constructor(name) {
this.name = name;
this.state = "非常开心";
this.observers = [];
}
attach(o) {
this.observers.push(o);
}
setState(newState) {
this.state = newState;
this.observers.forEach((o) => {
o.update(this.name, newState);
});
}
}
class Observer {
constructor(name) {
this.name = name;
}
update(s, state) {
console.log(this.name, s + "当前" + state);
}
}
let s = new Subject("小宝宝");
let o1 = new Observer("爸爸");
let o2 = new Observer("妈妈");
s.attach(o1);
s.attach(o2);
s.setState("不开心了");
s.setState("开心了");
最重要的就是被观察者里的attach要将观察者收集起来,状态改变时setState方法要调用观察者的update方法进行通知