JavaScript设计模式-职责链模式

前端御书房

已于 2022-10-15 15:22:26 修改

阅读量465

点赞数

分类专栏： JavaScript设计模式文章标签： javascript 设计模式前端

于 2022-07-28 12:00:00 首次发布

本文链接：https://blog.csdn.net/qq_40850839/article/details/122338083

版权

JavaScript设计模式专栏收录该内容

24 篇文章 2 订阅

订阅专栏

职责链模式

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

概念

节点：一系列可能会处理请求的对象被连接成一条链，请求在这些对象之间依次传递，直到遇到一个可以处理它的对象，我们把这些对象称为链中的节点

职责链的结构

职责链由一个个节点构成，每个节点都是一个对象，对象中都包含相同的属性名和方法名，这样就容易添加、删除节点。

构造函数，用来构造链中的节点，每个节点都保存处理函数，记录下一个节点。

function Chain (fn){
  this.fn = fn;
  this.successor = null; 
}

设置当前节点的下一个处理的节点，与其他节点建立链接，从而形成链式结构

Chain.prototype.setSuccessor = function (successor){
  this.successor = successor;
}

执行处理函数，根据处理结果判断是否需要继续执行。

// 传递请求给某个节点。统一规定当函数返回nextSuccessor时将请求传递给下一个函数
Chain.prototype.passRequest = function (){
  let ret = this.fn.apply(this, arguments);
  if(ret === 'nextSuccessor'){
    this.successor && this.successor.passRequest.apply(this.successor, arguments);
  }
  return ret;
}

示例：订购手机

如果用户预付定金500元，则获得100元优惠。如果用户预付定金200元，则获得50元优惠。如果不预付定金，当库存不足的时候得不到手机，当库存足够的时候可以得到手机。

// 预付定金500的处理函数
function order500(orderType, pay, stock){
  if(orderType === 1 && pay){
    console.log('500元定金已付，获得100元优惠券');
  } else {
    return 'nextSuccessor';
  }
}

// 预付定金200的处理函数
function order200(orderType, pay, stock){
  if(orderType === 2 && pay){
    console.log('200元定金已付，获得50元优惠券');
  } else {
    return 'nextSuccessor';
  }
}

// 不预付定金的处理函数
function orderNormal(orderType, pay, stock){
  if(stock > 0){
    console.log('普通购买，暂无优惠券');
  } else {
    console.log('手机库存不足');
  }
}

// 构造函数，用来构造链中的节点
function Chain (fn){
  this.fn = fn; // 当前处理的节点
  this.successor = null; // 下一个处理的节点
}

// 设置下一个处理的节点
Chain.prototype.setSuccessor = function (successor){
  this.successor = successor;
}


// 传递请求给某个节点。统一规定当函数返回nextSuccessor时将请求传递给下一个函数
Chain.prototype.passRequest = function (){
  let ret = this.fn.apply(this, arguments);
  if(ret === 'nextSuccessor'){
    this.successor && this.successor.passRequest.apply(this.successor, arguments);
  }
  return ret;
}

let chain500 = new Chain(order500);
let chain200 = new Chain(order200);
let chainNormal = new Chain(orderNormal);
chain500.setSuccessor(chain200);
chain200.setSuccessor(chainNormal);

chain500.passRequest(1, true, 500);
chain500.passRequest(2, true, 500);
chain500.passRequest(0, true, 1);

示例：异步职责链

// 构造函数，用来构造链中的节点
function Chain(fn) {
    this.fn = fn;
    this.successor = null;
  }


// 设置下一个节点
  Chain.prototype.setSuccessor = function (successor) {
    this.successor = successor;
  }
// 处理请求
  Chain.prototype.passRequest = function () {
    let ret = this.fn.apply(this, arguments);
  }
  
// 传递请求到下一个节点
  Chain.prototype.next = function () {
    this.successor && this.successor.fn.apply(this.successor, arguments);
  }

  function payment() {
    setTimeout(() => {
      console.log('第一阶段完成');
      this.next();
    }, 2000);
  }

  function unionPay() {
    setTimeout(() => {
      console.log('第二阶段完成');
      this.next();
    }, 2000);
  }

  function request() {
    setTimeout(() => {
      console.log('第三阶段完成');
    }, 2000);
  }

  let chainPayment = new Chain(payment);
  let chainUnionPay = new Chain(unionPay);
  let chainRequest = new Chain(request);

  chainPayment.setSuccessor(chainUnionPay);
  chainUnionPay.setSuccessor(chainRequest);
  chainPayment.passRequest();