首先我们必须清楚这两种模式都是设计模式，而不是某种语言的专属；
观察者模式（Observer）
概念理解
- 观察者模式是一种一对多的依赖关系的行为设计模式，让多个观察者对象监听一个主题对象，当主题对象发生变化时，它的所有观察者对象都会收到通知并自动更新。它可以让多个观察者对象同时监听一个主题对象，当主题对象发生变化时，可以同时通知所有观察者对象，让它们做出相应的反应；
- Subject(被观察者)改变 --->Observer(观察者)监听到其改变，更新自己；
代码实现
//观察者模式:Subject(被观察者);Observer(观察者)
class Subject{
constructor() {
// 记录所有的观察者
this.observers = []
}
//添加新的观察者
addObserver() {
this.observers.push(observer)
}
//移除观察者
removeObserver() {
let index = this.observers.indexOf(observer)
if(index !== -1) {
this.observers.splice(index, 1)
}
}
//发布更新通知
notify() {
this.observers.forEach(observer => {
observer.update()
})
}
}
class Observer {
update() {
console.log('subject has updated!');
}
subscribeTo(subject) {
subject.addObserver()
}
}
let subject = new Subject() //被观察者
let observer1 = new Observer() //观察者
observer1.subscribeTo(subject) //观察者进行订阅
let observer2 = new Observer() //观察者
observer2.subscribeTo(subject) //观察者进行订阅
subject.notify()
发布订阅模式（Publisher）
概念理解
- 发布订阅模式也是一种一对多的依赖关系的行为设计模式，它可以让发布者和订阅者解耦，发布者和订阅者之间不需要知道对方的存在，发布者只需要发布消息，订阅者只需要订阅消息，当发布者发布消息时，订阅者会收到消息；
- Publisher(发布者)改变 --->消息管道接受并通知Subscriber(订阅者) --->Subscriber(订阅者)收到通知并发生变化；
代码实现
class EventEmitter {
constructor() {
this.events = {}
}
on(name, fn) {
if (this.events[name]) {
this.events[name].push(fn)
} else {
this.events[name] = [fn]
}
}
off(name, fn) {
const tasks = this.events[name]
if (tasks) {
const index = tasks.findIndex((f) => f === fn || f.callback === fn)
if (index >= 0) {
tasks.splice(index, 1)
}
}
}
// once：是否只发生一次
emit(name, once = false) {
if (this.events[name]) {
// 创建副本，如果回调函数内继续注册相同事件，会造成死循环
const tasks = this.events[name].slice()
for (let fn of tasks) {
fn()
}
if (once) {
delete this.events[name]
}
}
}
}