一. 前言
在前端开发中，咱们经常会遇到需求依照必定的次序处理一系列恳求或操作的状况，假如将每一步处理都硬编码在一同，会导致代码臃肿，可保护性和可扩展性都会大大下降。而责任链形式刚好提供了一种高雅的解决方案。
无论你是希望优化代码结构、加强代码的灵敏性，仍是进步代码的可保护性和可扩展性，责任链形式都是一个十分有价值的规划形式。
接下来，跟随我一同探索 JavaScript 中的责任链形式！
二. 什么是责任链形式
1. 根底概念
责任链形式（Chain of Responsibility Pattern）是一种行为规划形式，它允许多个目标（处理者）依次处理同一个恳求，直到其间的一个处理者能够处理该恳求停止。在责任链形式中，恳求沿着链条依次传递，每个处理者决议自己是否处理恳求，假如处理者无法处理恳求，则将恳求传递给链条上的下一个处理者。
在 JavaScript 中，责任链形式一般由一系列目标（处理者）组成，它们一起形成一个处理恳求的链条。每个处理者都包括一个处理恳求的办法，而且拥有一个指向下一个处理者的引证。当一个恳求被发起时，它将从链条的开头开始传递，直至有一个处理者能够彻底处理恳求停止。
责任链形式包括以下几个核心概念：
-
处理者（Handler）：处理者是责任链形式中的要害人物，每个处理者都界说了处理恳求的办法，并持有一个指向下一个处理者的引证。处理者一般包括一个处理恳求的办法（例如
handleRequest），在该办法中处理恳求或许将恳求传递给下一个处理者。 -
链条（Chain）：处理者构成了一个链条，恳求沿着链条从一个处理者传递到另一个处理者。链条的安排和次序决议了恳求的处理次序。
-
恳求（Request）：恳求是需求被处理的目标或信息。恳求经过链条中的每个处理者，直到有一个处理者能够彻底处理恳求。
-
传递恳求（Passing the Request）：处理者在处理恳求时，能够挑选自己处理恳求，也能够将恳求传递给下一个处理者。这样，恳求能够着链条传递并得到处理。
经过责任链形式，咱们能够将恳求的发送者和接收者解耦，灵敏地构建处理恳求的流程。这样能够增强代码的灵敏性和可保护性，一起使得体系更易于扩展和修正。
2. UML 图
依据上面的几个核心概念，咱们能够对责任链形式运用以下 UML 类图来描述：
在上面的类图中：
-
Handler 是笼统处理者，界说了一个处理恳求的接口和一个指向下一个处理者的引证（successor）。
-
ConcreteHandlerA 和 ConcreteHandlerB 是详细处理者，完成了 Handler 中界说的处理恳求的办法 handleRequest，并依据本身责任来处理恳求。假如自己无法处理，就将恳求传递给下一个处理者。
在责任链形式中，恳求从发起经过一条链条上的处理者依次处理，直到找到合适的处理者停止。每个处理者都只重视自己的处理逻辑，能够灵敏地增加、修正或删去处理者，使体系愈加灵敏和可扩展。
3. 效果
JavaScript 责任链形式的效果首要包括以下几个方面：
-
解耦责任处理者：将发送者和接收者解耦，使发送者无需知道详细的接收者是谁，以及怎么处理恳求。每个处理者只需重视自己的责任规模，大大下降了处理者之间的耦合度。
-
动态处理恳求：责任链形式的链条结构能够动态地调整和修正，能够随时增加新的处理者或许移除现有的处理者，以适应不同的需求。
-
灵敏性：每个处理者只需重视自己的责任，能够依据恳求的不同部分进行不同的处理，使得体系更简略进行扩展和保护。
-
下降耦合度：将不同的处理逻辑别离开来，使得每个处理者只需重视自己的责任规模，下降模块之间的耦合度，进步体系的可保护性和可扩展性。
责任链形式的效果在于提供了一种灵敏、可扩展的方式来处理杂乱的恳求处理流程，下降模块之间的耦合度，使得体系更简略保护和扩展。
三. 完成方式
在 JavaScript 中，完成责任链形式一般需求以下几个过程：
-
界说处理者目标，处理者目标需求包括处理恳求的办法，而且持有对下一个处理者的引证。
-
创立一个链条，将处理者依照必定的次序衔接起来。
-
发送恳求，而且沿着链条传递恳求，直到找到能够彻底处理恳求的处理者停止。
简略示例代码：
// 界说处理者目标
class Handler {
constructor(name) {
this.name = name;
this.nextHandler = null;
}
setNextHandler(handler) {
this.nextHandler = handler;
}
handleRequest(request) {
if (this.canHandleRequest(request)) {
console.log(`${this.name} 处理了恳求：${request}`);
} else if (this.nextHandler) {
console.log(`${this.name} 不能处理恳求，传递给下一个处理者`);
this.nextHandler.handleRequest(request);
} else {
console.log("没有处理者能够处理该恳求");
}
}
canHandleRequest(request) {
return false;
}
}
// 创立详细的处理者目标
class ConcreteHandler1 extends Handler {
canHandleRequest(request) {
return request === "A";
}
}
class ConcreteHandler2 extends Handler {
canHandleRequest(request) {
return request === "B";
}
}
class ConcreteHandler3 extends Handler {
canHandleRequest(request) {
return request === "C";
}
}
// 创立处理者链条
const handler1 = new ConcreteHandler1("Handler 1");
const handler2 = new ConcreteHandler2("Handler 2");
const handler3 = new ConcreteHandler3("Handler 3");
handler1.setNextHandler(handler2);
handler2.setNextHandler(handler3);
// 发送恳求
handler1.handleRequest("A");
handler1.handleRequest("B");
handler1.handleRequest("C");
handler1.handleRequest("D");
执行结果如下图所示：
在上面的示例中，咱们首先界说了一个笼统的处理者类Handler，详细的处理者目标ConcreteHandler1、ConcreteHandler2和ConcreteHandler3继承自笼统处理者类，并完成了详细的恳求处理逻辑。然后创立了一个处理者链条，指定了处理者之间的次序，并最终发送了多种不同的恳求，调查处理者是怎么依据自己的才干来处理恳求或许将恳求传递给下一个处理者的。
四. 运用场景
在 JavaScript 中，我总结了责任链形式适用的以下几种场景：
-
表单验证：在前端开发中，表单验证是一个常见的需求。能够运用责任链形式来完成多个验证规矩的处理流程，每个验证规矩作为一个处理者，依据规矩是否匹配来决议是否处理表单验证恳求。
-
恳求处理：在网络恳求处理中，或许需求经过多个处理过程，每个处理过程都有自己的处理逻辑，这时能够运用责任链形式来完成恳求处理流程。
-
权限校验：在权限校验中，或许存在不同级别的权限验证逻辑，运用责任链形式能够完成逐级权限验证，直到找到对应权限处理者停止。
除此之外，能够在其他方面也有相似的运用该形式运用的场景，例如：事情处理、反常处理等等，相似的还有很多。但总体来说，责任链形式适用于处理流程含有多个处理过程，而且这些处理过程能够灵敏组合和扩展的场景。
下面我以表单验证为例，运用责任链形式来逐步验证表单输入是否符合要求。
// 界说处理者目标
class Validator {
constructor(name, validatorFn) {
this.name = name;
this.validatorFn = validatorFn;
this.nextValidator = null;
}
setNextValidator(validator) {
this.nextValidator = validator;
}
validate(value) {
if (this.validatorFn(value)) {
if (this.nextValidator) {
return this.nextValidator.validate(value);
} else {
return true;
}
} else {
return false;
}
}
}
// 详细的验证函数
const isNotEmpty = (value) => {
return value.trim() !== "";
};
const isEmail = (value) => {
const emailPattern = /^[^s@] @[^s@] .[^s@] $/;
return emailPattern.test(value);
};
const isNumber = (value) => {
return !isNaN(value) && isFinite(value);
};
// 创立验证链条
const validator1 = new Validator("NotEmpty", isNotEmpty);
const validator2 = new Validator("IsEmail", isEmail);
const validator3 = new Validator("IsNumber", isNumber);
validator1.setNextValidator(validator2);
validator2.setNextValidator(validator3);
// 模拟表单数据
const formData = {
email: "example@example.com",
age: "25",
address: "",
};
// 进行表单验证
for (let key in formData) {
const isValid = validator1.validate(formData[key]);
console.log(`${key} validation: ${isValid}`);
}
在上述代码中，首先界说了三个详细的验证函数isNotEmpty、isEmail和isNumber，别离用于验证字段是否为空、是否为邮箱格局和是否为数字。然后创立了三个验证器目标，别离对应这三种验证函数，而且依照验证次序衔接起来形成了一个验证链条。最终，模拟了一个表单数据目标formData，对每个字段进行逐个验证，并输出验证结果。
这样，运用责任链形式来完成表单验证，能够在每个验证器中专心于自己的验证逻辑，坚持代码的清晰度，一起也能方便地对验证规矩进行扩展和定制。
五. 优缺点
经过以上的了解，总结一下在 JavaScript 中运用责任链形式的一些优点和缺点：
优点：
-
解耦责任：责任链形式将恳求的发送者和接收者解耦，每个处理者只需重视自己的详细责任，使得体系更灵敏、更易于扩展和保护。
-
简化目标：相比于将所有的处理逻辑会集在一个目标中，责任链形式将每个处理逻辑封装成一个独立的目标，避免了单个目标过于臃肿和杂乱。
-
灵敏性：能够依据需求动态地调整处理链条，能够随时增加、修正、删去处理者，灵敏应对各种改变的需求。
-
封装性：每个处理者都只关怀自己的处理逻辑，对其他处理者内部逻辑无需了解，增强了各处理者之间的独立性。
缺点：
-
功能损耗：因为需求遍历整个链条来寻觅正确的处理者，所以在链条较长的状况下或许会导致功能损耗，特别是在处理大量数据时。
-
链条停留：假如链条规划不合理或许处理者设置不妥，或许导致恳求在链条中停留无法得到正确处理，影响体系的功能和稳定性。
-
调试困难：因为恳求在链条中传递，或许需求跟踪整个链条才干定位问题，增加了调试的难度。
-
过度运用：假如你在追求过度运用责任链形式，或许会使体系变得杂乱而难以了解。
因而，责任链形式在恰当的场景下能够有效地简化代码结构、进步体系灵敏性，但也需求谨慎运用，避免呈现功能问题和杂乱度进步。
六. 结语
在 JavaScript 中，责任链形式是一种十分有用的规划形式，它能够帮助咱们更好地安排代码、简化逻辑、进步体系的灵敏性和可扩展性。经过在不同处理者之间树立衔接，并在需求时动态地调整处理链条，咱们能够更好地应对杂乱的业务逻辑和需求改变。
在编写和运用责任链形式时，咱们需求留意合理地规划链条结构，避免功能损耗和链条停留等问题。一起，也要留意避免过度运用责任链形式，坚持代码的简洁和可保护性。
