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......