貼一個 Vue 中源碼的觀察者模式源碼
image.png
手動實現(xiàn)觀察者模式
// 發(fā)布者-目標
class Dep {
constructor() {
// 記錄所有的訂閱者
this.subs = []
}
// 添加訂閱者
addSub(sub) {
// 判斷訂閱者是否存在，并且有update 方法
if (sub && sub.update) {
this.subs.push(sub)
}
}
// 發(fā)布通知
notify() {
// 循環(huán)發(fā)布通知
this.subs.forEach(s => {
s.update()
})
}
}
// 訂閱者-觀察者
class Watcher {
update() {
console.log('update --->')
}
}
let dep = new Dep
let watcher = new Watcher
// 添加訂閱者
dep.addSub(watcher)
// 發(fā)布執(zhí)行
dep.notify()
// 執(zhí)行結果 update --->
觀察者模式和訂閱發(fā)布模式的區(qū)別
- 觀察者模式是由具體的目標調用，例如：當事件觸發(fā) Dep 就會去調用觀察者的方法，所以訂閱者和觀察者之間是存在依賴的。
- 發(fā)布訂閱模式是由統(tǒng)一的調度中心調用，因為發(fā)布者和訂閱者不需要知道對方的存在注益。
點擊查看發(fā)布訂閱模式
