设计模式前端应用——策略模式

一、基础知识

1、定义：定义一系列算法，把它们一个个封装起来，并且它们可以相互替换

2、实际应用：减少if else的使用，在每种情况执行不同代码的情况下，我们通常使用if else语句来进行操作，使得当前函数代码量庞大，修改麻烦，不灵活。

 

二、举例

1、旅行采用的不同的交通工具，飞机，高铁，动车，汽车，火车等等

2、根据绩效发放年终奖金。绩效分A B C等级，根据不同的等级发放多或少的奖金

3、form表单验证。对每一个输入框进行验证，可以验证是否为空，最小长度，是否符合电话号码，等等

 

三、策略模式的实现（以发放奖金和form表单验证为例）

1、发放奖金规则：绩效得A的员工，将拿到原本工资*3倍的钱；绩效得B的员工，将拿到原本工资*2倍的钱；绩效得C的员工，将拿到原本工资*1.5倍的钱。

（1）我们通常可能会这样写：

<script type="text/javascript">
function calcSalary(original, grade) { //original:原本的工资  grade:绩效等级
    var final;
    if(grade == "A") {
        final = original*3
    }else if(grade == "B") {
        final = original*2
    }else if(grade == "C") {
        final = original*1.5
    }
    return final
}
console.log(calcSalary(2000,'A')) // 6000
console.log(calcSalary(2000,'B')) //4000
console.log(calcSalary(2000,'C')) //3000
</script>

（2）使用策略模式重构代码

再回顾一遍策略模式的定义：定义一系列算法，把它们一个个封装起来，并且它们可以相互替换

 

我们可以观察在计算绩效奖金的过程中，算法的使用方式是不变的，都是根据某个算法取得计算后的奖金数额。而算法的实现是各异和变化的，每种绩效对应着不同的计算规则。一个基于策略模式的程序至少由两部分组成，一组策略和一个调用环境。接下来看一下具体实现：

<script type="text/javascript">
var strategies = { //一组策略
    "A": function(original) {
        return original*3
    },
    "B": function(original) {
        return original*2
    },
    "C": function(original) {
        return original*1.5
    }
}
function calcSalary(original, grade) { //调用环境
    return strategies[grade](original)
}
console.log(calcSalary(2000,'A')) // 6000
console.log(calcSalary(2000,'B')) // 4000
console.log(calcSalary(2000,'C')) // 3000

 

2、form表单验证：一个注册表单，有用户名和密码，其中用户名不能为空，密码长度要大于6位，当提交表单的时候对表单做验证。

（1）我们通常可能会这样写：

<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>
<script type="text/javascript">
    var registerForm = document.getElementById('registerForm');
    registerForm.onsubmit = function() {
        console.log('submit')
        if(registerForm.username.value == '') {
            alert('用户名不能为空');
            return false;
        }else if(registerForm.password.value.length >= 6) {
            alert('密码不得小于6位')
            return false;
        }
    }
</script>

（2）使用策略模式重构代码

看了之前计算薪水的例子，可知第一步我们要把所有的策略封装起来：

var strategies = {
    isNotEmpty: function(value, msg) {
        if(value === '') {
            return msg
        }
    },
    minLength: function(value, length, msg) {
        if(value.length < length) {
            return msg
        }
    }
}

第二步是创建调用策略的环境：因为需要判断使用哪种策略，以及使用这种策略是否需要传参数值（例：minLength策略需要传数值），所以我们对解析和判断的过程做一下封装

var Validator = function(){
        this.cache = []
    };
    Validator.prototype.add = function(dom, rule, msg) {
        var ruleKey = [];
        var ruleVal = ''
        if(rule.indexOf(':')!=-1) {
            ruleKey = rule.split(':')[0];
            ruleVal = rule.split(':')[1];
        } else {
            ruleKey = rule;
        }
        this.cache.push(function(){
            var temp=[]
            temp.push(dom.value)
            if(ruleVal) {
                temp.push(ruleVal)
            }
            temp.push(msg)
            return strategies[ruleKey].apply(dom, temp);
        })
    }
    Validator.prototype.validate = function() {
        var count = 0
        this.cache.forEach(function(item){
            var msg = item()
            if(msg) {
                count++
                alert(msg)
            }
        })
        if(count > 0) {
            return false
        } else {
            return true
        }
    };

最后创建一个Validator实例，在表单提交事件中调用validate方法：

var test = new Validator()
test.add(registerForm.username, 'isNotEmpty', '用户名不能为空');
test.add(registerForm.password, 'minLength: 6','密码至少6位');
registerForm.onsubmit = function() {
    if(!test.validate()) {
         return false;
    }
}

 

总结：最近在看《JavaScript设计模式与开发实践》（作者曾探）一书，做一些笔记来加深印象，有不正确的地方欢迎指正~