首頁 > web前端 > js教程 > 詳解JavaScript設計模式經典之策略模式

詳解JavaScript設計模式經典之策略模式

黄舟
發布: 2017-03-20 11:04:38
原創
1333 人瀏覽過

策略模式的意義是定義一系列的演算法,把它們一個個封裝起來,並且使它們可相互替換。
一個小例子就能讓我們一目了然。

回想下jquery裡的animate方法.

$( p ).animate( {“left: 200px”}, 1000, ‘linear’ );  //匀速运动
$( p ).animate( {“left: 200px”}, 1000, ‘cubic’ );  //三次方的缓动
登入後複製

這2句程式碼都是讓p在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設計模式經典之策略模式的詳細內容。更多資訊請關注PHP中文網其他相關文章!

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板