观察者模式和发布订阅模式
Posted zx-666
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了观察者模式和发布订阅模式相关的知识，希望对你有一定的参考价值。
在vue框架中，使用了观察者模式和发布订阅模式，因此面试中常常会被问到：
观察者模式：观察者（Observer）直接订阅（Subscribe）主题（Subject），而当主题被激活的时候，会触发（Fire Event）观察者里的事件。
代码：
// 被观察者 （小宝宝）
class Subject {
constructor(name) {
this.name = name;
this.state = "开心"; // 被观察者的状态
this.observers = []; // 存放观察者
}
// 需要将观察者放到自己的身上
attach(ther) {
this.observers.push(ther);
}
// 更新被观察者的状态
setState(state) {
this.state = state;
this.observers.forEach(ther => {
ther.update(this);
});
}
}
// 观察者
class Observer {
constructor(name) {
this.name = name;
}
// 等会被观察者的状态发生变化会调用这个方法
update(subject) {
console.log(this.name + ":" + subject.name + "当前状态是" + subject.state);
}
}
let bady = new Subject("小宝宝");
let father = new Observer("爸爸");
let mother = new Observer("妈妈");
bady.attach(father);
bady.attach(mother);
bady.setState("不开心");
bady.setState("饿了");
发布/订阅模式：订阅者（Subscriber）把自己想订阅的事件注册（Subscribe）到调度中心（Topic），当发布者（Publisher）发布该事件（Publish topic）到调度中心，也就是该事件触发时，由调度中心统一调度（Fire Event）订阅者注册到调度中心的处理代码。
代码：
// on是订阅 emit是发布
let e = {
_callback: [],
on(callback) {
// 订阅一件事 当这件事发生的时候 触发对应的函数
// 订阅 就是将函数放到数组中
this._callback.push(callback);
},
emit(value) {
this._callback.forEach(method => {
method(value);
});
}
};
// 订阅
e.on(function (value) {
console.log(value + ":张三的订阅");
});
// 订阅
e.on(function (value) {
console.log(value + ":李四的订阅");
});
// 订阅
e.on(function (value) {
console.log(value + ":王五的订阅");
});
// 发布
e.emit(‘发布‘)
以上是关于观察者模式和发布订阅模式的主要内容，如果未能解决你的问题，请参考以下文章