[设计模式] Javascript 之 观察者模式

观察者模式:定议

定义对象间的一种一对多的关系，当一个对象状态改变时 (一般称为被观察者)，依赖于该对象的对象被通知，并更新;

观察者模式:说明

1. 观察者模式是行为模式，也被称为：发布-订阅模式、模型-视图模式、源-监听器模式、从属者模；

2. 面对象过程中观察者模式的组成:

　　1>. 抽象主题角色：这个角色里，定义维护了一份对观察者列表的管理集，一组用数组来存放，并定义了对一些基础的接口，比例用来添加跟删除观察者的方法；

　　2>. 具体主题角色：这个角色，对于与客户，具体业务状态数据交互，并做一定的处理，然后再通知各个观察者 更新自己;

　　抽象跟具体主题里的 一些常用的方法接口，如果 add|delete 或 notified方法，在哪个方法不是固定的; add跟delete也可以出现在 具体的主题角色里；

　　3>. 抽象观察者角色：为所有观察者定义一个统一的接口，这个接口叫更新接口；

　　4>. 具体观察者角色：实现抽象观察者角色的各自的更新方法；

3. 执行过程：

　　

4. 观察者模式-结构图:

　　

5. 场景实例描述:

　　1>. 比如说母亲通知孩子吃饭的例子，一个家里有一两个孩子，这两个小孩子有点调皮，喜欢乱跑，妈妈把饭煮好了，但是看不到小孩的身影，叫也没见小孩回应回来的，所以妈妈就在小孩身上装了个 通知设备，一到把饭煮好，妈妈就在一个通知设备上按个按钮，就可以小孩身上的设备上发出声音：‘饭煮好了，快点回来吃饭’，然后小孩就可以马上回来吃刚上桌温热的饭菜了；

　　2>. java的事件监听机制包括：事件源，事件监听器，事件对象；

　　　　事件监听器相当于观察者，观察者用于提供统一的更新方法;

　　　　事件源与事件对象相当于被观察者 (具体主题对象)

6. 观察者模式所应用到的原则: 对象的单一性质原则，开闭原则等；开闭原则所体现到的就是面对对象编码所提到要以接口来编程的原则，这样程序对象间就可以更好的复用及解耦;

7. 观察者模式主要组成: 被观察对象(目标对象, 具体对象, 主题), 观察者 (订阅者, 监听者), 事件(更新方法);

8. 当具体观察者对象的更新方法接收为普通类型数据,比如 string 时, 一般称为“推”模式；

　　当 更新方法传递的是，被观察者(具体主题对象)时，一般被称为“拉”模式；

 

源码实例

1. 主题对象:

function Subject() {
    this.Observers = [];
}

Subject.prototype.add = function(observer) {
    this.Observers.push(observer);
}

Subject.prototype.remove = function(observer) {
    var me = this;
    for (idx in me.Observers) {
        if (me.Observers[idx] == observer) {
            me.Observers[idx].splice(idx, 1);
            break;
        }
    }
}

//推模式
Subject.prototype.notifyState = function(info) {
    var me = this;
    for (idx in me.Observers) {
        me.Observers[idx].update(info)
    }
}

//接模式
Subject.prototype.notifyObservers = function(subject) {
    var me = this;
    for (idx in me.Observers) {
        me.Observers[idx].updateSubject(subject)
    }
}

2. 具体主体对象

function ConcreteSubject() {
    Subject.call(this);
}

ConcreteSubject.prototype.operate = function() {
    var state = 'info';
    this.notifyState(state);
    this.notifyObservers(this);
}

 

3. 观察者对象A

function ConcreteObserverA() {
    this.update = function(info) {
        console.log('A Observer'+info);
    }

　　this.updateSubject = function(subject) {
        console.log('A Observer object');
    }

}

4. 观察者对象B

function ConcreteObserverB() {
    this.update = function(info) {
        console.log('B Observer'+info);
    }
　　this.updateSubject = function(subject) {
        console.log('B Observer object');
    }
}

5. 使用方法;

var subject = new ConcreteSubject();

var aobserver = new ConcreteObserverA();
var bobserver = new ConcreteObserverB();

subject.add(aobserver);
subject.add(bobserver);

subject.operate();

其他说明

主题对象是可以多种不同存在的，就是上面的妈妈叫孩子吃饭例子，一个小区，一个小村庄会有多个的母亲，一个母亲下会有一个或几个的孩子；

母亲是被观察者，小孩们是观察者，他们在等待母亲主动推送消息通知他们去吃饭，但是小孩子回家的具体方式是不一样的，有的是马上跑回来，有的是慢慢吞吞回家去;

母亲是一个对象类，这个对象类当发生煮饭煮熟了，就会执行operate这个方法，去通知这小孩子的观察类对象，然后再更新自己回家去，在面向对象原则里，类要求功能单一职责，这有助于应用情况的扩展以及解耦;