一.戰略形式

1.定義:把一些小的算法,封裝起來,使他們之間能夠相互替代(把代碼的完成和運用星散開來)
2.應用戰略形式完成小方塊緩動

html代碼:

<div id="container" style="width:500px;margin:0 auto;background-color: silver;">
  <div id="move" style="position: absolute;background-color:blue;width:20px;height:20px"></div>
</div>

js代碼:

var container = document.getElementById('container');
container.style.height = window.innerHeight +"px";
var tween = {//t動畫已斲喪時候、b原始位置、c目標位置、d持續時候
  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.duration = 0;//小球活動的時候
    this.propertyName = null;//要轉變的css屬性,比方top,left
    this.easing=null;//緩動算法
};
animate.prototype.start = function(endPos,duration,propertyName,easing){
    //紀錄最先位置,並設置定時器是不是有要實行的步數
    this.startTime = new Date();
    this.startPos = this.dom.getBoundingClientRect()[propertyName];
    this.endPos = endPos;
    this.duration = duration;
    this.propertyName = propertyName;
    this.easing = tween[easing];
    var setTime = setInterval(function(){
        if(this.step()){
            clearsetInterval(setTime);
        }
        this.step();
    }.bind(this),20)

}
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.duration);//t動畫已斲喪時候、b原始位置、c目標位置、d持續時候
    this.update(pos);

}
animate.prototype.update = function(pos){//更新div的css屬性
    if(pos > window.innerWidth || pos>window.innerHeight){
        this.dom.style[this.propertyName] = this.endPos +'px';
        return false;
    }
    this.dom.style[this.propertyName] = pos +'px';
}
//挪用
var move = document.getElementById('move');
var a = new animate(move);
 a.start(100,1000,'bottom','sineaseIn')

3.優瑕玷
長處:防止多重前提推斷語句;遵照開放-封閉準繩,具有較好的擴展性,便於切換;可復用性;
瑕玷:違犯起碼學問準繩(向用戶暴露一切的完成)

二.狀況形式

1.定義:許可一個對象在其狀況轉變時轉變他的行動,對象看起來視乎修改了他的類
2.狀況形式例子:電源開關三種狀況的相互變化(狀況驅動行動)

var Light = function(){
   this.offState = new offLightState(this);
   this.weakState = new weakLightState(this);
   this.strongState = new strongLightState(this);
   this.button = null;
}
Light.prototype.start = function(){
    this.button = document.getElementById('change');
    this.current = this.offState;
    this.button.onclick = function(){
        this.current.btnPressed();
    }.bind(this);
}
Light.prototype.setState = function(newState){//轉變狀況
    this.current = newState;
}
//狀況形式的關鍵是把每種狀況都封裝成一個類
var offLightState = function(light){
    this.light = light;
};
offLightState.prototype.btnPressed = function(){
    console.log('調弱');
    this.light.setState(this.light.weakState);
}
var weakLightState = function(light){
    this.light = light;
};
weakLightState.prototype.btnPressed = function(){
    console.log('調強');
    this.light.setState(this.light.strongState);
}
var strongLightState = function(light){
    this.light = light;
};
strongLightState.prototype.btnPressed = function(){
    console.log('封閉');
    this.light.setState(this.light.offState);
}

var light = new Light();
light.start();//調弱 調強 封閉

3.狀況形式是狀況機的一種完成體式格局,還能夠直接將狀況託付給字面量,應用Function.prototype.call()挪用,到達和狀況形式一樣的結果

var FMC = {
    on:{
        buttonWasPressed:function(){
            console.log('變弱')
            this.current = FMC.weak;
        }
    },
    weak:{
        buttonWasPressed:function(){
        console.log('變強')
        this.current = FMC.strong;
        }
    },
    strong:{
        buttonWasPressed:function(){
        console.log('變更強')
        this.current = FMC.superstrong;
        }
    },
    superstrong:{
        buttonWasPressed:function(){
            console.log('封閉')
            this.current = FMC.off;
        }
    },
    off:{
        buttonWasPressed:function(){
            console.log('翻開')
            this.current = FMC.on;
        }
    }
}
var light = function(){
    this.current = FMC.off;
    this.button = null;
}
light.prototype.start = function(){
    this.button = document.getElementById('change');
    console.log("current",this.current)
    this.button.onclick = function(){
        this.current.buttonWasPressed.call(this);
    }.bind(this);
}
var l = new light();
l.start();

4.優瑕玷
長處:可擴展性較好,能夠輕易的增添新的狀況;比擬冗餘的if else推斷,狀況形式將邏輯封裝在類中,防止Context無窮膨脹
瑕玷:代碼邏輯疏散在各個類中,形成邏輯疏散的題目

三.對照兩種形式

相同點:這兩種形式都只要一個上下文、一些戰略類或者是狀況類,上下文把要求託付給這些類來實行
差別點:這兩種形式的目標是差別的;戰略形式的戰略類之間是相互平行同等的,而狀況形式的狀況類把狀況和行動封裝到一同,把邏輯完成封裝到類中,狀況之間的切換也早被劃定完成.