JavaScript设计模式 - 职责链模式

职责链模式

使多个对象都有机会处理请求,从而避免了请求的发送者与多个接收者直接的耦合关系,将这些接受连接成一条链,顺着这条链传递该请求,知道找到能处理该请求的对象

这种模式符合单一原则,使每个方法都只有一个职责;符合开放封闭原则,在需求增加时可以很方便的扩充新责任,使用时也无需知晓谁是真正的处理方法,减少了大量的 if 以及 switch 循环判断语句

这种模式的缺点是团队成员需要对责任链存在共识,也就是说这个模式写上别人不容易看懂,排查错误也是不容易的

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Document</title>
	</head>
	<body>
		<input type="text" placeholder="输入符合条件的密码" />

		<button>确认</button>

		<script>
			const ipt = document.querySelector("input")
			const btn = document.querySelector("button")
			btn.addEventListener("click", () => {
				checks.check()
			})

			function checkEmpty() {
				if (!ipt.value.trim()) {
					console.log("不能为空")
					return
				}
				return "next"
			}

			function checkNumber() {
				if (Number.isNaN(+ipt.value)) {
					console.log("只能为数字")
					return
				}
				return "next"
			}

			function checkLength() {
				if (ipt.value.length < 8) {
					console.log("必须大于 8 位")
					return
				}
				return "next"
			}

			///

			class Chain {
				constructor(func) {
					this.checkRule = func || (() => "next")
					this.nextRule = null
				}
				addRule(nextRule) {
					this.nextRule = new Chain(nextRule)
					return this.nextRule
				}
				end() {
					this.nextRule = {
						check: () => "end",
					}
				}
				check() {
					this.checkRule() == "next" ? this.nextRule.check() : null
				}
			}

			
			const checks = new Chain()
			checks.addRule(checkEmpty).addRule(checkNumber).addRule(checkLength).end()
		</script>
	</body>
</html>

在这里插入图片描述

你可能感兴趣的:(JavaScript,设计模式,JS,javascript,设计模式,前端,es6,责任链模式)