JS的监听模式与观察者模式

监听模式的代码示例

// 事件对象  
var Event = function(obj) {  
    this.obj = obj;  
    this.getSource = function() {  
        return this.obj;  
    }  
}  
  
// 监听对象  
var F2 = function() {  
    this.hander = function(event) {  
        var f1 = event.getSource();  
        console.log("f2 do something!");  
        f1.callback();  
    }  
}  
  
// 被监听对象  
var F1 = function() {  
    this.abc = function() {  
        console.log("f1 do something one!");  
        // 创建事件对象  
        var e = new Event(this);  
        // 发布事件  
        this.f2.hander(e);  
        console.log("f1 do something two!");  
    }  
      
    this.on = function(f2) {  
       this.f2 = f2;  
    }  
      
    this.callback = function() {  
       console.log("f1 callback invoke!");  
    }  
}  
  
// 主函数  
function main() {  
    var f1 = new F1();  
    var f2 = new F2();  
    // 加入监听  
    f1.on(f2);  
    f1.abc();  
}  
  
// 运行主函数  
main();  

观察者模式的代码示例

// 观察者对象1  
var F2 = function() {  
    this.update = function(observable, obj) {  
        console.log("f2 do something!");  
        for (var i=0, len=obj.length; i<len; i++) {  
            console.log(obj[i]);  
        }  
        observable.callback();  
    }  
}  
  
// 观察者对象2  
var F3 = function() {  
    this.update = function(observable, obj) {  
        console.log("f3 do something!");  
        for (var i=0, len=obj.length; i<len; i++) {  
            console.log(obj[i]);  
        }  
        observable.callback();  
    }  
}  
  
// 被观察对象  
var F1 = function() {  
    // 保存所有观察者  
    var observers = [];  
      
    this.abc = function() {  
        console.log("f1 do something one!");  
        var datas = ["苹果", "桃子", "香蕉"];  
        // 通知所有观察者  
        this.notifyObservers(datas);  
        console.log("f1 do something two!");  
    }  
      
    this.addObserver = function(observer) {  
       observers.push(observer)  
    }  
      
    this.callback = function() {  
       console.log("f1 callback invoke!");  
    }  
      
    this.notifyObservers = function(arg){  
        if (observers.length == 0) {  
           return;  
        };  
        for (var i = 0, len = observers.length; i < len; i++) {  
            observers[i].update(this, arg);  
        }  
    }  
}  
  
// 主函数  
function main() {  
    var f1 = new F1();  
    var f2 = new F2();  
    var f3 = new F3();  
    // 加入观察者  
    f1.addObserver(f2);  
    f1.addObserver(f3);  
    f1.abc();  
}  
  
// 运行主函数  
main();  

参考来源：https://www.iteye.com/blog/redhacker-1756436