JavaScript设计模式——观察者模式详解

观察者模式

观察者模式是一种行为型设计模式，它定义了一种一对多的关系，让多个观察者对象同时监听某一个主题对象。这个主题对象在状态发生变化时，会通知所有观察者对象，使它们能够自动更新自己。

实现观察者模式的方法

观察者模式可以通过JavaScript的构造函数和原型链实现。定义一个Subject类，它是被观察者，也是主题，它有一个observers数组用来存储观察者，还有一个attach()方法用来添加观察者，一个notify()方法用来通知观察者，一个detach()方法用来移除观察者。

function Subject(){
    this.observers = [];
}
Subject.prototype = {
    attach: function(observer){
        this.observers.push(observer);
    },
    detach: function(observer){
        var index = this.observers.indexOf(observer);
        if(index > -1){
            this.observers.splice(index, 1);
        }
    },
    notify: function(){
        this.observers.forEach(function(observer){
            observer.update();
        });
    }
};

定义一个Observer类，它是观察者，它有一个update()方法，用来更新自身。

function Observer(){

}
Observer.prototype = {
    update: function(){
        // 更新自身
    }
};

使用观察者模式

使用观察者模式时，创建一个Subject实例，创建多个Observer实例，把它们添加到Subject实例的observers数组中。当Subject实例的状态发生变化时，调用Subject实例的notify()方法，它会调用每个观察者的update()方法，从而更新观察者的状态。

// 创建Subject实例
var subject = new Subject();

// 创建Observer实例
var observer1 = new Observer();
var observer2 = new Observer();

// 添加观察者
subject.attach(observer1);
subject.attach(observer2);

// 改变Subject实例的状态
subject.notify();

优点

• 观察者模式实现了观察者和被观察者的松耦合，观察者和被观察者之间没有直接的联系，观察者只需要知道被观察者存在即可，实现了低耦合。
• 观察者模式可以实现一对多的通知，被观察者可以同时通知多个观察者，实现了广播通信。

缺点

• 如果一个被观察者对象有多个观察者，将所有的观察者都通知到会花费很多时间。
• 观察者模式没有相应的机制让观察者知道所观察的目标对象是怎么发生变化的，而仅仅只是知道观察目标发生了变化。