摘要：一策略模式定義把一些小的算法封裝起來(lái)使他們之間可以相互替換把代碼的實(shí)現(xiàn)和使用分離開(kāi)來(lái)利用策略模式實(shí)現(xiàn)小方塊緩動(dòng)代碼代碼動(dòng)畫(huà)已消耗時(shí)間原始位置目標(biāo)位置持續(xù)時(shí)間小球運(yùn)動(dòng)的時(shí)間要改變的屬性例如緩動(dòng)算法記錄開(kāi)始位置并設(shè)置定時(shí)器是否有要執(zhí)行的

1.定義:把一些小的算法,封裝起來(lái),使他們之間可以相互替換(把代碼的實(shí)現(xiàn)和使用分離開(kāi)來(lái))
2.利用策略模式實(shí)現(xiàn)小方塊緩動(dòng)

html代碼:

js代碼:

var container = document.getElementById("container");
container.style.height = window.innerHeight +"px";
var tween = {//t動(dòng)畫(huà)已消耗時(shí)間、b原始位置、c目標(biāo)位置、d持續(xù)時(shí)間
  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;//小球運(yùn)動(dòng)的時(shí)間
    this.propertyName = null;//要改變的css屬性,例如top,left
    this.easing=null;//緩動(dòng)算法
};
animate.prototype.start = function(endPos,duration,propertyName,easing){
    //記錄開(kāi)始位置,并設(shè)置定時(shí)器是否有要執(zhí)行的步數(shù)
    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(){//動(dòng)畫(huà)執(zhí)行一步需要的操作
    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動(dòng)畫(huà)已消耗時(shí)間、b原始位置、c目標(biāo)位置、d持續(xù)時(shí)間
    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";
}
//調(diào)用
var move = document.getElementById("move");
var a = new animate(move);
 a.start(100,1000,"bottom","sineaseIn")

3.優(yōu)缺點(diǎn)
優(yōu)點(diǎn):避免多重條件判斷語(yǔ)句;遵循開(kāi)放-封閉原則,具有較好的擴(kuò)展性,便于切換;可復(fù)用性;
缺點(diǎn):違背最少知識(shí)原則(向用戶暴露所有的實(shí)現(xiàn))

1.定義:允許一個(gè)對(duì)象在其狀態(tài)改變時(shí)改變他的行為,對(duì)象看起來(lái)視乎修改了他的類
2.狀態(tài)模式例子:電源開(kāi)關(guān)三種狀態(tài)的互相變化(狀態(tài)驅(qū)動(dòng)行為)

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){//改變狀態(tài)
    this.current = newState;
}
//狀態(tài)模式的關(guān)鍵是把每種狀態(tài)都封裝成一個(gè)類
var offLightState = function(light){
    this.light = light;
};
offLightState.prototype.btnPressed = function(){
    console.log("調(diào)弱");
    this.light.setState(this.light.weakState);
}
var weakLightState = function(light){
    this.light = light;
};
weakLightState.prototype.btnPressed = function(){
    console.log("調(diào)強(qiáng)");
    this.light.setState(this.light.strongState);
}
var strongLightState = function(light){
    this.light = light;
};
strongLightState.prototype.btnPressed = function(){
    console.log("關(guān)閉");
    this.light.setState(this.light.offState);
}

var light = new Light();
light.start();//調(diào)弱 調(diào)強(qiáng) 關(guān)閉

3.狀態(tài)模式是狀態(tài)機(jī)的一種實(shí)現(xiàn)方式,還可以直接將狀態(tài)委托給字面量,利用Function.prototype.call()調(diào)用,達(dá)到和狀態(tài)模式一樣的效果

var FMC = {
    on:{
        buttonWasPressed:function(){
            console.log("變?nèi)?)
            this.current = FMC.weak;
        }
    },
    weak:{
        buttonWasPressed:function(){
        console.log("變強(qiáng)")
        this.current = FMC.strong;
        }
    },
    strong:{
        buttonWasPressed:function(){
        console.log("變更強(qiáng)")
        this.current = FMC.superstrong;
        }
    },
    superstrong:{
        buttonWasPressed:function(){
            console.log("關(guān)閉")
            this.current = FMC.off;
        }
    },
    off:{
        buttonWasPressed:function(){
            console.log("打開(kāi)")
            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.優(yōu)缺點(diǎn)
優(yōu)點(diǎn):可擴(kuò)展性較好,可以方便的增加新的狀態(tài);相比冗余的if else判斷,狀態(tài)模式將邏輯封裝在類中,避免Context無(wú)限膨脹
缺點(diǎn):代碼邏輯分散在各個(gè)類中,造成邏輯分散的問(wèn)題

相同點(diǎn):這兩種模式都只有一個(gè)上下文、一些策略類或者是狀態(tài)類,上下文把請(qǐng)求委托給這些類來(lái)執(zhí)行
不同點(diǎn):這兩種模式的目的是不同的;策略模式的策略類之間是相互平行平等的,而狀態(tài)模式的狀態(tài)類把狀態(tài)和行為封裝到一起,把邏輯實(shí)現(xiàn)封裝到類中,狀態(tài)之間的切換也早被規(guī)定完成.