js 观察者和发布订阅

发布订阅

js中的事件模型就是基于发布订阅设计的。相当于订报的人和送报人的关系。js中很多都有发布订阅的思想。具体上代码。

const fs = require('fs');

let e = {
    arr: [],
    on(fn) {
        this.arr.push(fn);
    }
    emit() {
        this.arr.forEach(fn => fn());
    }
}
e.on(() => {
    console.log('订阅者1');
})
e.on(() => {
    console.log('订阅者2');
})
fs.readFile('name.txt', 'utf8', (err) => {
    e.emit();
})

// 只要文件读取成功后就会发布一个通知。然后执行所有订阅者的回调方法

从图中可以看出。发布者和订阅者是没有关系的。通过事件中心来做中介。订阅者可以通过on方法将自己的回调添加进订阅者队列。而发布者可以通过调用emit方法来通知订阅者执行回调。

4.png

观察者模式

class Sub {
  constructor() {
    this.arr = [];
    this.name = 'kimi'
  }
  addWatcher(o) {
    this.arr.push(o)
  }
  rename(newName) {
    this.name = newName;
    this.arr.forEach(o => o.update(newName));
  }
}

class Observer {
    update(newName) {
        // do something
    }
}

let sub = new Sub();  
let o1 = new Observer();  
let o2 = new Observer();  
sub.addWatcher(o1);  // 添加第一位观察者
sub.addWatcher(o2);  // 添加第二位观察者
sub.rename('bob');  // 被观察者变化后通知观察者，调用观察者身上的update方法

观察者模式在前端中应用非常广泛。比如vue源码中。一个data可能有很多watcher观察者。render-watcher、computed-watcher、data-watcher。一旦数据发生变化就会通知观察者，调用他们自己的update方法。

总结：

1. 观察者模式中 观察者和被观察者一般是有关系的。而发布者和订阅者是没有关系的
2. 观察者模式中一般都会包含发布订阅。
3. js中的事件，就是最好的发布订阅模型。
4. 数据视图双向绑定的框架都离不开观察者模式。