观察者模式
/**
* 观察者模式
* 可以理解为监控,当被观察者的状态发生变化时,触发观察者的技能
* 场景:教室
* 观察者:班主任,校长->监控一个对象的状态,一旦状态发生,马上触发技能,需要有自己的属性和技能
* 被观察者:学生->需要有自己的属性,状态和队列(都有谁观察自己)
*/
// 观察者
class Observer {
constructor(name, fn = () => {}) {
this.name = name;
this.fn = fn;
}
}
// 被观察者
class Subject {
constructor(state) {
this.state = state;
this.observerList = [];
}
// 改变状态
changeState(value) {
this.state = value;
this.observerList.forEach((item) => item.fn(this.state));
}
// 添加观察者
addObserver(observer) {
this.observerList.push(observer);
}
// 删除观察者
deleteObserver(observer) {
this.observerList = this.observerList.filter(item !== observer);
}
}
// =========================
// 创建观察者
const xz = new Observer("校长", (state) => {
console.log(`因为-${state}-把班主任叫来`);
});
const bzr = new Observer("班主任", (state) => {
console.log(`因为-${state}-把你家长叫来`);
});
// 创建被观察者
const xm = new Subject("学习");
xm.addObserver(xz);
xm.addObserver(bzr);
xm.changeState("睡觉"); // 触发观察者行为
发布订阅模式
/**
* 发布-订阅模式
* 场景: 云端
* 当有一个人往云端更新或者发布一个文件时,通知其他关注的用户(短信或邮件等)
*/
class Observer {
constructor() {
this.message = {};
}
// 添加消息
on(type, fn) {
if (!this.message[type]) {
this.message[type] = [];
}
this.message[type].push(fn);
}
/**
* 删除消息
* @param {*} type 消息类型
* @param {*} fn 事件处理函数
*/
off(type, fn) {
// 当fn不存在时删除该消息类型,否则删除该消息类型对应的事件处理函数
if (!fn) {
delete this.message[type];
} else {
this.message[type] = this.message[type].filter((item) => item !== fn);
}
}
//触发消息
trigger(type) {
if (!this.message[type]) return;
this.message[type].forEach((item) => item());
}
}
// ============================
const person = new Observer();
person.on("a", handleA);
person.on("a", handleB);
person.on("c", handleC);
person.off("a", handleA);
person.trigger("a");
function handleA() {
console.log("发短信通知");
}
function handleB() {
console.log("发邮件通知");
}
function handleC() {
console.log("其他方式通知");
}