责任链模式最强工具res-chain🚀

上面的logo是由ai生成

责任链模式介绍

责任链模式（Chain of Responsibility Pattern）是一种行为型设计模式，它通过把请求的发送者和接收者解耦，将多个对象连接成一个链，并沿着这条链传递请求，直到有一个对象能够处理它为止，从而避免了请求的发送者和接收者之间的直接耦合。

在责任链模式中，每个处理者都持有对下一个处理者的引用，即构成一个链表结构。当请求从链头开始流经链上的每个处理者时，如果某个处理者能够处理该请求，就直接处理，否则将请求发送给下一个处理者，直到有一个处理者能够处理为止。

这种方式可以灵活地动态添加或修改请求的处理流程，同时也避免了由于请求类型过多而导致类的爆炸性增长的问题。

看完以上责任链的描述，有没有发现跟Node.js的某些库特别的像，没错，就是koa。什么？没用过koa？那我建议你立马学起来，因为它用起来特别的简单。

下面来一个简单使用koa的例子：

const Koa = require('koa');
const app = new Koa();


app.use(async (ctx, next) => {
if (ctx.request.url === '/') {

    ctx.body = 'home';
return;

  }

next(); // 执行下面的回调函数

});


app.use(async (ctx, next) => {
if (ctx.request.url === '/hello') {

    ctx.body = 'hello world';
return;

  }

});


app.listen(3000);

通过node运行上面的代码，在浏览器请求localhost:3000，接口就会返回home，当我们请求localhost:3000/hello，接口就会返回hello world。

上面对请求的处理过程就很符合职责链模式的思想，我们可以清楚的知道每个链做的工作，并且链条的顺序流程也很清晰。

有人就会问，只在一个回调里面也能处理呀，比如下面的代码：

app.use(async (ctx, next) => {
if (ctx.request.url === '/') {

    ctx.body = 'home';
return;

  } else if (ctx.request.url === '/home') {

	ctx.body = 'hello world';
return

  }

});

是的，上面的代码确实可以实现，但是这就要回到我们使用责任链模式的初衷了：为了逻辑解耦。

责任链解决的问题

我们继续接着聊上一节的问题，使用if确实可以实现相同效果，但是在某些场景中，if并没有职责链那么好用，为什么这么说呢。

我们找一个应用案例举个例子：

假设我们负责一个售卖手机的网站，需求的定义是：经过分别缴纳500元定金和200元定金的两轮预订，现在到了正式购买阶段。公司对于交了定金的用户有一定的优惠政策，规则如下：

• 
  
• 缴纳500元定金的用户可以收到100元优惠券；
  
• 缴纳200元定金的用户可以收到50元优惠券；
  
• 没有缴纳定金的用户进入普通购买模式，没有优惠券。
  
• 而且在库存不足的情况下，不一定能保证买得到。
  

下面开始设计几个字段，解释它们的含义：

• 
  
• orderType：表示订单类型，值为1表示500元定金用户，值为2表示200元定金用户，值为3表示普通用户。
  
• pay：表示用户是否支付定金，值为布尔值true和false，就算用户下了500元定金的订单，但是如果没有支付定金，那也会降级为普通用户购买模式。
  
• stock：表示当前用户普通购买的手机库存数量，已经支付过定金的用户不受限制。
  

下面我们分别用if和职责链模式来实现：

使用if：

