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); }
通过职责链模式的构建出的效果执行的链表易于使用易于扩展,以后要加个效果,只要编写效果本身的代码,将其增加到职责链的某个位置,其余代码尽可能的无需修改,非常易于扩展。
这就是职责链的特点。
至此,全部完成。
代码:戳