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上可以看到