定义一系列的算法,把每一个算法封装起来, 并且使它们可相互替换。
策略模式把对象本身和运算规则区分开来，其功能非常强大，因为这个设计模式本身的核心思想就是面向对象编程的多形性的思想。
原来我们这么写：
function computed(method, count) {
let total;
if (method === 'get') {
total = count * 2;
}
if (method === 'post') {
total = count * 3;
}
if (method === 'put') {
total = count * 4;
}
return total;
}
let r1 = computed('get', 10);
let r2 = computed('post', 20);
let r3 = computed('put', 30);
console.log(r1);
console.log(r2);
console.log(r3);
策略模式：
let computedObj = {
'get': function(count) {
return count * 2;
},
'post': function(count) {
return count * 2;
},
'put': function(count) {
return count * 2;
},
}
function countTotal(method, count) {
return computedObj[method](count);
}
let res1 = countTotal('get', 10);
let res2 = countTotal('post', 20);
let res3 = countTotal('put', 30);
console.log(res1);
console.log(res2);
console.log(res3);
策略模式之表单提交：
<!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>策略模式-表单提交</title>
</head>
<body>
<form id="registerForm" class="form">
<div class="form-item">
<input type="text" name="username">
</div>
<div class="form-item">
<input type="text" name="password">
</div>
<button type="submit">注册</button>
</form>
</body>
</html>
<script>
// 常规写法
let oForm = document.querySelector('#registerForm');
// oForm.onsubmit = function(e) {
// // 阻止表单默认提交行为
// e.preventDefault();
// if (oForm.username.value == '') {
// return alert('用户名不能为空')
// }
// if (oForm.password.value.length <= 6) {
// return alert('密码不能小于6位');
// }
// }
// ------------------------------------------------------------------------------------------------------
// 策略模式
// 一组策略
// let rules = {
// isNull: function(value, msg) {
// if (value === '') return msg;
// },
// isMinLength: function(value, length, msg) {
// if (value.length < length) return msg;
// }
// }
// let validatorFn = function(method, value, msg, length, ) {
// if (length) {
// return rules[method](value, length, msg)
// }
// return rules[method](value, msg)
// }
// oForm.onsubmit = function(e) {
// e.preventDefault();
// let v1 = validatorFn('isNull', oForm.username.value, '用户名不能为空');
// let v2 = validatorFn('isMinLength', oForm.password.value, '密码长度不能小于6', 6);
// if (v1) console.log(v1);
// if (v2) console.log(v2);
// else console.log('校验通过');
// }
// ------------------------------------------------------------------------------------------------------
// 通过上面我们发现，我们对于length处理的很蹩脚，我们想要规则写成这样的形式：'密码长度 : 6',我们改造一下
// 策略不变
let rules = {
isNull: function(value, msg) {
if (value === '') return msg;
},
isMinLength: function(value, length, msg) {
if (value.length < length) return msg;
}
}
// 我们创造一个添加规则的类
class AddRules {
constructor() {
this.saveArr = [];
}
add(ele, rule, tip) {
let ruleVal;
if (rule.includes(':')) {
let ruleKey = rule.split(':')[0];
ruleVal = rule.split(':')[1];
rule = ruleKey;
}
this.saveArr.push(function() {
let tempArr = [];
if (ruleVal) {
tempArr.push(ele.value, ruleVal, tip);
} else {
tempArr.push(ele.value, tip);
}
return rules[rule].apply(ele, tempArr)
})
};
valid() {
let count = 0;
let res = []
this.saveArr.forEach(item => {
let r = item();
if (r) {
count++;
console.log(r);
}
})
if (count > 0) {
return false
} else {
return true;
}
}
}
let temp = new AddRules();
temp.add(oForm.username, 'isNull', '用户名不能为空');
temp.add(oForm.password, 'isMinLength:6', '密码长度不小于6');
oForm.onsubmit = function(e) {
// 去除表单默认提交行为
e.preventDefault();
if (temp.valid()) {
console.log('校验通过');
}
}
</script>