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

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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);

    }

 

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

这就是职责链的特点。

 

至此,全部完成。

 

代码:

以上是关于javascript设计模式实践之职责链--具有百叶窗切换图片效果的JQuery插件的主要内容,如果未能解决你的问题,请参考以下文章

JavaScript之职责链模式

JavaScript---设计模式之职责链模式

深入理解JavaScript系列(38):设计模式之职责链模式

设计模式之职责链模式(JAVA实现)

JAVA SCRIPT设计模式--行为型--设计模式之Responsibility职责链模式(13)

javascript设计模式——职责链模式