13.Javascript设计模式之观察者模式----Observer

13.Javascript设计模式之观察者模式----Observer

今天来整理一下有关观察者模式的东东。

概念

为了便于理解，首先我举一个现实生活中的例子：在快乐男生比赛过程其实就是观察者的一个体现，可以这样说吉杰是一个被观察者， 而杨二，包小柏，还有巫启贤就是3个观察者，被观察者操作（唱歌）时，观察者们就开始操作（评分），被观察者唱歌就是通知观察者们进行评分。

GoF说道：Observer模式的意图是“定义对象间的一种一对多的依赖关系，当一个对象的状态发生改变时，所有依赖于它的对象都得到通知并被自动更新”。从这段话里我们可以得到两个信息，如下：

1. 观察者（具体执行操作的对象，有多个）

2. 被观察者（顾名思义是被观察的对象，如果该对象发生某些变化则通知观察者执行对应的操）

观察者模式示例

一句话，这个模式的实质就是你可以对某个对象的状态进行观察，并且在其发生改变时能够得到通知。因此给出下面这个非常简单的例子，您可以看看先...

//example using listeners
var element = $('example');
var fn1 = function(e) {
    //handle click
};
var fn2 = function(e) {
    // do other stuff with click
};
addEvent(element, 'click', fn1);
addEvent(element, 'click', fn2);

// example using handlers
var element = document.getElementById('b');
var fn1 = function(e) {
    // handle click
};
var fn2 = function(e) {
    // do other stuff with click
};
element.onclick = fn1;
element.onclick = fn2; //fn1被覆盖了

在《Javascript设计模式》一书中，还给出了这样一个例子：

// Publisher API
var Animation = function(o) {
    this.onStart = new Publisher,
    this.onComplete = new Publisher,
    this.onTween = new Publisher;
};
Animation.method('fly', function() {
    // begin animation
    this.onStart.deliver();
    for ( ... ) { // loop through frames
    // deliver frame number
    this.onTween.deliver(i);
    }
    // end animation
    this.onComplete.deliver();
});

// setup an account with the animation manager
var Superman = new Animation({...config properties...});
// Begin implementing subscribers
var putOnCape = function(i) { };
var takeOffCape = function(i) { };
putOnCape.subscribe(Superman.onStart);
takeOffCape.subscribe(Superman.onComplete);
// fly can be called anywhere
Superman.fly();
// for instance:
addEvent(element, 'click', function() {
    Superman.fly();
});

这个会不会看的有点儿费劲儿呢？呵呵，A za A za Fighting......