责任链模式是一种行为型设计模式，它能够将申请沿着一条解决链进行传递，直到有一个处理器可能解决该申请为止。在前端开发中，责任链模式通常用于解决用户输出事件，例如点击、滚动等。
上面是一个简略的前端责任链模式案例，假如有一个页面上有三个按钮，别离对应“保留”、“提交”和“勾销”操作。当用户点击某个按钮时，咱们须要顺次执行一些操作，例如数据验证、数据保留、数据提交等。
首先，咱们须要定义一个处理器接口，该接口蕴含一个解决办法和一个指向下一个处理器的指针：
class Handler { constructor() { this.nextHandler = null; } setNext(handler) { this.nextHandler = handler; } handleRequest(request) { if (this.nextHandler !== null) { return this.nextHandler.handleRequest(request); } return null; }}接下来，咱们须要创立三个具体的处理器，别离对应“保留”、“提交”和“勾销”操作：
class SaveHandler extends Handler { handleRequest(request) { if (request === 'save') { console.log('数据保留胜利'); return true; } else { return super.handleRequest(request); } }}class SubmitHandler extends Handler { handleRequest(request) { if (request === 'submit') { console.log('数据提交胜利'); return true; } else { return super.handleRequest(request); } }}class CancelHandler extends Handler { handleRequest(request) { if (request === 'cancel') { console.log('操作已勾销'); return true; } else { return super.handleRequest(request); } }}最初，咱们须要将这三个处理器链接起来，造成一个责任链。在这个责任链中，如果以后处理器无奈解决该申请，它会将申请传递给下一个处理器，直到有一个处理器可能解决该申请为止：
const saveHandler = new SaveHandler();const submitHandler = new SubmitHandler();const cancelHandler = new CancelHandler();saveHandler.setNext(submitHandler);submitHandler.setNext(cancelHandler);// 当用户点击“保留”按钮时，顺次执行数据验证、数据保留、数据提交操作saveHandler.handleRequest('save');// 当用户点击“提交”按钮时，顺次执行数据验证、数据提交操作saveHandler.handleRequest('submit');// 当用户点击“勾销”按钮时，执行勾销操作saveHandler.handleRequest('cancel');在下面的代码中，咱们创立了一个责任链，将“保留”处理器、 “提交”处理器和“勾销”处理器链接在一起。当用户点击某个按钮时，咱们只须要调用责任链的第一个处理器即可，该处理器会顺次将申请传递给下一个处理器，直到有一个处理器可能解决该申请为止。通过这种形式，咱们能够将简单的业务逻辑拆分成多个小的处理器，不便保护和扩大。
再举一个前端责任链模式的例子，假如咱们有一个表单，其中蕴含多个输入框，每个输入框都须要进行数据验证。当用户提交表单时，咱们须要一一验证每个输入框的数据，并在呈现谬误时提醒用户。
首先，咱们须要定义一个处理器接口，该接口蕴含一个解决办法和一个指向下一个处理器的指针：
class Validator { constructor() { this.nextValidator = null; } setNext(validator) { this.nextValidator = validator; } validate(value) { if (this.nextValidator !== null) { return this.nextValidator.validate(value); } return true; }}接下来，咱们须要创立多个具体的处理器，每个处理器对应一个输入框的数据验证：
class RequiredValidator extends Validator { validate(value) { if (!value) { console.log('该项不能为空'); return false; } else { return super.validate(value); } }}class EmailValidator extends Validator { validate(value) { if (!/^[\w-]+(\.[\w-]+)*@[\w-]+(\.[\w-]+)+$/.test(value)) { console.log('请输出正确的邮箱地址'); return false; } else { return super.validate(value); } }}class PhoneValidator extends Validator { validate(value) { if (!/^[1][3,4,5,7,8][0-9]{9}$/.test(value)) { console.log('请输出正确的手机号码'); return false; } else { return super.validate(value); } }}最初，咱们须要将这些处理器链接起来，造成一个责任链。在这个责任链中，每个处理器都会顺次对输入框的数据进行验证，如果有任何一个验证失败，则会进行验证，并提醒用户错误信息：
const requiredValidator = new RequiredValidator();const emailValidator = new EmailValidator();const phoneValidator = new PhoneValidator();requiredValidator.setNext(emailValidator);emailValidator.setNext(phoneValidator);// 当用户提交表单时，顺次验证每个输入框的数据const formValues = { name: '张三', email: 'zhangsan', phone: '1234567890'};let isValid = true;for (const fieldName in formValues) { const fieldValue = formValues[fieldName]; const validator = requiredValidator[fieldName]; if (!validator.validate(fieldValue)) { isValid = false; break; }}if (isValid) { console.log('表单数据验证通过');} else { console.log('表单数据验证失败');}在下面的代码中，咱们创立了一个责任链，将“必填项”处理器、 “邮箱格局”处理器和“手机号码格局”处理器链接在一起。当用户提交表单时，咱们顺次对每个输入框的数据进行验证，如果有任何一个验证失败，则会进行验证，并提醒用户错误信息。通过这种形式，咱们能够将简单的数据验证逻辑拆分成多个小的处理器，不便保护和扩大。
当然，我能够再举几个前端责任链模式的例子：
- 异步申请的缓存解决。假如咱们有一个须要异步申请数据的应用程序，咱们能够应用责任链模式来实现数据的缓存解决。咱们能够创立一个缓存处理器，当数据在缓存中存在时，间接返回缓存数据；否则，将申请转发给下一个处理器，以便从服务器上获取数据。如果下一个处理器依然无奈获取数据，则会终止解决，并提醒用户无奈获取数据的错误信息。
- 事件传递解决。在前端开发中，咱们常常须要解决用户的交互事件，例如点击、鼠标滚动等。咱们能够应用责任链模式来解决这些事件。咱们能够创立一个处理器链，将事件从顶层元素向下传递，直到找到能够处理事件的元素为止。如果没有找到能够处理事件的元素，则会进行解决，并提醒用户无奈处理事件的错误信息。
格式化处理器。假如咱们有一个文本编辑器，咱们能够应用责任链模式来实现文本格式化。咱们能够创立多个处理器，每个处理器对应一种格式化形式，例如加粗、斜体、下划线等。当用户对文本进行格式化时，咱们能够将文本传递给第一个处理器，让它处理完毕后再传递给下一个处理器，直到所有格式化处理器都处理完毕为止。
本文由博客一文多发平台 OpenWrite 公布！