JavaScript設計模式經典之策略模式
策略模式的意義是定義一系列的演算法,把它們一個個封裝起來,並且使它們可相互替換。
一個小例子就能讓我們一目瞭然。
回憶下jquery裡的animate方法.
$( div ).animate( {“left: 200px”}, 1000, ‘linear’ ); //勻速運動
$( div ).animate( {“left: 200px”}, 1000, ‘cubic’ ); //三次方的緩動
這2句程式碼都是讓div在1000ms內往右移動200個畫素. linear(勻速)和cubic(三次方緩動)就是一種策略模式的封裝.
再來一個例子. 上半年我寫的dev.qplus.com, 很多頁面都會有個即時驗證的表單. 表單的每個成員都會有一些不同的驗證規則.
比如姓名框裡面, 需要驗證非空,敏感詞,字元過長這幾種情況。 當然是可以寫3個if else來解決,不過這樣寫程式碼的擴充套件性和維護性可想而知。如果表單裡面的元素多一點,需要校驗的情況多一點,加起來寫上百個if else也不是沒有可能。
所以更好的做法是把每種驗證規則都用策略模式單獨的封裝起來。需要哪種驗證的時候只需要提供這個策略的名字。就像這樣:
nameInput.addValidata({
notNull: true,
dirtyWords: true,
maxLength: 30
})
而notNull,maxLength等方法只需要統一的返回true或者false,來表示是否通過了驗證。
validataList = {
notNull: function( value ){
return value !== ”;
},
maxLength: function( value, maxLen ){
return value.length() > maxLen;
}
}
可以看到,各種驗證規則很容易被修改和相互替換。如果某天產品經理建議字元過長的限制改成60個字元。那隻需要0.5秒完成這次工作。
相關文章
- JavaScript設計模式經典之代理模式JavaScript設計模式
- JavaScript設計模式經典之觀察者模式JavaScript設計模式
- JavaScript設計模式經典之單例模式JavaScript設計模式單例
- JavaScript設計模式經典之介面卡模式JavaScript設計模式
- JavaScript 設計模式之策略模式JavaScript設計模式
- Javascript設計模式之策略模式JavaScript設計模式
- JavaScript設計模式經典之簡單工廠模式JavaScript設計模式
- JavaScript設計模式經典之外觀模式JavaScript設計模式
- javascript設計模式 之 2 策略模式JavaScript設計模式
- 【經典案例】Python詳解設計模式:策略模式Python設計模式
- Javascript設計模式(四)策略模式JavaScript設計模式
- JavaScript設計模式之策略模式【組合委託】JavaScript設計模式
- 【技巧篇】JavaScript設計模式之策略模式應用JavaScript設計模式
- 設計模式之策略模式設計模式
- 設計模式之【策略模式】設計模式
- 【設計模式之策略模式】設計模式
- javascript 策略設計模式JavaScript設計模式
- 細品 javascript 設計模式(策略模式)JavaScript設計模式
- PHP 設計模式之策略模式PHP設計模式
- JAVA設計模式之策略模式Java設計模式
- 略懂設計模式之策略模式設計模式
- 設計模式系列之「策略模式」設計模式
- python設計模式之策略模式Python設計模式
- 設計模式漫談之策略模式設計模式
- Java設計模式之策略模式示例Java設計模式
- Java設計模式之(十四)——策略模式Java設計模式
- Java設計模式之策略模式(Strategy)Java設計模式
- 23種設計模式之策略模式設計模式
- 我學設計模式 之 策略模式設計模式
- Javascript設計模式之代理模式JavaScript設計模式
- Javascript設計模式之命令模式JavaScript設計模式
- Java設計模式之策略模式詳解Java設計模式
- JavaScript設計模式之建立型設計模式JavaScript設計模式
- 1/24 設計模式之策略設計模式 Strategy Pattern設計模式
- 設計模式——策略模式設計模式
- 設計模式(策略模式)設計模式
- 設計模式-策略模式設計模式
- 設計模式🔫---策略模式設計模式