javascript設計模式實踐之職責鏈--具有百葉窗切換圖片效果的JQuery插件（三）

在上一篇《javascript設計模式實踐之模板方法--具有百葉窗切換圖片效果的JQuery插件（二）》里，通過採用模板方法模式完成了切換效果對象的構建編寫。

接下來就是完成各效果對象的調用和聯動。

切換要求：當前圖片顯示指定時間後執行切換效果並切換下一張圖片，最後一個切換後從頭開始。

按照要求一個效果對象完成後要執行下一個，最後一個完成後要從頭開始， 看上去就是一個帶狀態通知的環形列表，類似於這樣的特征，可以採用職責鏈模式來構建。

職責鏈就是由不同的功能處理構成的鏈表，每一個功能處理作為一個職責，每一個職責完成後傳遞給下一個，特點就是每一個職責處理範圍很明確符合單一職責，擴展方便，而且符合開閉原則。

基於上一篇，肯定先賦予這些效果對象具備構成鏈表的能力。

現在是體現抽象和繼承的時候了。

對baseEffect對象增加指向下一個效果對象的屬性，並增加獲取下一個效果對象的屬性。

    var baseEffect = {
        __nextEffect: null,
        prepare: function (context) {
            throw new Error('請重寫prepare方法');
        },
        transform: function (context) {
            throw new Error('請重寫transform方法');
        },
        execute: function (context) {
            this.prepare(context);
            return this.transform(context);
        },
        setNext: function (effect) {
            return this.__nextEffect = effect;
        },
        next: function () {
            return this.__nextEffect;
        }
    };

其中setNext方法就是設置下一個效果對象，並且必須返回設置的對象，這樣在設置的時候就可以構成鏈式調用。

在baseEffect這個抽象對象中增加了鏈表構建的功能後，其他繼承的子效果對象無需修改代碼即可。

增加了鏈表的構建後的curtain入口函數中，將各個效果對象採用鏈表+鏈式調用的方式非常簡單的就構建起來，並且將他們首尾相接。

    jquery.fn.curtain = function (options) {

        init(setDefaultOptions(options, this));

        downToUpEffect
            .setNext(upToDownEffect)
            .setNext(leftToRightEffect)
            .setNext(rightToLeftEffect)
            .setNext(upDownCrossInEffect)
            .setNext(upDownCrossOutffect)
            .setNext(downToUpEffect);

    }

最後一步就是進行調用了。

編寫一個executeEffect函數，接受effec和contextt參數，effect可傳入效果對象鏈表的第一個。

用一個timer指定間隔時間後調用效果對象的execute方法並傳入context執行效果處理。

一個效果對象執行完成後，通過promise的方式將完成狀態通過done進行響應處理，最後就是遞歸調用executeEffect，並且傳遞下一個效果對象。

    function executeEffect(effect, context) {
        setTimeout(
            function () {
                effect.execute(context).done(
                    function () {
                        executeEffect(effect.next(), context);
                    });
            }, context.interval * 1000);
    }

完成curtain入口函數對各效果的執行。

增加一句調用即可。

    jquery.fn.curtain = function (options) {

        init(setDefaultOptions(options, this));

        downToUpEffect
            .setNext(upToDownEffect)
            .setNext(leftToRightEffect)
            .setNext(rightToLeftEffect)
            .setNext(upDownCrossInEffect)
            .setNext(upDownCrossOutffect)
            .setNext(downToUpEffect);

        executeEffect(downToUpEffect, context);

    }

通過職責鏈模式的構建出的效果執行的鏈表易於使用易於擴展，以後要加個效果，只要編寫效果本身的代碼，將其增加到職責鏈的某個位置，其餘代碼儘可能的無需修改，非常易於擴展。

這就是職責鏈的特點。

至此，全部完成。

代碼：戳