用觀察者模式實現網頁動畫

       我覺得觀察者模式是非常棒的模式，關於它的應用可謂非常之多啊，本著學習的態度，我用js進行了一次實踐，做的一個觀察者模式構建的網頁動畫，最後的效果是，點擊按鈕就會使得三個方塊做各自的動畫。

初始狀態

 

運動過程中

 

那麼具體是怎樣實現的呢？大致說一下思路吧：

1. 首先建立觀察者和被觀察者介面：

//被觀察者介面function IObserverable(){}IObserverable.prototype={    addObserver:        function(observer){},    removeObserver:        function(observer){},    notify:        function(){}};//觀察者介面function IObserver(){}IObserver.prototype={    update:        function(){}};

2. 然後分別建立按鈕類這個被觀察者和三個盒子物件作為觀察者，
在這裡，我使用了靜態簡單工廠來建立按鈕對象和盒子的jQuery對象,代碼如下：

//簡單工廠function SimpleFactory(){}SimpleFactory.createBox=function(id, jStyles){    var $box=$("<div></div>");    $box.attr("id",id);    $box.css(jStyles);    $(document.body).append($box);//自動加入到頁面中，其實工廠是不應該負責頁面顯示的，但為了方便起見，暫時這樣做嘍    return $box;};SimpleFactory.createButton=function(id, value, jStyle){    var $button=$("<input type='button' />");    $button.attr("id",id);    $button.attr("value", value);    $button.css(jStyle);    $(document.body).append($button);    return $button;};//建立jQuery對象的執行個體    var $box1=SimpleFactory.createBox("box1",{        border:"2px solid red",        width:"100px",        height:"100px",        background:"yellow"    });    var $box2=SimpleFactory.createBox("box2",{        border:"2px solid yellow",        width:"100px",        height:"100px",        background:"blue"    });    var $box3=SimpleFactory.createBox("box3",{        border:"2px solid blue",        width:"100px",        height:"100px",        background:"green"    });    var $button=SimpleFactory.createButton(        "button",        "點我吧",        {            width:"100px"        }    );

而真正的觀察者和被觀察者建立過程如下：

var button=new Button();var box1=new Box1($box1);var box2=new Box2($box2);var box3=new Box3($box3);

 

3. 建立完所需的對象之後，就要將觀察者加入被觀察者的引用集合之中了：

button.addObserver(box1);button.addObserver(box2);button.addObserver(box3);

4. 然後添加相應的點擊事件即可：

$button.click(function(){        button.notify();});

以上只是個初步的骨架，因為觀察者和被觀察者的具體代碼沒有建立，所以不會造成任何影響，下面我就把具體的觀察者和被觀察者的代碼貼出來，特別是觀察者的update方法，每一個update方法都能使自身產生某種動畫效果：

//按鈕類（被觀察者）function Button($element){    this.observers=new Array();}Button.prototype=new IObserverable();Button.prototype.addObserver=function(observer){    this.observers.push(observer);};Button.prototype.removeObserver=function(observer){    this.observers.remove(observer);};Button.prototype.notify=function(){
    for(var i=0; i<this.observers.length; i++)    {        this.observers[i].update();    }};//盒子類（觀察者），Box1, Box2, Box3 extends IBoxfunction IBox(){}IBox.prototype=new IObserver();function Box1($element){    this.$element=$element;}Box1.prototype=new IBox();//這個update實現向右移動300像素然後回到原位的效果Box1.prototype.update=function(){    this.$element.animate(    {        marginLeft:"+300px"    },1000)    .animate(    {        marginLeft:"0px"    }    ,100);};function Box2($element){    this.$element=$element;}Box2.prototype=new IBox();//這個update實現忽隱忽現並移動的效果，同時邊框大小也會變化Box2.prototype.update=function(){    this.$element.animate({        opacity:"hide",        borderWidth:"10px"    },1000, "swing", function(){        $(this).css({            marginLeft:"100px"        });    });    this.$element.animate({        opacity:"show",        borderWidth:"20px"    },1000,"swing");    this.$element.animate({        opacity:"hide",        borderWidth:"2px",        marginLeft:"0px"    },1000,"swing",function(){        $(this).fadeIn(1000);    });};function Box3($element){    this.$element=$element;}Box3.prototype=new IBox();//這個update實現寬度改變的效果，先變到900px，再變到100pxBox3.prototype.update=function(){    this.$element.animate({        width:"900px",        height:"100px"    },1000)    .delay(500)    .animate({        width:"100px",        height:"100px"    },1000);};

 

 

最後，將所有的程式碼群組織起來用一個html顯示，就能看到效果了，還不錯啊:) ，（在chrome中測試），點擊下方的按鈕，所有方塊開始運動了！哈哈。
其實做這個是有原因的，之前自己試著編寫過一個動畫引擎，但只能對一個元素應用動畫效果，很挫啊，不過實現了變色的功能（jquery裡面沒有變色的API，不得不說有些遺憾），嘻嘻，蠻有趣的，所以我就想怎樣實現一個多元素的共同進行的動畫呢？學了觀察者模式之後，終於找到了答案（不過其實也可以直接用jQuery綁定事件就行了，但本著學習的態度嘛，所以搞這麼一個，:)）

最後把My Code打個包吧，大家有興趣可以下載，直接運行其中的html檔案查看效果（最好是在chrome下面運行）。

示範地址：http://jsfiddle.net/everdom/sBA2B/embedded/result/

附件：http://www.kuaipan.cn/file/id_18761907502579748.htm