Skip to content

Latest commit

 

History

History
145 lines (126 loc) · 6.63 KB

7.1.2.md

File metadata and controls

145 lines (126 loc) · 6.63 KB
Raw

柒.1.2 策略模式

柒.1.2.1 什么是策略模式

​ 策略模式是一种简单却常用的设计模式，它的应用场景非常广泛。该模式定义了一系列算法，并将每个算法封装起来，使它们可以相互替换，且算法的变化不会影响使用算法的客户。策略模式属于对象行为模式，它通过对算法进行封装，把使用算法的责任和算法的实现分割开来，并委派给不同的对象对这些算法进行管理。 ​ 该模式主要解决在有多种算法相似的情况下，使用 if...else 所带来的复杂和难以维护。它的优点是算法可以自由切换，同时可以避免多重if...else判断，且具有良好的扩展性。

柒.1.2.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。下面我们可以使用策略模式改变一下：

1.我们可以吧一些规则先抽离到一个公共js中，方便我们在全局使用，这里我就把它放在全局的checkForm.js中：

/* 单独抽离规则 */
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
    }
}

2.一般情况下，比如手机号、验证码、密码等这些提示在整个项目中基本相同，所以在规则封装完以后，接着我们可以把需要验校的字段再次封装一下，方便全局使用，这就需要结合业务以及自身的情况灵活调整了。

/* 表单验校封装 */
const checkForm = {
    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
    }
}

/*导出*/
export default checkForm

3.封装完以后我们就可以愉快地使用了：

import checkForm from '@/utils/checkForm'

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 checkMobile = checkForm.mobile(mobile)
    const checkCode = checkForm.code(code)
    const checkPassword = checkForm.password(password, passwordAgain)
    const message = checkMobile || checkCode || checkPassword
    if(message){
        alert(message)
    }else{
        alert('提交成功')
    }
}

从代码数量上来看，可能感觉比之前还要多，但是极大的提高了代码的复用性，我们可以把rules和checkFrom单独封装，在使用的地方直接引用即可，再也不用写一堆if...else了，同时也提高了代码的可读性。

柒.1.2.3 总结

在实际开发中，如果各种判断条件下的策略相互独立且可复用、内部逻辑相对复杂、需要灵活组合的情况下，我们就需要考虑使用策略模式了。