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

Posted 2022-12-05 三水草肃

职责链模式

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

职责链模式的优点

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);