官方：策略模式定義了算法家族，分別封裝起來，讓他們之間可以互相替換，此模式讓算法的變化不會影響到使用算法的客戶。

策略模式是常用的模式，例如jQuery的?$(selector).animate(styles,speed,easing,callback) 其中的easing 封裝了很多的算法（linear，easeIn，easeIn等?），不管算法怎么替換，應用animate動畫的元素，依然有動畫效果。

另外，像是驗證表單的情況。不管怎么改變配置（就是替換算法），依然能夠對表單進行驗證。

栗子：

在理解策略模式之前，我們先來一個例子，一般情況下，如果我們要做數據合法性驗證，很多時候都是按照swith語句來判斷，但是這就帶來幾個問題，首先如果增加需求的話，我們還要再次修改這段代碼以增加邏輯，而且在進行單元測試的時候也會越來越復雜，代碼如下：

validator = {
validate: function (value, type) {
switch (type) {
case 'isNonEmpty ':
{
return true; // NonEmpty 驗證結果
}
case 'isNumber ':
{
return true; // Number 驗證結果
break;
}
case 'isAlphaNum ':
{
return true; // AlphaNum 驗證結果
}
default:
{
return true;
}
}
}
};
// 測試
alert(validator.validate("123", "isNonEmpty"));

那如何來避免上述代碼中的問題呢，根據策略模式，我們可以將相同的工作代碼單獨封裝成不同的類，然后通過統一的策略處理類來處理，OK，我們先來定義策略處理類，代碼如下：

var validator = {
// 所有可以的驗證規則處理類存放的地方，后面會單獨定義
types: {},
// 驗證類型所對應的錯誤消息
messages: [],
// 當然需要使用的驗證類型
config: {},
// 暴露的公開驗證方法
// 傳入的參數是 key => value對
validate: function (data) {
var i, msg, type, checker, result_ok;
// 清空所有的錯誤信息
this.messages = [];
for (i in data) {
if (data.hasOwnProperty(i)) {
type = this.config[i]; // 根據key查詢是否有存在的驗證規則
checker = this.types[type]; // 獲取驗證規則的驗證類
if (!type) {
continue; // 如果驗證規則不存在，則不處理
}
if (!checker) { // 如果驗證規則類不存在，拋出異常
throw {
name: "ValidationError",
message: "No handler to validate type " + type
};
}
result_ok = checker.validate(data[i]); // 使用查到到的單個驗證類進行驗證
if (!result_ok) {
msg = "Invalid value for *" + i + "*, " + checker.instructions;
this.messages.push(msg);
}
}
}
return this.hasErrors();
},
// helper
hasErrors: function () {
return this.messages.length !== 0;
}
};

然后剩下的工作，就是定義types里存放的各種驗證類了，我們這里只舉幾個例子：

// 驗證給定的值是否不為空
validator.types.isNonEmpty = {
validate: function (value) {
return value !== "";
},
instructions: "傳入的值不能為空"
};
// 驗證給定的值是否是數字
validator.types.isNumber = {
validate: function (value) {
return !isNaN(value);
},
instructions: "傳入的值只能是合法的數字，例如：1, 3.14 or 2010"
};
// 驗證給定的值是否只是字母或數字
validator.types.isAlphaNum = {
validate: function (value) {
return !/[^a-z0-9]/i.test(value);
},
instructions: "傳入的值只能保護字母和數字，不能包含特殊字符"
};

使用的時候，我們首先要定義需要驗證的數據集合，然后還需要定義每種數據需要驗證的規則類型，代碼如下：

var data = {
first_name: "Tom",
last_name: "Xu",
age: "unknown",
username: "TomXu"
};
validator.config = {
first_name: 'isNonEmpty',
age: 'isNumber',
username: 'isAlphaNum'
};

最后，獲取驗證結果的代碼就簡單了：

validator.validate(data);
if (validator.hasErrors()) {
console.log(validator.messages.join("\n"));
}

總結

策略模式定義了一系列算法，從概念上來說，所有的這些算法都是做相同的事情（是說有共同的目標，不是說定義實現相同），只是實現不同。策略模式可以以相同的方式調用所有的方法，減少了各種算法類與使用算法類之間的耦合。

從另外一個層面上來說，單獨定義算法類，也方便了單元測試，因為可以通過自己的算法進行單獨測試。

實踐中，不僅可以封裝算法，也可以用來封裝幾乎任何類型的規則，是要在分析過程中需要在不同時間應用不同的業務規則，就可以考慮是要策略模式來處理各種變化。

另外，舉個animate的栗子

<div style="position: relative;border: 1px solid #ff0000; width: 560px;min-height: 30px">
<div style="position:absolute;background:rgba(0,0,255,.3);width: 60px;line-height: 30px;" id="div">我是 div</div>
</div>
<div>
<label><input type="radio" name="tween" value="linear" checked="checked">linear</label>
<label><input type="radio" name="tween" value="easeIn">easeIn</label>
<label><input type="radio" name="tween" value="strongEaseIn">strongEaseIn</label>
<label><input type="radio" name="tween" value="strongEaseOut">strongEaseOut</label>
<label><input type="radio" name="tween" value="sineaseIn">sineaseIn</label>
<label><input type="radio" name="tween" value="sineaseOut">sineaseOut</label><br/>
<input type="button" id="btnRun" value="run">
</div>
<script>
/*
* 緩動算法: 接收4個參數，分別表示： 動畫已用的時間， 小球原始位置， 小球目標位置， 動畫持續的總時間
*/
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;
　　}
};

/*
* Animate 的構造函數接收一個參數：即將運動起來的 dom 節點。
*/
var Animate = function( dom ){
　　this.dom = dom;
　　this.startPos = 0;
　　this.startTime = 0;
　　this.endPos = 0;
　　this.duration = 0;
　　this.easing = null;
　　this.propertyName = "";
};

/*
* 負責啟動運動動畫
*/
Animate.prototype.start = function( propertyName, endPos, duration, easing ){
　　this.startPos = this.dom.getBoundingClientRect()[propertyName]
　　this.startTime = +new Date();
　　this.endPos = endPos;
　　this.duration = duration;
　　this.propertyName = propertyName;
　　this.easing = tween[easing];
　　var timer = setInterval(function(){
　　　　if(this.step() == false) clearInterval(timer)
　　}.bind(this),20)
};

/*
* step 表示節點運動的每一幀要做的事情。 負責計算節點的當前位置和調整更新 CSS 屬性值
*/
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)
};

/*
* 負責更新節點 CSS 屬性值
*/
Animate.prototype.update = function(pos){
　　this.dom.style[this.propertyName] = pos + "px";
};

/*
* 重置為原始為位置
*/
Animate.prototype.reset = function(){
　　this.dom.style[this.propertyName] = this.startPos + "px";
};

/*
* 創建要運動的節點
*/
var div = document.getElementById("div");
var animate = new Animate(div);
var btnRun = document.getElementById("btnRun");
var radios = document.getElementsByName("tween"); // 獲取單選框
btnRun.onclick = function(){
　　for(var i = 0, len = radios.length; i < len; i++){
　　　　if(radios[i].checked){
　　　　　　animate.reset();
　　　　　　animate.start("left",500,1000,radios[i].value)
　　　　　　break
　　　　}
　　}
};

轉載于:https://www.cnblogs.com/FineDay/articles/6640741.html

總結

以上是生活随笔為你收集整理的JS设计模式三：策略模式的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。