javascript设计模式学习笔记之策略模式

策略模式

• 策略模式指的是 定义一系列的算法，把它们一个个封装起来，将不变的部分和变化的部分隔开，实际就是将算法的使用和实现分离出来, 这样就能避免不少的if 条件判断, 而且加强了代码的复用性;
• 其中包含一个策略类, 和一个环境类;
• 计算奖金的例子:

// 策略类
    var performanceS = function () {}

    performanceS.prototype.calculate = function (salary) {
        return salary * 4;
    }

    var performanceA = function () {}

    performanceA.prototype.calculate = function (salary) {
        return salary * 3;
    }

    var performanceB = function () {

    }

    performanceB.prototype.calculate = function (salary) {
        return salary * 2;
    }

    // 环境类
    var Bonus = function () {
        this.salary = null;
        this.strategy = null;
    }

    Bonus.prototype.setSalary = function (salary) {
        this.salary = salary;
    }

    Bonus.prototype.setStrategy = function (strategy) {
        this.strategy = strategy;
    }

    Bonus.prototype.getBonus = function () {
        return this.strategy.calculate(this.salary);
    }

    var bonus = new Bonus();
    bonus.setSalary(1000); // 设置原始工资
    bonus.setStrategy(new performanceS()); // 设置策略对象
    console.log(bonus.getBonus());

• 缓动动画

// 策略类
        var tween = {
            /**
             * 缓动动画
             * @param t 已消耗的时间
             * @param b 小球的原始位置
             * @param c 小球的目标位置
             * @param d 动画持续的总时间
             * @return {*}
             */
            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;
            this.startTime = 0;
            this.startPos = 0;
            this.endPos = 0;
            this.propertyName = null;
            this.easing = null;
            this.duration = null;
        }
        /**
         * 启动动画
         * @param propertyName 属性
         * @param endPose 结束位置
         * @param duration 持续时间
         * @param easing 缓动算法
         */
        Animate.prototype.start = function (propertyName, endPose, duration, easing) {
            this.startTime = +new Date();
            this.startPos = this.dom.getBoundingClientRect()[propertyName]; // dom 节点初始位置
            this.propertyName = propertyName;
            this.endPos = endPose;
            this.duration = duration;
            this.easing = tween[easing];
            var self = this;
            var timerId = setInterval(function () {
                if (self.step() === false) {
                    clearInterval(timerId);
                }
            }, 19);
        }
        // 每 19 毫秒就执行 一次
        Animate.prototype.step = function () {
            var t = +new Date();
            if (t > this.startTime + this.duration) {
                this.update(this.endPos);
                return false;
            }
            var pos = this.easing(
                t - this.startTime,
                this.startPos,
                this.endPos - this.startPos,
                this.duration
            );
            this.update(pos);
        }
        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', 1500, 5000, 'linear');
        // animate.start('left', 1500, 5000, 'easeIn');
        // animate.start('left', 1500, 5000, 'strongEaseIn');
        animate.start('left', 1500, 5000, 'strongEaseOut');
        // animate.start('left', 1500, 5000, 'sineaseIn');
        // animate.start('left', 1500, 5000, 'sineaseOut');
        // animate.start('top', 1500, 5000, 'linear');
        // animate.start('top', 1500, 5000, 'easeIn');
        // animate.start('top', 1500, 5000, 'strongEaseIn');
        // animate.start('top', 1500, 5000, 'strongEaseOut');
        // animate.start('top', 1500, 5000, 'sineaseIn');
        // animate.start('top', 1500, 5000, 'sineaseOut');

• 表单校验

// 策略类
        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;
                }
            }
        }
        // 环境类
        var Validator = function () {
            this.cache = [];
        }
        Validator.prototype.add = function (dom, rule, errorMsg) {
            var ary = rule.split(':');
            this.cache.push(function () {
                var strategy = ary.shift(); // 删除并返回数据第一个元素
                ary.unshift(dom.value); // 向数组的开头添加一个或更多元素，并返回新的长度
                ary.push(errorMsg);
                return strategies[strategy].apply(dom, ary);
            });
        }
        Validator.prototype.start = function () {
            for (var i = 0, validatorFunc; validatorFunc = this.cache[i++];) {
                console.log(validatorFunc = this.cache[i++]);
                var msg = validatorFunc();
                if (msg) {
                    return msg;
                }
            }
        }
        var validatorFunc = function () {
            var validator = new Validator();
            validator.add(registerForm.userName, 'isNonEmpty', '用户名不能为空');
            validator.add(registerForm.password, 'minLength:6', '密码长度不能少于6位');
            validator.add(registerForm.phoneNumber, 'isMobile', '手机号码格式不正确');
            return validator.start();
        }
        var registerForm = document.getElementById('registerForm');
        registerForm.onsubmit = function () {
            var errorMsg = validatorFunc();
            if (errorMsg) {
                alert(errorMsg);
                return false;
            }
        }

• 以上的代码都是在个人github上能够看到