[JS设计模式]Observer Pattern

使用观察者模式是加强关注点分离(seperation of concerns)和单一职责(single-responsibility)原则的好方法。观察者模式对象和观察者对象没有紧密耦合，并且可以随时(去)耦合。可以将监控事件和处理事件分离。

下面举例来阐述：

首先，定义一个观察者模式对象，EventObserver。

class EventObserver {
    constructor() {
        this.observers = [];
    }
}

观察者对象作为list的数组元素，存储在观察者模式对象中。观察者需要收到事件，首先要进行订阅，当有事件产生时，EventObserver才会将事件传递给订阅者(即观察者)。

class EventObserver {
    constructor() {
        this.observers = [];
    }

    subscribe(fn) {
        this.observers.push(fn);//本例中，订阅者就是一个函数
    }

    unsubscribe(fn) {
        this.observers = this.observers.filter((subscriber) => subscriber !== fn);
    }

    broadcast(event) {
        this.observers.forEach((subscriber) => subscriber(event));
    }
}

EventObserver中定义了subscribe和unsubscribe函数来向其订阅和取消订阅观察者，同时通过broadcast函数向所有观察者通知事件，再由观察者自己决定对收到的事件做具体的处理。

为了使示例既便于理解有足够简单，下来定义两个观察者，然后由EventObserver来通知事件。

const observer = new EventObserver();

function logger1(data){
    console.log("logger1-" + `${Date.now()}: ${data}`)
}

function logger2(data){
    console.log("logger2-" + `${Date.now()}: ${data}`);
}

observer.subscribe(logger1);
observer.subscribe(logger2);

observer.broadcast(" frank is speaking...");

上述示例代码中，定义了2个观察者(logger1和logge2)，可通过EventObserver通知所有的观察者某个事件。运行结果如下：