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

时间:2022-05-16 14:18:59

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

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

这就是职责链的特点。

至此,全部完成。

代码: