摘要：策略模式策略模式指的是定義一系列的算法，把它們一個(gè)個(gè)封裝起來(lái)，將不變的部分和變化的部分隔開(kāi)，實(shí)際就是將算法的使用和實(shí)現(xiàn)分離出來(lái)這樣就能避免很多的條件判斷并且增強(qiáng)了代碼的復(fù)用性其中包含一個(gè)策略類(lèi)和一個(gè)環(huán)境類(lèi)計(jì)算獎(jiǎng)金的例子策略類(lèi)環(huán)境類(lèi)設(shè)置原始工

策略模式指的是 定義一系列的算法，把它們一個(gè)個(gè)封裝起來(lái)，將不變的部分和變化的部分隔開(kāi)，實(shí)際就是將算法的使用和實(shí)現(xiàn)分離出來(lái), 這樣就能避免很多的if 條件判斷, 并且增強(qiáng)了代碼的復(fù)用性;

其中包含一個(gè)策略類(lèi), 和一個(gè)環(huán)境類(lèi);

計(jì)算獎(jiǎng)金的例子:

    // 策略類(lèi)
    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;
    }

    // 環(huán)境類(lèi)
    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); // 設(shè)置原始工資
    bonus.setStrategy(new performanceS()); // 設(shè)置策略對(duì)象
    console.log(bonus.getBonus());

緩動(dòng)動(dòng)畫(huà)

        // 策略類(lèi)
        var tween = {
            /**
             * 緩動(dòng)動(dòng)畫(huà)
             * @param t 已消耗的時(shí)間
             * @param b 小球的原始位置
             * @param c 小球的目標(biāo)位置
             * @param d 動(dòng)畫(huà)持續(xù)的總時(shí)間
             * @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;
            }
        }
        // 環(huán)境類(lèi)
        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;
        }
        /**
         * 啟動(dòng)動(dòng)畫(huà)
         * @param propertyName 屬性
         * @param endPose 結(jié)束位置
         * @param duration 持續(xù)時(shí)間
         * @param easing 緩動(dòng)算法
         */
        Animate.prototype.start = function (propertyName, endPose, duration, easing) {
            this.startTime = +new Date();
            this.startPos = this.dom.getBoundingClientRect()[propertyName]; // dom 節(jié)點(diǎn)初始位置
            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 毫秒就執(zhí)行 一次
        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");

表單校驗(yàn)

        // 策略類(lèi)
        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;
                }
            }
        }
        // 環(huán)境類(lèi)
        var Validator = function () {
            this.cache = [];
        }
        Validator.prototype.add = function (dom, rule, errorMsg) {
            var ary = rule.split(":");
            this.cache.push(function () {
                var strategy = ary.shift(); // 刪除并返回?cái)?shù)據(jù)第一個(gè)元素
                ary.unshift(dom.value); // 向數(shù)組的開(kāi)頭添加一個(gè)或更多元素，并返回新的長(zhǎng)度
                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", "密碼長(zhǎng)度不能少于6位");
            validator.add(registerForm.phoneNumber, "isMobile", "手機(jī)號(hào)碼格式不正確");
            return validator.start();
        }
        var registerForm = document.getElementById("registerForm");
        registerForm.onsubmit = function () {
            var errorMsg = validatorFunc();
            if (errorMsg) {
                alert(errorMsg);
                return false;
            }
        }

以上的代碼都是在我的github上可以看到