Published on

责任链模式详解

Authors
  • avatar
    Name
    青雲
    Twitter

责任链模式是一种行为型设计模式，它允许多个对象都有机会处理请求，从而避免请求发送者与多个请求处理者耦合在一起。这些对象连成一条链，并沿着这条链传递请求，直到有一个对象处理它为止。

为什么需要责任链模式？

日常生活中，我们在线点餐后，订单会依次经过几个步骤：接单、准备、制作、打包、送餐。

  1. 接单（Order Taking）：首先，前台负责接收顾客的订单。如果前台忙碌无法立刻处理，他们会将订单传给经理。
  2. 准备（Preparation）：经理收到订单后，检查材料存货，如果某个材料缺货并且需要时间准备，他会通知前台告知顾客等待；否则，他会将订单传递给厨师。
  3. 制作（Cooking）：厨师负责根据订单制作菜品。如果遇到特别菜品需要特殊处理，厨师会与经理沟通，可能会调整菜品的制作流程。
  4. 打包（Packing）：完成菜品制作后，打包员负责把菜品打包好，如果是外卖订单则进一步安排送餐。
  5. 送餐（Delivery）：最后，外卖员将打包好的食物送到顾客手中。

在这个过程中，每个环节（接单、准备、制作、打包、送餐）都像是责任链模式中的一个处理对象。每个处理对象都对订单进行处理，并决定是自行处理还是传递给链上的下一个处理对象。例如，如果厨师忙于处理其他订单，他/她可以决定将一些简单的准备工作委托给助理厨师来做。

通过责任链模式，餐厅能够灵活地处理订单，同时减轻单个员工的负担，因为责任和任务都在员工间分配。此外，如果需要增加新的处理步骤（比如特殊食材准备），只需简单地将新的处理环节加入到责任链中，而不会影响到其他环节的操作，这提高了系统的可扩展性和灵活性。

在实际开发中，有时我们需要将某个请求依次传递给多个处理器。这些处理器可以是组件、服务或函数，它们对请求进行某种处理，直到请求得到最终处理或到达链的末尾。这种处理机制不仅增加了系统的灵活性，还提高了代码的可维护性。

例如，在一个表单提交处理系统中，表单数据需要依次经过验证、日志记录和业务处理等多个步骤。使用责任链模式可以将这些处理步骤解耦并灵活组合。

基本概念

责任链模式的核心思想是将请求的处理逻辑分散到多个处理器中，每个处理器只关注自己那部分处理。如果某个处理器无法处理请求，它会将请求传递给下一个处理器，直到请求被处理或到达链的末尾。

主要角色：

  1. 处理器抽象类（Handler）：定义处理请求的接口，并包含一个指向下一个处理器的引用。
  2. 具体处理器（ConcreteHandler）：实现处理器接口，并根据自身的职责处理请求或将请求传递给下一个处理器。
  3. 客户端（Client）：创建并配置处理链发出请求。

实现示例

我们通过一个实际示例来展示责任链模式的实现过程。假设我们有一个订单处理系统，订单需要依次经过验证、支付和发货几个步骤，可以通过责任链模式实现这些处理功能。

定义处理器抽象类

// 处理器接口，定义处理请求的方法
interface Handler {
  setNext(handler: Handler): Handler;
  handle(request: string): void;
}

实现具体处理器

// 验证处理器
class ValidationHandler implements Handler {
  private nextHandler: Handler;

  setNext(handler: Handler): Handler {
    this.nextHandler = handler;
    return handler;
  }

  handle(request: string): void {
    if (request === 'validate') {
      console.log('Validation Handler: Validating the request');
    } else if (this.nextHandler) {
      this.nextHandler.handle(request);
    }
  }
}

// 支付处理器
class PaymentHandler implements Handler {
  private nextHandler: Handler;

  setNext(handler: Handler): Handler {
    this.nextHandler = handler;
    return handler;
  }

