JavaScript中的策略模式

什么是策略模式

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

案例演示

先举个项目中常见的例子：表单验校，这个在我们开发中几乎都会遇到，对于表单中的各种值，在提交时会根据用户输入的值进行规则验校，如果不符合规则就提示用户，增加产品体验。下面就写一个基础的表单来示范：

<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中：

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

    /* checkForm.js */

     /* 表单验校封装 */
    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了，同时也提高了代码的可读性。

总结

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