JavaScript设计模式中的职责链模式

Posted 三水草肃

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了JavaScript设计模式中的职责链模式相关的知识,希望对你有一定的参考价值。

职责链模式

使多个对象都有机会处理请求,从而避免请求的发送者和接收者之间的耦合关系,将这些对象连成一条链,并沿着这条链传递该请求,直到有一个对象处理它为止

职责链模式的优点

  1. 请求发送者只需要知道链中的第一个节点,从而弱化了发送者和接收者之间的联系。
  2. 解藕了发送者和 N 个接收者之间的复杂关系。

职责链模式的缺点

  1. 不能保证某个请求一定会被链中的节点处理,
  2. 性能方面来说:过长的职责链会带来的性能损耗。

同步职责链

/**
 * 售卖手机的逻辑
 * 1. 付定金
 *     付过定金优先购买,指定能买到,还能享受优惠
 * 2. 不付定金
 *     不一定能买到手机,没有任何优惠
 */
/**
 * orderType: 1 500定金,100优惠券
 *            2 200定金,50优惠券
 * pay:定金是否支付
 * stock:手机库存
 */

const order = function (orderType, pay, stock) 
  if (orderType === 1) 
    if (pay === true) 
      console.log("获取100优惠券");
     else 
      if (stock > 0) 
        console.log("普通购买,没有优惠券");
       else 
        console.log("手机库存不足");
      
    
  
  if (orderType === 2) 
    if (pay === true) 
      console.log("获取50优惠券");
     else 
      if (stock > 0) 
        console.log("普通购买,没有优惠券");
       else 
        console.log("手机库存不足");
      
    
  
  if (orderType === 3) 
    if (stock > 0) 
      console.log("普通购买,没有优惠券");
     else 
      console.log("手机库存不足");
    
  
;

order(1, true, 19);

/**
 * 虽然得到了正确的运行结果,但是代码写的不好,维护起来很是麻烦
 */

/**
 * 用职责链来重构代码
 *    我们先把职责链模式重构这段代码,先把500元订单,200元订单以及普通购买分成3个函数
 */

const orderfive = function (orderType, pay, stock) 
  if (orderType === 1 && pay === true) 
    console.log("获取100优惠券");
   else 
    orderTwo(orderType, pay, stock);
  
;

const orderTwo = function (orderType, pay, stock) 
  if (orderType === 2 && pay === true) 
    console.log("获取50优惠券");
   else 
    orderNormal(orderType, pay, stock);
  
;

const orderNormal = function (orderType, pay, stock) 
  if (stock > 0) 
    console.log("普通购买,没有优惠券");
   else 
    console.log("手机库存不足");
  
;

orderfive(1, false, 19);

/**
 * 以上优化的代码结构已经清晰明了,但是请求链条传递顺序非常僵硬,传递orderfive和ordertwo请求的代码耦合在一起,这样的     代码维护起来十分困难,也不符合开放封闭的原则
 *
 */

/**
 * 灵活可拆分的职责链节点
 *    首先需要改写一下分别表示3种购买模式的节点函数,我们约定,如果某个节点不能处理请求,则返回一个标识,表示该请求需要    继续往后执行
 */

const orderfive1 = function (orderType, pay, stock) 
  if (orderType === 1 && pay === true) 
    console.log("获取100优惠券");
   else 
    return "nextSuccessor";
  
;

const orderTwo1 = function (orderType, pay, stock) 
  if (orderType === 2 && pay === true) 
    console.log("获取50优惠券");
   else 
    return "nextSuccessor";
  
;

const orderNormal1 = function (orderType, pay, stock) 
  if (stock > 0) 
    console.log("普通购买,没有优惠券");
   else 
    console.log("手机库存不足");
  
;

// 接下来需要把函数包装斤职责链节点,我们定义一个构造函数,在实例化new的时候传递的参数即为需要被包装的函数,同时他还有一     个实例属性this.successor,表示在链中的下一个节点

class Chain 
  constructor(fn) 
    this.fn = fn;
    this.successor = null;
  
  setNextSuccessor(successor) 
    return (this.successor = successor);
  
  passRequest() 
    const ret = this.fn.apply(this, arguments);

    if (ret === "nextSuccessor") 
      return (
        this.successor &&
        this.successor.passRequest.apply(this.successor, arguments)
      );
    

    return ret;
  


const chainOrderfive = new Chain(orderfive1);
const chainOrdertwo = new Chain(orderTwo1);
const chainOrdernormal = new Chain(orderNormal);

chainOrderfive.setNextSuccessor(chainOrdertwo);
chainOrdertwo.setNextSuccessor(chainOrdernormal);

chainOrderfive.passRequest(1, false, 500);

异步职责链

  1. 职责链的节点对象可以决定什么时候把请求交给下一个节点
/**
 * 讲一下异步的职责链,会遇到异步的场景/ 这个时候nextSuccessor已经没有用了,需要一个next方法
 */

class Chain 
  constructor(fn) 
    this.fn = fn;
    this.successor = null;
  
  setNextSuccessor(successor) 
    return (this.successor = successor);
  
  next() 
    return (
      this.successor &&
      this.successor.passRequest.apply(this.successor, arguments)
    );
  
  passRequest() 
    const ret = this.fn.apply(this, arguments);

    if (ret === "nextSuccessor") 
      return (
        this.successor &&
        this.successor.passRequest.apply(this.successor, arguments)
      );
    

    return ret;
  


const fn1 = new Chain(function () 
  console.log(1);
  return "nextSuccessor";
);

const fn2 = new Chain(function () 
  console.log(2);
  const self = this;
  setTimeout(() => 
    self.next();
  , 1000);
);

const fn3 = new Chain(function () 
  console.log(3);
);

fn1.setNextSuccessor(fn2).setNextSuccessor(fn3);
fn1.passRequest();

使用 AOP 实现职责链

  1. 以上代码某些逻辑符合要求会返回 succerror 的标识,标识不是唯一的。
const orderfive1 = function (orderType, pay, stock) 
  if (orderType === 1 && pay === true) 
    console.log("获取100优惠券");
   else 
    return "nextSuccessor";
  
;

const orderTwo1 = function (orderType, pay, stock) 
  if (orderType === 2 && pay === true) 
    console.log("获取50优惠券");
   else 
    return "nextSuccessor";
  
;

const orderNormal1 = function (orderType, pay, stock) 
  if (stock > 0) 
    console.log("普通购买,没有优惠券");
   else 
    console.log("手机库存不足");
  
;

Function.prototype.after = function (fn) 
  const self = this;
  return function () 
    const ret = self.apply(this, arguments);
    if (ret === "nextSuccessor") 
      return fn.apply(this, arguments);
    
    return ret;
  ;
;
const order = orderfive1.after(orderTwo1).after(orderNormal1);
order(1, true, 1);

以上是关于JavaScript设计模式中的职责链模式的主要内容,如果未能解决你的问题,请参考以下文章

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

JavaScript之职责链模式

学习笔记javascript设计模式与开发实践(职责链模式)----13 http://blog.csdn.net/pigpigpig4587/article/details/50442406#

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

JavaScript设计模式行为型设计模式--职责链模式

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