  handle(request: string): void {
    if (request === 'pay') {
      console.log('Payment Handler: Processing payment');
    } else if (this.nextHandler) {
      this.nextHandler.handle(request);
    }
  }
}

// 发货处理器
class ShippingHandler implements Handler {
  private nextHandler: Handler;

  setNext(handler: Handler): Handler {
    this.nextHandler = handler;
    return handler;
  }

  handle(request: string): void {
    if (request === 'ship') {
      console.log('Shipping Handler: Shipping the order');
    } else if (this.nextHandler) {
      this.nextHandler.handle(request);
    }
  }
}

创建和配置处理链

const validationHandler = new ValidationHandler();
const paymentHandler = new PaymentHandler();
const shippingHandler = new ShippingHandler();

validationHandler.setNext(paymentHandler).setNext(shippingHandler);

function processOrder(request: string) {
  validationHandler.handle(request);
}

// 依次处理验证、支付和发货请求
console.log('Processing validation request:');
processOrder('validate');

console.log('Processing payment request:');
processOrder('pay');

console.log('Processing shipping request:');
processOrder('ship');

Processing validation request:
Validation Handler: Validating the request
Processing payment request:
Payment Handler: Processing payment
Processing shipping request:
Shipping Handler: Shipping the order

应用场景

事件冒泡及委托

事件处理是责任链模式在前端开发中最自然的应用之一。DOM 事件的冒泡机制本质上就是一种责任链模式，其中一个事件可以由多个处理程序处理，事件首先被最具体的元素（文档树最深的那一个）接收，并逐级向上传播至较为抽象的节点（直至 document 对象）。事件委托，则是在这条链中的较高级别节点上等待事件冒泡的方式，以此来管理事件。

示例：事件冒泡和事件委托

<div id="grandparent">
  <div id="parent">
    <button id="child">Click me!</button>
  </div>
</div>


// 事件处理器接口
interface EventHandler {
  setNext(handler: EventHandler): EventHandler;
  handle(event: Event): void;
}

// 基础事件处理器实现
class GenericEventHandler implements EventHandler {
  private nextHandler: EventHandler;

  constructor(private element: HTMLElement, private handlerName: string) {
    this.element.addEventListener('click', this.handle.bind(this));
  }

  setNext(handler: EventHandler): EventHandler {
    this.nextHandler = handler;
    return handler;
  }

  handle(event: Event): void {
    console.log(`Handling event at ${this.handlerName}`);
    if (this.nextHandler) {
      this.nextHandler.handle(event);
    }
  }
}

// 创建事件处理链
const grandparent = new GenericEventHandler(document.getElementById('grandparent'), 'grandparent');
const parent = new GenericEventHandler(document.getElementById('parent'), 'parent');
const child = new GenericEventHandler(document.getElementById('child'), 'child');

grandparent.setNext(parent).setNext(child);

中间件架构

在前端框架中，特别是在服务端渲染（SSR）框架（如 Next.js）或 Node.js 框架（如 Express、Koa）中，中间件架构是责任链模式的一种典型应用。每个中间件组件都有机会处理请求并响应，或者将处理权转交给链上的下一个中间件。这种结构简化了跨越多个处理程序的功能共享和组织。

示例：Express 中间件

import express, { Request, Response, NextFunction } from 'express';

const app = express();

// 中间件1
const loggerMiddleware = (req: Request, res: Response, next: NextFunction) => {
  console.log(`Request URL: ${req.url}`);
  next();
};

// 中间件2
const authMiddleware = (req: Request, res: Response, next: NextFunction) => {
  if (req.headers.authorization === 'secret-token') {
    next();
  } else {
    res.status(403).send('Unauthorized');
  }
};

// 中间件3
const finalMiddleware = (req: Request, res: Response) => {
  res.send('Hello, World!');
};

app.use(loggerMiddleware);
app.use(authMiddleware);
app.use(finalMiddleware);

