前端责任链设计模式案例分享

责任链模式是一种行为型设计模式，它可以将请求沿着一条处理链进行传递，直到有一个处理器能够处理该请求为止。在前端开发中，责任链模式通常用于处理用户输入事件，例如点击、滚动等。

下面是一个简单的前端责任链模式案例，假设有一个页面上有三个按钮，分别对应“保存”、“提交”和“取消”操作。当用户点击某个按钮时，我们需要依次执行一些操作，例如数据验证、数据保存、数据提交等。

首先，我们需要定义一个处理器接口，该接口包含一个处理方法和一个指向下一个处理器的指针：

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('表单数据验证失败');
}

在上面的代码中，我们创建了一个责任链，将“必填项”处理器、 “邮箱格式”处理器和“手机号码格式”处理器链接在一起。当用户提交表单时，我们依次对每个输入框的数据进行验证，如果有任何一个验证失败，则会停止验证，并提示用户错误信息。通过这种方式，我们可以将复杂的数据验证逻辑拆分成多个小的处理器，方便维护和扩展。

当然，我可以再举几个前端责任链模式的例子：

1. 异步请求的缓存处理。假设我们有一个需要异步请求数据的应用程序，我们可以使用责任链模式来实现数据的缓存处理。我们可以创建一个缓存处理器，当数据在缓存中存在时，直接返回缓存数据；否则，将请求转发给下一个处理器，以便从服务器上获取数据。如果下一个处理器仍然无法获取数据，则会终止处理，并提示用户无法获取数据的错误信息。
2. 事件传递处理。在前端开发中，我们经常需要处理用户的交互事件，例如点击、鼠标滚动等。我们可以使用责任链模式来处理这些事件。我们可以创建一个处理器链，将事件从顶层元素向下传递，直到找到可以处理事件的元素为止。如果没有找到可以处理事件的元素，则会停止处理，并提示用户无法处理事件的错误信息。

3. 格式化处理器。假设我们有一个文本编辑器，我们可以使用责任链模式来实现文本格式化。我们可以创建多个处理器，每个处理器对应一种格式化方式，例如加粗、斜体、下划线等。当用户对文本进行格式化时，我们可以将文本传递给第一个处理器，让它处理完毕后再传递给下一个处理器，直到所有格式化处理器都处理完毕为止。

   本文由博客一文多发平台 OpenWrite 发布！