JavaScript设计模式-策略模式
JavaScript中策略模式
什么是策略模式
策略模式是一种简单却常用的设计模式，它的应用场景非常广泛。该模式定义了一系列算法，并将每个算法封装起来，使它们可以相互替换，且算法的变化不会影响使用算法的客户。策略模式属于对象行为模式，它通过对算法进行封装，把使用算法的责任和算法的实现分割开来，并委派给不同的对象对这些算法进行管理。
该模式主要解决在有多种算法相似的情况下，使用if...else所带来的复杂和难以维护。它的优点是算法可以自由切换，同时可以避免多重if...else判断，且具有良好的扩展性。
案例1
在做电商系统时候很多情况下会根据商品来单独计算他们的价格，比如预售价、双十一价格、正常价等，我们可能会这么写：
function getPrice(price, status) {
if (status == 'default') {
return price
} else if (status == 'pre-sale') {
return price * 0.8
} else if (status == 'doubleOneOne') {
return price / 2
}
}
console.log(getPrice(100, 'doubleOneOne')) // 50
上面代码使用了比较多的if...else来进行不同情况下的判断，同时把计算逻辑放到了getPirce方法里面，导致方法比较臃肿，不易维护。可以把不同情况下的逻辑抽离出来，一方面方便维护，另一方面可以提高代码复用率。
function defaultPrice(price) {
return price;
}
function preSale(price) {
return price * 0.8;
}
function doubleOneOne(price) {
return price / 2;
}
function getPrice(price, status) {
if (status == 'default') {
return defaultPrice(price)
} else if (status == 'pre-sale') {
return preSale(price)
} else if (status == 'doubleOneOne') {
return doubleOneOne(price);
}
}
console.log(getPrice(100, 'pre-sale')) //80
上面代码虽然把计算逻辑单独抽离出来了，但是美中不足的地方就是还是有很多if...else，不够优雅，仔细观察，我们可以把各种情况当作key，然后去映射对应的方法，这样getPrice方法就相当纯粹了，后期增加不同的活动，单独维护映射关系以及计算方法即可。
function defaultPrice(price) {
return price;
}
function preSale(price) {
return price * 0.8;
}
function doubleOneOne(price) {
return price / 2;
}
const priceList = {
'default': defaultPrice,
'pre-sale': preSale,
'doubleOneOne': doubleOneOne,
};
function getPrice(price, status) {
return priceList[status](price);
}
console.log(getPrice(100, 'doubleOneOne')); //50
案例2
先举个项目中常见的例子：表单验校，这个在我们开发中几乎都会遇到，对于表单中的各种值，在提交时会根据用户输入的值进行规则验校，如果不符合规则就提示用户，增加产品体验。下面就写一个基础的表单来示范：
<form id='forgot-password-wrapper' action="" method="post">
<label for="mobile">手机号</label>
<input type="number" id="mobile" name="mobile">
<label for="code">验证码</label>
<input type="text" id="code" name="code">
<label for="password">新密码</label>
<input type="password" id="password" name="password">
<label for="passwordAgain">新密码</label>
<input type="password" id="passwordAgain" name="passwordAgain">
<button id='push'>确认</button>
</form>
<script>
const forgotPasswordForm = document.getElementById('forgot-password-wrapper')
forgotPasswordForm.onsubmit = (e)=>{
e.preventDefault()
const mobile = document.getElementById('mobile').value
const code = document.getElementById('code').value
const password = document.getElementById('password').value
const passwordAgain = document.getElementById('passwordAgain').value
const mobileReg = /^[1][3,4,5,7,8,9][0-9]{9}$/
if(mobile === null || mobile === ''){
console.log('请输入手机号')
return false;
}else if(!mobileReg.test(mobile)){
console.log('请输入正确的手机号')
return false;
}else if(code === '' || code === null){
console.log('请输入验证码')
return false;
}else if(code.length != 6){
console.log('请输入6位数验证码')
return false;
}else if(password === '' || password === null){
console.log('请输密码')
return false;
}else if(passwordAgain === '' || passwordAgain === null){
console.log('请再次输密码')
return false;
}else if(passwordAgain != password){
console.log('两次输入密码不一致')
return false;
}else{
alert('提交成功')
}
}
</script>
- 可以看到，我们需要很多
if...else来进行各种情况的判断，而且我们每增加一种，都需要动表单提交的内部代码，而且复用性几乎为0。下面我们可以使用策略模式改变一下：
<form id='forgot-password-wrapper' action="" method="post">
<label for="mobile">手机号</label>
<input type="number" id="mobile" name="mobile">
<label for="code">验证码</label>
<input type="text" id="code" name="code">
<label for="password">新密码</label>
<input type="password" id="password" name="password">
<label for="passwordAgain">新密码</label>
<input type="password" id="passwordAgain" name="passwordAgain">
<button id='push'>确认</button>
</form>
<script>
/* 单独抽离规则 */
const rules = {
isEmpty: (val, message)=>{
if(val === '' || val == null) return message
},
checkLength: (val, message, minLength, maxLength)=>{
if(String(val).length < minLength || String(val).length > maxLength) return message
},
checkMobile: (val, message)=>{
const mobileReg = /^[1][3,4,5,7,8,9][0-9]{9}$/
if(!mobileReg.test(val)) return message
},
isEqual: (val, message, valAgain)=>{
if(val != valAgain) return message
}
}
/* 表单验校封装 */
const checkFrom = {
mobile: (val)=>{
const mobileIsEmpty = rules.isEmpty(val, '请输入手机号')
const mobileIsLegitimate = rules.checkMobile(val, '请输入正确的手机号')
const message = mobileIsEmpty || mobileIsLegitimate
if(message) return message
},
code: (val)=>{
const codeIsEmpty = rules.isEmpty(val, '请输入验证码')
const codeLength = rules.checkLength(val, '请输入6位数验证码', 6, 6)
const message = codeIsEmpty || codeLength
if(message) return message
},
password: (val, valAgain)=>{
const passwordIsEmpty = rules.isEmpty(val, '请输入密码')
const passwordCheckLength = rules.checkLength(val, '请输入8-10位密码', 8, 10)
const passwordAgainIsEmpty = rules.isEmpty(valAgain, '请再次输入密码')
const passwordAgainCheckLength = rules.checkLength(valAgain, '再次确认密码请输入8-10位', 8, 10)
const passwirdIsEqual = rules.isEqual(val, '两次输入密码不一致', valAgain)
const message = passwordIsEmpty || passwordCheckLength || passwordAgainIsEmpty || passwordAgainCheckLength || passwirdIsEqual
if(message) return message
}
}
/* 表单提交 */
const forgotPasswordForm = document.getElementById('forgot-password-wrapper')
forgotPasswordForm.onsubmit = (e)=>{
e.preventDefault()
/* 获取value */
const mobile = document.getElementById('mobile').value
const code = document.getElementById('code').value
const password = document.getElementById('password').value
const passwordAgain = document.getElementById('passwordAgain').value
/* 规则验校 */
const checkMobile = checkFrom.mobile(mobile)
const checkCode = checkFrom.code(code)
const checkPassword = checkFrom.password(password, passwordAgain)
const message = checkMobile || checkCode || checkPassword
if(message){
alert(message)
}else{
alert('提交成功')
}
}
</script>
从代码数量上来看，可能感觉比之前还要多，但是极大的提高了代码的复用性，我们可以把rules和checkFrom单独封装，在使用的地方直接引用，随着rules的不断增加、checkFrom的扩展，我们在处理各种验校就方便多了。
总结
在实际业务中，如果遇到多重条件嵌套问题时候，就应该考虑使用策略模式来进行优化，这样可以提高代码复用性、可读性，易于维护。