JavaScript設(shè)計(jì)模式之策略模式實(shí)例
策略模式的意義是定義一系列的算法，把它們一個(gè)個(gè)封裝起來，并且使它們可相互替換。
一個(gè)小例子就能讓我們一目了然。
回憶下jquery里的animate方法.
$( div ).animate( {“l(fā)eft: 200px”}, 1000, ‘linear' ); //勻速運(yùn)動(dòng)
$( div ).animate( {“l(fā)eft: 200px”}, 1000, ‘cubic' ); //三次方的緩動(dòng)
這2句代碼都是讓div在1000ms內(nèi)往右移動(dòng)200個(gè)像素. linear(勻速)和cubic(三次方緩動(dòng))就是一種策略模式的封裝.
再來一個(gè)例子. 上半年我寫的dev.qplus.com, 很多頁面都會(huì)有個(gè)即時(shí)驗(yàn)證的表單. 表單的每個(gè)成員都會(huì)有一些不同的驗(yàn)證規(guī)則.
比如姓名框里面， 需要驗(yàn)證非空，敏感詞，字符過長(zhǎng)這幾種情況。 當(dāng)然是可以寫3個(gè)if else來解決，不過這樣寫代碼的擴(kuò)展性和維護(hù)性可想而知。如果表單里面的元素多一點(diǎn)，需要校驗(yàn)的情況多一點(diǎn)，加起來寫上百個(gè)if else也不是沒有可能。
所以更好的做法是把每種驗(yàn)證規(guī)則都用策略模式單獨(dú)的封裝起來。需要哪種驗(yàn)證的時(shí)候只需要提供這個(gè)策略的名字。就像這樣：
nameInput.addValidata({
notNull: true,
dirtyWords: true,
maxLength: 30
})
而notNull，maxLength等方法只需要統(tǒng)一的返回true或者false，來表示是否通過了驗(yàn)證。
notNull: function( value ){
return value !== ”;
},
maxLength: function( value, maxLen ){
return value.length() > maxLen;
}
}
可以看到，各種驗(yàn)證規(guī)則很容易被修改和相互替換。如果某天產(chǎn)品經(jīng)理建議字符過長(zhǎng)的限制改成60個(gè)字符。那只需要0.5秒完成這次工作。
- js單例模式的兩種方案
- JS實(shí)現(xiàn)單例模式的6種方案匯總
- javascript 單例模式演示代碼 javascript面向?qū)ο缶幊?/a>
- JavaScript的單例模式 （singleton in Javascript)
- 輕松掌握J(rèn)avaScript單例模式
- [js高手之路]單例模式實(shí)現(xiàn)模態(tài)框的示例
- JavaScript設(shè)計(jì)模式之策略模式詳解
- javascript設(shè)計(jì)模式--策略模式之輸入驗(yàn)證
- 學(xué)習(xí)JavaScript設(shè)計(jì)模式之策略模式
- 學(xué)習(xí)JavaScript設(shè)計(jì)模式(策略模式)
- javascript單例模式與策略模式實(shí)例詳解
相關(guān)文章
input 標(biāo)簽實(shí)現(xiàn)輸入框帶提示文字效果(兩種方法)
這篇文章主要介紹了input 標(biāo)簽實(shí)現(xiàn)輸入框帶提示文字效果(兩種方法),需要的朋友可以參考下2017-10-10
JavaScript 函數(shù)調(diào)用規(guī)則
2009-09-09
從數(shù)據(jù)庫讀取數(shù)據(jù)后將其輸出成html標(biāo)簽的三種方法
需要輸出成html標(biāo)簽時(shí)編譯器卻自動(dòng)幫我們輸出成字符串，這該怎么辦？下面有個(gè)三個(gè)解決方法，一一測(cè)試便知其效果是如何2014-10-10
Js遍歷鍵值對(duì)形式對(duì)象或Map形式的方法
下面小編就為大家?guī)硪黄狫s遍歷鍵值對(duì)形式對(duì)象或Map形式的方法。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-08-08
這篇文章主要介紹了2014 年最熱門的JavaScript框架推薦,需要的朋友可以參考下2014-12-12
如何用js獲取當(dāng)年周數(shù)列表以及當(dāng)前日期是第幾周
這篇文章主要介紹了如何獲取當(dāng)前年份的周數(shù)列表,并計(jì)算當(dāng)前日期是第幾周,代碼基于ISO8601標(biāo)準(zhǔn),計(jì)算每年的第一周從第一個(gè)星期四開始,需要的朋友可以參考下2024-11-11
淺談JavaScript中面向?qū)ο蟮牡纳羁截惡蜏\拷貝
下面小編就為大家?guī)硪黄獪\談JavaScript中面向?qū)ο蟮牡纳羁截惡蜏\拷貝。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-08-08
JavaScript正則表達(dá)式exec/g實(shí)現(xiàn)多次循環(huán)用法示例
這篇文章主要介紹了JavaScript正則表達(dá)式exec/g實(shí)現(xiàn)多次循環(huán)用法,結(jié)合實(shí)例形式分析了javascript正則表達(dá)式g修飾符相關(guān)使用技巧,需要的朋友可以參考下2017-01-01
TypeScript 提供了路徑別名的功能,方便開發(fā)者在大型項(xiàng)目中更高效地引用模塊,減少相對(duì)路徑的冗長(zhǎng)與復(fù)雜,本文將詳細(xì)介紹如何配置路徑別名,如何結(jié)合 Vite 和 Node 環(huán)境進(jìn)行別名設(shè)置,幫助開發(fā)者在項(xiàng)目開發(fā)中更為便捷地組織代碼,需要的朋友可以參考下2025-03-03
微信小程序開發(fā)搜索功能實(shí)現(xiàn)(前端+后端+數(shù)據(jù)庫)
這篇文章主要介紹了微信小程序開發(fā)搜索功能實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-03-03