关于javascript:前端责任链设计模式案例分享

52次阅读

共计 3681 个字符,预计需要花费 10 分钟才能阅读完成。

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

上面是一个简略的前端责任链模式案例,假如有一个页面上有三个按钮,别离对应“保留”、“提交”和“勾销”操作。当用户点击某个按钮时,咱们须要顺次执行一些操作,例如数据验证、数据保留、数据提交等。

首先,咱们须要定义一个处理器接口,该接口蕴含一个解决办法和一个指向下一个处理器的指针:

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 公布!

正文完
 0