const order = function (orderType, pay, stock) {
if (orderType === 1) {
if (pay === true) {
console.log('500元定金预购，得到100元优惠券')

    } else {
if (stock > 0) {
console.log('普通用户购买，无优惠券')

      } else {
console.log('手机库存不足')

      }

    } else if (orderType === 2) {
if (pay === true) {
console.log('200元定金预购，得到50元优惠券')

      } else {
if (stock > 0) {
console.log('普通用户购买，无优惠券')

        } else {
console.log('手机库存不足')

        }

      }

    } else if (orderType === 3) {
if (stock > 0) {
console.log('普通用户购买，无优惠券')

        } else {
console.log('手机库存不足')

      } 

  }

}

order(1, true, 500)  // 输出：500元定金预购，得到100元优惠券'

虽然上面的代码也可以实现需求，但是代码实在是难以阅读，维护起来更是困难，如果继续在这个代码上开发，未来肯定会成为一座很大的屎山。

下面我们使用责任链模式来实现：

function printResult(orderType, pay, stock) {
// 这里ResChain类是模拟koa的写法，后面会讲如何实现ResChain
// 请先耐心看完它是如何处理的
const resChain = new ResChain();
// 针对500元定金的情况

  resChain.add('order500', (_, next) => {
if (orderType === 1 && pay === true) {
console.log('500元定金预购，拿到100元优惠券');
return;

    }
next(); // 这里将会调用order200对应的回调函数

  });
// 针对200元定金的情况

  resChain.add('order200', (_, next) => {
if (orderType === 2 && pay === true) {
console.log('200元定金预购，拿到50元优惠券');
return;

    }
next(); // 这里会调用noOrder对应回调函数

  });
// 针对普通用户购买的情况

  resChain.add('noOrder', (_, next) => {
if (stock > 0) {
console.log('普通用户购买，无优惠券');

    } else {
console.log('手机库存不足');

    }

  });


  resChain.run(); // 开始执行order500对应的回调函数

}

// 测试
printResult(1, true, 500); // 500元定金预购，得到100元优惠券
printResult(1, false, 500); // 普通用户购买，无优惠券
printResult(2, true, 500); // 200元定金预购，得到50元优惠券
printResult(3, false, 500); // 普通用户购买，无优惠券
printResult(3, false, 0); // 手机库存不足

以上的代码经过责任链处理之后特别的清晰，并且减少了大量的if-else嵌套，每个链的职责分，我们可以看出责任链模式存在的优点：

责任链还特别的灵活，如果说后面pm找我们加需求，需要加多一个预付定金400，返回80元优惠券，处理起来也是易如反掌，只需要怼回去，只需要在order500下面加多一个节点处理即可：

... 

resChain.add('order500', (_, next) => {
if (orderType === 1 && pay === true) {
console.log('500元定金预购，拿到100元优惠券');
return;

  }
next();

})

+ // 加上这一块

+ resChain.add('order400', (_, next) => {

+  if (orderType === 3 && pay === true) {

+    console.log('400元定金预购，拿80元优惠券');

+    return;

+  }

+  next();

+ })


resChain.add('order200', (_, next) => {
if (orderType === 2 && pay === true) {
console.log('200元定金预购，拿到50元优惠券');
return;

  }
next();

})

...

就是这么简单。那这个ResChain是如何实现的呢？

封装ResChain

先别急，首先我们来了解一下koa是如何实现：在链节点的回调函数内调用next就可以跳到下一个节点的呢？

话不多说，直接看源码，参考的库是koa-compose，代码也是特别的简洁：

function compose (middleware) {
// 这里传入的middleware是函数数组，例如： [fn1, fn2, fn3, fn4, ...]
if (!Array.isArray(middleware)) throw new TypeError('Middleware stack must be an array!')
// 判断数组里的元素是不是函数类型
for (const fn of middleware) {
if (typeof fn !== 'function') throw new TypeError('Middleware must be composed of functions!')

  }

return function (context, next) {
// last called middleware #
let index = -1
return dispatch(0);

// 这里利用了函数申明提升的特性
function dispatch (i) {
// 这里是防止重复调用next
if (i <= index) return Promise.reject(new Error('next() called multiple times'))

      index = i

// 从middleware中取出回调函数
let fn = middleware[i]
if (i === middleware.length) fn = next

// 如果fn为空了，则结束运行
if (!fn) return Promise.resolve()

try {
// next函数其实就是middleware的下一个函数，执行next就是执行下一个函数
return Promise.resolve(fn(context, dispatch.bind(null, i + 1)))

      } catch (err) {
return Promise.reject(err)

      }

    }

  }

}

看完源代码，我们接着来实现ResChain类，首先整理一下应该要有的方法：

• 
  
• add方法。可以添加回调函数，并按添加的顺序执行。
  
• run方法。开始按顺序执行责任链。
  

当add方法执行的时候，把回调函数按顺序push进一个数组中。

export class ResChain {

/**

   * 按顺序存放链的key

   */

  keyOrder = [];
/**

   * key对应的函数

   */

  key2FnMap = new Map();
/**

   * 每个节点都可以拿到的对象

   */

  ctx = {}
constructor(ctx) {
this.ctx = ctx;

  }

// 这里用key来标识当前callback的唯一性，后面重复添加可以区分。
add(key, callback) {
if (this.key2FnMap.has(key)) {
throw new Error(`Chain ${key} already exists`);

    }

this.keyOrder.push(key);
this.key2FnMap.set(key, callback);
return this;

  }

async run() {
let index = -1;
const dispatch = (i) => {
if (i <= index) {
return Promise.reject(new Error('next() called multiple times'));

      }


      index = i;
const fn = this.key2FnMap.get(this.keyOrder[i]);
if (!fn) {
return Promise.resolve(void 0);

      }

return fn(this.ctx, dispatch.bind(null, i + 1));

    };

return dispatch(0);

  }

}

add方法的第一个参数key可以用来判断是否已经添加过相同的回调。

有人会说，koa的中间件是异步函数的，你这个行不行？

当然可以，接下来看个异步的例子：

const resChain = new ResChain();


resChain.add('async1', async (_, next) => {
console.log('async1');
await next();

});



resChain.add('async2', async (_, next) => {
console.log('async2')
// 这里可以执行一些异步处理函数
await new Promise((resolve, reject) => {
setTimeOut(() => {
resolve();

    }, 1000)

  });

await next();

});



resChain.add('key3', async (_, next) => {
console.log('key3');
await next();

});


// 执行责任链
await resChain.run();

console.log('finished');

// 先输出 async1 async2 然后停顿了1秒钟之后，才输出async3 finished

🚧 需要注意：如果是异步模式，则链上的每个回调函数必须要 await next()，因为next函数代表下一个环的异步函数。

跟koa的中间件方式简直一毛一样。

有人可能还注意到了，ResChain实例化的时候可以传入对象，比如下面的代码：

const resChain = new ResChain({ interrupt: false });

传入对象具体有什么用法呢？可以用来获取一些在链中处理好的数据，来实现发送者和处理者的解耦。可能比较抽象，我们来举个例子。

比如需要进行数据校验的场景，如果不通过，则中断提交：

const ctx = {
// 表单项
model: {
name: '',
phone: '',

  },
// 错误提示
error: '',
// 是否中断
interrupt: false,

}
const resChain = new ResChain(ctx);


resChain.add('校验name', (ctx, next) => {
const { name = '' } = ctx;
if (name === '') {

    ctx.error = '请填写name';

    ctx.interrupt = true;
return;

  }

next();

})


resChain.add('校验phone', (ctx, next) => {
const { phone = '' } = ctx;
if (phone === '') {

    ctx.error = '请填写手机号';

    ctx.interrupt = true;
return;

  }

next();

})

// 执行责任链

resChain.run();

// 如果需要中断，则提示
if (resChain.ctx.interrupt) {
alert(resChain.ctx.error);
return;

}

如果是使用if来实现：

const ctx = {
// 表单项
model: {
name: '',
phone: '',

  },
// 错误提示
error: '',
// 是否中断
interrupt: false,

}

if(ctx.model.name === '') {

  ctx.error = '请填写用户名';

  ctx.interrupt = true;

}

if (!ctx.interrupt && ctx.model.phone === '') {

  ctx.error = '请填写手机号';

  ctx.interrupt = true;

}

// 如果需要中断，则提示
if (resChain.ctx.interrupt) {
alert(resChain.ctx.error);
return;

}

可以发现，对phone的判断逻辑，就要先判断interrupt是否为false才能继续，而且如果下面还有其他的字段校验，那必须都走一遍if。

这也是责任链的一个优势，可以在某个环节按自己的想法停止，不用继续走后面的节点。

目前我已经把这个工具上传到npm了，如果想要在自己的项目中使用，直接安装：
res-chain即可使用：

npm install res-chain

# 或者
# yarn add res-chain

引入：

import { ResChain } from 'res-chain';
// CommonJS方式的引入也是支持的
// const { ResChain } = 'res-chain';

const resChain = new ResChain();


resChain.add('key1', (_, next) => {
console.log('key1');
next();

});


resChain.add('key2', (_, next) => {
console.log('key2');
// 这里没有调用next，则不会执行key3

});


resChain.add('key3', (_, next) => {
console.log('key3');
next();

});

// 执行职责链

resChain.run(); // => 将会按顺序输出 key1 key2

芜湖起飞🚀。

有了这个工具函数，我们就可以视场景去优化项目中的一大坨if-else嵌套，或者直接使用它来实现一些业务中比较复杂的逻辑。

起源

这个工具诞生的过程还挺巧合的，某一天周六我在公司加班赶需求，发现需要在一堆旧逻辑if-else中添加新的逻辑，强迫症的我实在是无法忍受在💩山上继续堆💩。。。

我陷入沉思，用什么方式去优化呢？看了网上责任链模式的实现，感觉还是不够优雅。

无意中翻到了之前用koa写的项目，突然灵光乍现💡，koa的中间件不就是一个很棒的实践。调用next就能够往下一个节点走，不调用的话就可以终止。

于是立即动工，三下五除二就完成了。我还推荐给部门的其他前端小伙伴，他们也在一些需求的复杂逻辑中有运用。

总结

过去无意学到的某个知识，或者某个概念，在未来也许会发挥作用，你只需要做的就是等待。

没有koa这么棒的库，估计也不会有这工具了，所以还是得感谢它的作者如此聪明。😁

如果你也喜欢这个工具，欢迎去github里给个🌟，感谢。

如果有什么更好的建议，在底下留言，一起探讨。

工具链接

res-chain

参考

• 
  
• koa-compose
  
• juejin.cn/post/684490…