Javascript 设计模式学习之四 Observer(观察者)模式

什么是Observer(观察者)模式？

观察者模式在javascript中应用的比较广泛，流行的jQuery库中的event,eventHandler就是一个典型的观察着模式：一对多的依赖关系，一个subject(目标)如果发生了改变，它的observers(观察者)会被通知，并且状态也会更新

都有哪些角色？

subject (目标) (下面例子中的Click)

主要的职责有：

1 维护观察者列表

2 实现subscribe(订阅)和unsubscribe(取消订阅)接口，就是成为subject的观察者，或从观察列表中退出

3 当自己的状态改变时，通知观察者

Objserver(观察着)(下面例子中的clickHandler)

有一个函数签名，当subject变化时调用

例子：

'use strict';
 
// Click对象相当于Subject目标
 
function Click() {
    this.handlers = []; //observers
}
 
// 观察者订阅
Click.prototype.subscribe = function (fn) {
    this.handlers.push(fn);
}
 
// 观察者取消订阅
Click.prototype.unsubscribe = function (fn) {
    this.handlers = this.handlers.filter((item)=>{
       if(item !== fn){
           return item;
       }
    });
}
 
// 发送通知,状态改变了
Click.prototype.fire = function (o,thisObj) {
    let scope = thisObj;
    this.handlers.forEach((item)=> {
        item.call(scope,o);
    })
}
 
var log = (function() {
    var log = "";
 
    return {
        add: function(msg) { log += msg + "\n"; },
        show: function() { console.log(log); log = ""; }
    }
})();
 
 
function run() {
 
    // clickHandler是订阅的观察者
    var clickHandler = function (item) {
        log.add(`fired:${item}`);
    }
 
    var click = new Click();
    click.subscribe(clickHandler);
    click.fire('event #1');
    click.unsubscribe(clickHandler);
    click.fire('event #2');
    click.subscribe(clickHandler);
    click.fire('event #3');
 
    log.show();
 
}
 
run();

参考资料：http://www.dofactory.com/javascript/observer-design-pattern