app.listen(3000, () => {
  console.log('Server running on port 3000');
});

请求拦截器

在与后端交互时，前端常使用 Axios、Fetch 等库发起 HTTP 请求。这些库通常允许开发者设置请求和响应拦截器。开发者可以在发送请求之前或收到响应之后执行自定义逻辑。每一个拦截器可以看作责任链上的一个节点，决定是否继续链上的执行，或在某个点修改请求/响应或中止操作。

示例：Axios 请求和响应拦截器

import axios from 'axios';

// 设置请求拦截器
axios.interceptors.request.use(
  config => {
    console.log('Request:', config);
    return config;
  },
  error => {
    return Promise.reject(error);
  }
);

// 设置响应拦截器
axios.interceptors.response.use(
  response => {
    console.log('Response:', response);
    return response;
  },
  error => {
    return Promise.reject(error);
  }
);

// 发起请求
axios.get('https://jsonplaceholder.typicode.com/posts')
  .then(response => {
    console.log('Data:', response.data);
  })
  .catch(error => {
    console.error('Error:', error);
  });

插件系统

很多前端库和框架支持插件系统，例如 Vue 和 Webpack。这些系统允许开发者向库或框架添加自定义功能，而无需修改其内部实现。插件系统通常利用责任链模式，让每个插件有机会处理或转换数据，并将控制权传递给链上的下一个插件。

示例：Webpack 插件系统

// 定义插件接口
interface Plugin {
  apply(compiler: any): void;
}

// 第一个插件
class PluginA implements Plugin {
  apply(compiler: any): void {
    compiler.hooks.emit.tapAsync('PluginA', (compilation, callback) => {
      console.log('PluginA is working.');
      callback();
    });
  }
}

// 第二个插件
class PluginB implements Plugin {
  apply(compiler: any): void {
    compiler.hooks.emit.tapAsync('PluginB', (compilation, callback) => {
      console.log('PluginB is working.');
      callback();
    });
  }
}

// 使用插件系统
const webpack = require('webpack');
const compiler = webpack({
  plugins: [new PluginA(), new PluginB()]
});

// 执行编译
compiler.run((err: any, stats: any) => {
  if (err) {
    console.error(err);
    return;
  }
  console.log(stats.toString());
});

优缺点

优点

  • 降低耦合度：客户端无需了解具体的处理逻辑，只需将请求传递给处理链即可。
  • 灵活性高：可以根据需求动态组合处理链条，增加处理器或改变处理顺序。
  • 扩展性强：支持添加新的处理器，而不需要改变现有代码。

缺点

  • 可能影响性能：如果处理链过长，遍历所有处理器可能影响系统性能。
  • 调试困难：由于请求沿着链传递，出错时可能难以调试，定位问题也变得复杂。

总结

责任链模式通过将请求的处理逻辑分散到多个对象中，灵活地控制请求的处理过程，降低了系统的耦合度，提高了系统的灵活性和可维护性。在实际开发中，责任链模式广泛应用于以下场景：

  • 事件冒泡及委托：DOM 事件的冒泡机制和事件委托本质上是责任链模式的具体应用。
  • 中间件架构：在 SSR 框架或 Node.js 框架中，通过中间件架构，责任链模式简化了多个处理程序的组织。
  • 请求拦截器：像 Axios 和 Fetch 库的请求和响应拦截器，可以在链上的各个节点执行自定义逻辑，处理和修改请求/响应。
  • 插件系统：通过责任链模式，前端库和框架的插件系统允许开发者动态扩展功能而无需修改底层实现。

责任链模式的引入虽然增加了系统的复杂性，但它使得处理过程更为灵活、高效和可插拔。通过责任链模式，开发者可以设计出高可维护性、可扩展的系统架构，以应对复杂的业务需求。这种模式的运用不仅提高了系统性能，也使得代码更具可读性和可管理性。

Discuss on Twitter • View on GitHub