javascript设计模式-（二）-CSDN博客

策略模式

定义一系列的算法，把它们一个个封装起来，并且使它们可以相互替换。

将不变的部分和变化的部分隔开是每个设计模式的主题.策略模式也不例外，策略模式的目的就是将算法的使与算的实现分离开来。

    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",100));//400
    console.log(calculateBonus("B",100));//200

用策略模式实现缓动动画

    // 用策略模式实现缓动动画
    //缓动算法
    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;
        this.startTime=0;
        this.startPos=0;
        this.endPos=0;
        this.propertyName=null;
        this.easing=null;
        this.duration=null;
    };

    Animate.prototype.start=function(propertyName,endPos,duration,easing){
        this.startTime=+new Date();
        this.startPos=this.dom.getBoundingClientRect()[propertyName];
        this.propertyName=propertyName;
        this.duration=duration;
        this.easing=tween[easing];
        this.endPos=endPos;

        console.log(this);
        var self=this;

        var timeID=setInterval(function(){
            if(self.step()===false){
                clearInterval(timeID);
            }
        },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( 'player' );
    var animate = new Animate( div );

    //延迟两秒执行动画
    setTimeout(function(){
        animate.start( 'left', 200, 5000, 'strongEaseOut' );            
    },2000);

我是主角

转载于:https://www.cnblogs.com/hlere/p/6746143.html