策略模式应用实例-优快云博客

本文链接：https://blog.youkuaiyun.com/ywy502/article/details/104759903

策略模式

策略模式的定义是：定义一系列的算法，把它们一个个封装起来，并且使它们可以相互替换。
例子1：
很多公司的年终奖是根据员工的工资基数和年底绩效情况来发放的。例如，绩效为 S的人年终奖有 4倍工资，绩效为 A的人年终奖有 3倍工资，而绩效为 B的人年终奖是 2倍工资。假设财务部要求我们提供一段代码，来方便他们计算员工的年终奖。

var strategies = {
    "S": function (salary) {
        return salary * 4;
    },
    "A": function (salary) {
        return salary * 3;
    },
    "B": function (salary) {
        return salary * 2;
      
    }
};
var calculateBonus = function (level, salary) {
    return strategies[level](salary);
};
console.log(calculateBonus('S', 20000)); // 输出：80000
console.log(calculateBonus('A', 10000)); // 输出：30000

例子2
假设我们正在编写一个注册的页面，在点击注册按钮之前，有如下几条校验逻辑。
 用户名不能为空。
 密码长度不能少于 6位。
 手机号码必须符合格式。

<html>
<body>
    <form action="http:// xxx.com/register" id="registerForm" method="post">
        请输入用户名：<input type="text" name="userName" /> 请输入密码：<input type="text" name="password" /> 请输入手机号码：
        <input type="text" name="phoneNumber" />
        <button>提交</button>
    </form>
    <script>
        /***********************策略对象**************************/
        var strategies = {
            isNonEmpty: function(value, errorMsg) {
                if (value === "") {
                    return errorMsg;
                }
            },
            minLength: function(value, length, errorMsg) {
                if (value.length < length) {
                    return errorMsg;
                }
            },
            isMobile: function(value, errorMsg) {
                if (!/(^1[3|5|8][0-9]{9}$)/.test(value)) {
                    return errorMsg;
                }
            }
        };
        /***********************Validator 类**************************/
        var Validator = function() {
            this.cache = [];
        };
        Validator.prototype.add = function(dom, rules) {
            var self = this;
            for (var i = 0, rule;rule = rules[i++];) {
                (function(rule) {
                    var strategyAry = rule.strategy.split(":");
                    var errorMsg = rule.errorMsg;
                    self.cache.push(function() {
                        var strategy = strategyAry.shift();

                        strategyAry.unshift(dom.value);
                        strategyAry.push(errorMsg);
                        return strategies[strategy].apply(dom, strategyAry);
                    });
                })(rule);
            }
        };
        Validator.prototype.start = function() {
            for (var i = 0, validatorFunc;
                (validatorFunc = this.cache[i++]);) {
                var errorMsg = validatorFunc();
                if (errorMsg) {
                    return errorMsg;
                }
            }
        };
        /***********************客户调用代码**************************/
        var registerForm = document.getElementById("registerForm");
        var validataFunc = function() {
            var validator = new Validator();
            validator.add(registerForm.userName, [{
                strategy: "isNonEmpty",
                errorMsg: "用户名不能为空"
            }, {
                strategy: "minLength:6",
                errorMsg: "用户名长度不能小于 10 位"
            }]);
            validator.add(registerForm.password, [{
                strategy: "minLength:6",
                errorMsg: "密码长度不能小于 6 位"
            }]);
            validator.add(registerForm.phoneNumber, [{
                strategy: "isMobile",
                errorMsg: "手机号码格式不正确"
            }]);
            var errorMsg = validator.start();
            return errorMsg;
        };
        registerForm.onsubmit = function() {
            var errorMsg = validataFunc();
            if (errorMsg) {
                alert(errorMsg);
                return false;
            }
        };
    </script>
</body>

</html>

JS策略模式

策略模式