javascript设计模式实践之职责链--具有百叶窗切换图片效果的JQuery插件

Posted 2020-06-11

在上一篇《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);

    }

 

通过职责链模式的构建出的效果执行的链表易于使用易于扩展，以后要加个效果，只要编写效果本身的代码，将其增加到职责链的某个位置，其余代码尽可能的无需修改，非常易于扩展。

这就是职责链的特点。

 

至此，全部完成。

 

代码：戳