javascript策略模式的应用！

时间 2019-11-09

原文原文链接

最近在看《JavaScript设计模式与开发实践》这本书，受益不浅，小记录一下书中的各个demo，加深理解；
策略模式的定义是：定义一系列的算法，把它们一个个封装起来，而且使它们能够相互替换。
案例1：不少公司的年终奖是根据员工的工资基数和年末绩效状况来发放的。例如，绩效为S 的人年终奖有4 倍工资，绩效为A 的人年终奖有3 倍工资，而绩效为B 的人年终奖是2 倍工资。假设财务部要求咱们提供一段代码，来方便他们计算员工的年终奖。用JS实现这个很简单html 代码javascript

var calculateBonus = function(performanceLevel, salary) {
    if (performanceLevel === 'S') {
        return salary * 4;
    }
    if (performanceLevel === 'A') {
        return salary * 3;
    }
    if (performanceLevel === 'B') {
        return salary * 2;
    }
};
calculateBonus('B', 20000); // 输出：40000
calculateBonus('S', 6000); // 输出：24000

这个代码是很是简单的，可是缺点很明显：
a、calculateBonus 函数比较庞大，包含了不少if-else 语句，这些语句须要覆盖全部的逻辑分支。
b、calculateBonus 函数缺少弹性，若是增长了一种新的绩效等级C，或者想把绩效S 的奖金系数改成5，那咱们必须深刻calculateBonus 函数的内部实现，这是违反开放封闭原则的。
c、算法的复用性差，若是在程序的其余地方须要重用这些计算奖金的算法呢？咱们的选择只有复制和粘贴。
这个时候策略模式就用上场了；见代码：
html 代码css

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

案例二：实现一个js当中运动的DIV；
实用策略模式实现以下：
html 代码html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>javascript策略模式的应用！</title>
</head>
<body>
<div style="position:absolute;background:blue; width: 100px;height: 100px;color: #fff;" id="div">我是div</div>
    <script>
 
        var tween = {
            linear: function(t, b, c, d) {
                return c * t / d + b;
            },
            easeIn: function(t, b, c, d) {
                return c * (t /= d) * t + b;
            },
            strongEaseIn: function(t, b, c, d) {
                return c * (t /= d) * t * t * t * t + b;
            },
            strongEaseOut: function(t, b, c, d) {
                return c * ((t = t / d - 1) * t * t * t * t + 1) + b;
            },
            sineaseIn: function(t, b, c, d) {
                return c * (t /= d) * t * t + b;
            },
            sineaseOut: function(t, b, c, d) {
                return c * ((t = t / d - 1) * t * t + 1) + b;
            }
        };
        var Animate = function(dom) {
            this.dom = dom; // 进行运动的dom 节点
            this.startTime = 0; // 动画开始时间
            this.startPos = 0; // 动画开始时，dom 节点的位置，即dom 的初始位置
            this.endPos = 0; // 动画结束时，dom 节点的位置，即dom 的目标位置
            this.propertyName = null; // dom 节点须要被改变的css 属性名
            this.easing = null; // 缓动算法
            this.duration = null; // 动画持续时间
        };
        Animate.prototype.start = function(propertyName, endPos, duration, easing) {
            this.startTime = +new Date; // 动画启动时间
            this.startPos = this.dom.getBoundingClientRect()[propertyName]; // dom 节点初始位置
            this.propertyName = propertyName; // dom 节点须要被改变的CSS 属性名
            this.endPos = endPos; // dom 节点目标位置
            this.duration = duration; // 动画持续事件
            this.easing = tween[easing]; // 缓动算法
            var self = this;
            var timeId = setInterval(function() { // 启动定时器，开始执行动画
                if (self.stop() === false) { // 若是动画已结束，则清除定时器
                    clearInterval(timeId);
                }
            }, 19);
        };
        Animate.prototype.stop = function() {
            var t = +new Date; // 取得当前时间
            if (t >= this.startTime + this.duration) { // (1)
                this.update(this.endPos); // 更新小球的CSS 属性值
                return false;
            }
            var pos = this.easing(t - this.startTime, this.startPos,
                this.endPos - this.startPos, this.duration);
            // pos 为小球当前位置
            this.update(pos); // 更新小球的CSS 属性值
        };
        Animate.prototype.update = function(pos) {
            this.dom.style[this.propertyName] = pos + 'px';
        };

        var div = document.getElementById('div');
        var animate = new Animate(div);
        animate.start('left', 500, 1000, 'strongEaseOut');

    </script>
</body>
</html>

案列三：实现表单验证；
html 代码java

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title></title>
    <link rel="stylesheet" href="">
</head>
<body>
    <form action="http:// xxx.com/register" id="registerForm" method="post">
    请输入用户名：<input type="text" name="userName"/ ><br>
    请输入密码：<input type="text" name="password"/ ><br>
     
    请输入手机号码：<input type="text" name="phoneNumber"/ ><br>
    <button>提交</button><br>
    </form>
<script>
    var registerForm = document.getElementById('registerForm');
    registerForm.onsubmit = function() {
        if (registerForm.userName.value === '') {
            alert('用户名不能为空');
            return false;
        }
        if (registerForm.password.value.length < 6) {
            alert('密码长度不能少于6 位');
            return false;
        }
        if (!/(^1[3|5|8][0-9]{9}$)/.test(registerForm.phoneNumber.value)) {
            alert('手机号码格式不正确');
            return false;
        }
    }
</script>
</body>
</html>

这是一种很常见的代码编写方式，它的缺点跟计算奖金的最第一版本如出一辙。所以，仍是要使用策略模式；代码以下：
html 代码算法

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title></title>
    <link rel="stylesheet" href="">
</head>
<body>
    <form action="http:// xxx.com/register" id="registerForm" method="post">
    请输入用户名：<input type="text" name="userName"/ ><br>
    请输入密码：<input type="text" name="password"/ ><br>
     
    请输入手机号码：<input type="text" name="phoneNumber"/ ><br>
    <button>提交</button><br>
    </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>

策略模式是一种经常使用且有效的设计模式，本章提供了计算奖金、缓动动画、表单校验这三个例子来加深你们对策略模式的理解。从这三个例子中，咱们能够总结出策略模式的一些优势。
a、策略模式利用组合、委托和多态等技术和思想，能够有效地避免多重条件选择语句。
b、策略模式提供了对开放—封闭原则的完美支持，将算法封装在独立的strategy 中，使得它们易于切换，易于理解，易于扩展。
c、策略模式中的算法也能够复用在系统的其余地方，从而避免许多重复的复制粘贴工做。
固然，策略模式也有一些缺点，但这些缺点并不严重。可略过。。设计模式