你的位置:首页 > Java教程

[Java教程]javascript设计模式实践之职责链

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

 

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

这就是职责链的特点。

 

至此,全部完成。

 

代码:戳