設計模式策略模式

策略模式的定義是：定義一系列的演算法，把它們乙個個封裝起來，並且使它們可以相互替換，策略模式的目的就是將演算法的使用與演算法的實現分離開來。

首先我們來看乙個情景：很多公司的年終獎是根據員工的績效來進行發放，績效為s的人，年終獎有4倍工資，績效為a的人有3倍工資，績效為b的人有2倍工資。我們怎麼用**來實現這個問題呢？

很簡單粗暴的會想到：

var calculatebonus = function
(performaccelevel, salary) 
if (performaccelevel === "a") 
if (performaccelevel === "b") 
};

這段的**存在什麼問題呢？

過多的if-else，函式缺乏彈性，如果我們現在又增加一種績效c，那麼我們該怎麼辦，我們只有手動去改我們的**，這也就違反了我們所說的開閉原則。

下面我們利用策略模式來對這段**進行重構：

乙個基於策略模式的程式至少由兩部分組成。第乙個部分是一組策略類，策略類封裝了具體的演算法，並負責具體的計算過程。第二個是環境類context，context接受客戶的請求後，隨後把請求委託給某乙個策略類。再說明白點就是，context把客戶發起的請求，委託給了乙個策略類new出來的乙個策略物件。

// 定義三種策略類
var performances = function
() {};
performances.prototype.calculate = function
(salary) ;
var performancea = function
() {};
performancea.prototype.calculate = function
(salary) ;
var performanceb = function
() {};
performanceb.prototype.calculate = function
(salary) ;
// 環境類
var bonus = function
() ;
bonus.prototype.setsalary = function
(salary) ;
bonus.prototype.setstrategy = function
(stratrgy) ;
bonus.prototype.getbonus = function
() ;
var bonus = new bonus();
bonus.setsalary(20000); 
bonus.setstrategy(new performances());
console.log(bonus.getbonus()); // 80000
bonus.setstrategy(new performancea());
console.log(bonus.getbonus()); // 60000

這種方式是仿造傳統物件導向語言實現的，利用js的特性，函式就是物件，所以我們可以將策略類定義為乙個物件，performances,performancea,performanceb設定為該物件的方法，就有如下**：

var strategies = ,
a: function
(salary) ,
b: function
(salary) 
};var calculatebonus = function
(level, salary) ;
console.log(calculatebonus("s", 20000)); // 80000
console.log(calculatebonus("b", 20000)); // 40000

下面來看策略模式的兩個具體應用：

編寫乙個動畫運動，其中tween為策略類物件，其中的每一種方法，代表其每一種策略

// 策略類
var tween = ,
easein: function
(usetime, originpos, targetpos, alltime) ,
strongeasein: function
(usetime, originpos, targetpos, alltime) ,
strongeaseout: function
(usetime, originpos, targetpos, alltime) ,
sineasein: function
(usetime, originpos, targetpos, alltime) ,
};// 運動類，easing可以採取不同的策略
var animate = function
(dom) ;
animate.prototype.start = function
(propertyname, targetpos, duration, easing) 
}, 20);
};animate.prototype.step = function
() pos = this.easing(time - this.starttime, this.startpos, this.endpos - this.startpos, this.duration);
this.update(pos);
};animate.prototype.update = function
(pos) ;
// 測試**
var div = document.getelementbyid("div"),
animate = new animate(div);
animate.start("left", 500, 1000, "easein");
// html**
"div" style="position: absolute;height:100px;width:100px;background:red;">div>

設計模式 策略模式

設計模式 策略設計模式

設計模式 策略模式

設計模式 策略模式

相關推薦

設計模式策略模式

設計模式策略設計模式

設計模式策略模式

設計模式策略模式