電子商務(wù)網(wǎng)站網(wǎng)絡(luò)推廣方式,設(shè)置wordpress網(wǎng)頁私有,wordpress 加水印,寧波seo平臺(tái)策略模式定義#xff1a;策略模式定義了一系列的算法#xff0c;并且會(huì)將每一個(gè)算法封裝起來#xff0c;讓它們可以相互的替換。策略模式的組成#xff1a;一個(gè)基于策略模式的程序至少由兩部分組成#xff0c;第一部分是一組策略類#xff0c;策略類封裝了具體的算法策略模式定義了一系列的算法并且會(huì)將每一個(gè)算法封裝起來讓它們可以相互的替換。策略模式的組成一個(gè)基于策略模式的程序至少由兩部分組成第一部分是一組策略類策略類封裝了具體的算法并負(fù)責(zé)具體計(jì)算過程第二個(gè)部分是環(huán)境類Context,Context接受客戶的請求隨后把請求委托給某一個(gè)策略類說明Context中要維護(hù)對某個(gè)策略對象的引用// 策略接口interfaceIStrategy{execute(a:number,b:number):number;}// 定義具體的策略類// 這里定義了四個(gè)具體的策略類分別是加法、減法、乘法和除法classAddStrategyimplementsIStrategy{execute(a:number,b:number):number{returnab;}}classSubStrategyimplementsIStrategy{execute(a:number,b:number):number{returna-b;}}classMulStrategyimplementsIStrategy{execute(a:number,b:number):number{returna*b;}}classDivStrategyimplementsIStrategy{execute(a:number,b:number):number{returna/b;}}// 上下文內(nèi)部維護(hù)了具體的策略的引用// 回頭客戶端調(diào)用的時(shí)候只需要調(diào)用上下文的方法即可classContext{// 維護(hù)具體的策略privatestrategy:IStrategy;constructor(st:IStrategy){this.strategyst;}// 設(shè)置新的策略setStrategy(st:IStrategy){this.strategyst;}//執(zhí)行策略方法executeStrategy(a:number,b:number):number{returnthis.strategy.execute(a,b);}}// 創(chuàng)建一個(gè)上下文對象// 在創(chuàng)建的時(shí)候傳遞一個(gè)默認(rèn)的執(zhí)行策略constcontextnewContext(newAddStrategy());// 執(zhí)行對應(yīng)的策略consta5;constb3;constresultcontext.executeStrategy(a,b);context.setStrategy(newSubStrategy())constresult2context.executeStrategy(a,b);context.setStrategy(newMulStrategy());constresult3context.executeStrategy(a,b);console.log(result);console.log(result2);console.log(result3);再來看一個(gè)表單的例子formidregisterFormaction#請輸入用戶名inputtypetextnameusername/請輸入密碼inputtypetextnamepassword/請輸入手機(jī)號inputtypetextnamephoneNumber/buttonidbutton提交/button/formscriptvarregisterFormdocument.getElementById(registerForm);varbuttondocument.getElementById(button);button.onclickfunction(){if(registerForm.username.value){console.log(用戶名不能為空);returnfalse}if(registerForm.password.value.length6){console.log(密碼長度不能少于6位);returnfalse}if(!/(^1[3|5|8][0-9]{9}$)/.test(registerForm.phoneNumber.value)){console.log(手機(jī)號碼格式不正確);returnfalse}}/script這是一種很常見的做法提交函數(shù)比較龐大缺少彈性違反開放-封閉原則下面用策略模式來重構(gòu)表單校驗(yàn)varstrategies{isNonEmpty:function(value,errorMsg){// 不為空if(value){returnerrorMsg;}},minLength:function(value,length,errorMsg){// 限制最小長度if(value.lengthlength){returnerrorMsg;}},isMobile:function(value,errorMsg){// 手機(jī)號碼格式if(!/(^1[3|5|8][0-9]{9}$)/.test(value)){returnerrorMsg;}}}varvalidataFuncfunction(){varvalidatornewValidator();// 創(chuàng)建一個(gè)validator對象// 添加一些校驗(yàn)規(guī)則validator.add(registerForm.username,isNonEmpty,用戶名不能為空);validator.add(registerForm.password,minLength:6,密碼長度不能少于6位);validator.add(registerForm.phoneNumber,isMobile,手機(jī)號碼格式不正確);varerrorMsgvalidator.start();// 獲得校驗(yàn)結(jié)果returnerrorMsg;// 返回校驗(yàn)結(jié)果}varregisterFormdocument.getElementById(registerForm);varbuttondocument.getElementById(button);button.onclickfunction(e){e.preventDefault();varerrorMsgvalidataFunc();// 如果有返回值說明未通過校驗(yàn)if(errorMsg){console.log(errorMsg);returnfalse;}}varValidatorfunction(){this.cache[];// 保存校驗(yàn)規(guī)則}Validator.prototype.addfunction(dom,rule,erroeMsg){varargrule.split(:);// 把strategy和參數(shù)分開this.cache.push(function(){// 把校驗(yàn)的步驟用空函數(shù)包裝起來并且放入cachevarstrategyarg.shift();// 用戶挑選的strategyarg.unshift(dom.value);arg.push(erroeMsg);returnstrategies[strategy].apply(dom,arg);})}Validator.prototype.startfunction(){for(leti0,validataFunc;validataFuncthis.cache[i];){varmsgvalidataFunc();// 開始校驗(yàn)并取得校驗(yàn)后返回信息if(msg){// 有返回值說明校驗(yàn)沒有通過returnmsg;}}}非原創(chuàng)來源渡一謝杰老師和javascript設(shè)計(jì)模式與開發(fā)實(shí)踐 -曾探 簡單記錄周五啦周末愉快