資訊專欄INFORMATION COLUMN
摘要：策略模式根據(jù)不同參數(shù)可以命中不同的策略在函數(shù)是一等公民的中策略模式的使用常常隱藏在高階函數(shù)中稍微變換下上述的形式如下可以發(fā)現(xiàn)我們平時(shí)已經(jīng)在使用它了恭喜我們又掌握了一種設(shè)計(jì)模式。
策略模式
根據(jù)不同參數(shù)可以命中不同的策略
const strategy = {
"S": function(salary) {
return salary * 4
},
"A": function(salary) {
return salary * 3
},
"B": function(salary) {
return salary * 2
}
}
const calculateBonus = function(level, salary) {
return strategy[level](salary)
}
calculateBonus("A", 10000) // 30000
在函數(shù)是一等公民的 JS 中, 策略模式的使用常常隱藏在高階函數(shù)中, 稍微變換下上述 demo 的形式如下, 可以發(fā)現(xiàn)我們平時(shí)已經(jīng)在使用它了, 恭喜我們又掌握了一種設(shè)計(jì)模式。
return salary * 4
}
const A = function(salary) {
return salary * 3
}
const B = function(salary) {
return salary * 2
}
const calculateBonus = function(func, salary) {
return func(salary)
}
calculateBonus(A, 10000) // 30000
在一個(gè)Web項(xiàng)目中，注冊(cè)，登錄，修改用戶信息，下訂單等功能的實(shí)現(xiàn)都離不開提交表單.
假設(shè)我們正在編寫一個(gè)注冊(cè)的頁面，在點(diǎn)擊注冊(cè)按鈕之前，有如下幾條校驗(yàn)邏輯。
所有選項(xiàng)不能為空
用戶名長(zhǎng)度不能少于6位
密碼長(zhǎng)度不能少于6位
手機(jī)號(hào)碼必須符合格式
郵箱地址必須符合格式
HTML代碼：
一般情況下的JavaScript代碼：
策略模式使用
// 獲取表單form元素
var form = document.getElementById("f1");
// 創(chuàng)建表單校驗(yàn)實(shí)例
var validation = new Formvalidation(VerifiPolicy);
// 編寫校驗(yàn)配置
validation.add(form.username, "isNoEmpty", "用戶名不能為空");
validation.add(form.password, "minLength: 6", "密碼長(zhǎng)度不能小于6個(gè)字符");
validation.add(form.code, "isMobile", "請(qǐng)?zhí)顚懻_的手機(jī)號(hào)");
// 開始校驗(yàn)，并接收錯(cuò)誤信息
var errorMsg = validation.start();
// 如果有錯(cuò)誤信息輸出，說明校驗(yàn)未通過
if(errorMsg){
// 做一些其他的事
return false;
}
編寫環(huán)境類
// 構(gòu)造函數(shù)
var Formvalidation = function(VerifiPolicy){
// 保存策略對(duì)象
this.strategies = VerifiPolicy;
// 驗(yàn)證緩存
this.validationFns = [];
}
// add 方法 add方法第一個(gè)參數(shù)，是要驗(yàn)證的表單元素，第二個(gè)參數(shù)是一個(gè)字符串，使用 冒號(hào)(:) //分割，前面是策略方法名稱，后面是傳給這個(gè)方法的參數(shù)，第三個(gè)參數(shù)仍然是錯(cuò)誤信息，
Formvalidation.prototype.add = function(dom, rule, errorMsg){
var ary = rule.split(":");
var arg = [];
var self = this;
this.validationFns.push(function(){
arg = []; // 重置參數(shù)
var ruleName = ary[0]; // 策略對(duì)象方法名
// 組裝參數(shù)
arg.push(dom.value);
if(ary[1]){
arg.push(ary[1]);
}
arg.push(errorMsg);
// 調(diào)用策略函數(shù)
return self.strategies[ruleName].apply(dom, arg);
});
}
// 開始驗(yàn)證
Formvalidation.prototype.start = function(){
for(var i = 0; ; i++){
var msg = this.validationFns[i]();
if(msg){
return msg;
}
}
}
編寫策略類
// 策略對(duì)象
var VerifiPolicy = {
// 判斷是否為空
isNoEmpty : function(value, errorMsg){
if(value == ""){
return errorMsg;
}
},
// 判斷最小長(zhǎng)度
minLength : function(value, length, errorMsg){
if(value.length < length){
return errorMsg;
}
},
// 判斷是否為手機(jī)號(hào)
isMobile : function(value, errorMsg){
if(!/(^1[3|5|8][0-9]{9}$)/.test(value)){
return errorMsg;
}
}
// 其他
}
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/106115.html
原文收錄在我的 GitHub博客 (https://github.com/jawil/blog) ，喜歡的可以關(guān)注最新動(dòng)態(tài)，大家一起多交流學(xué)習(xí)，共同進(jìn)步，以學(xué)習(xí)者的身份寫博客，記錄點(diǎn)滴。 在一個(gè)Web項(xiàng)目中，注冊(cè)，登錄，修改用戶信息，下訂單等功能的實(shí)現(xiàn)都離不開提交表單。這篇文章就闡述了如何編寫相對(duì)看著舒服的表單驗(yàn)證代碼。 假設(shè)我們正在編寫一個(gè)注冊(cè)的頁面，在點(diǎn)擊注冊(cè)按鈕之前，有如下幾條校驗(yàn)邏輯。 ...
原文收錄在我的 GitHub博客 (https://github.com/jawil/blog) ，喜歡的可以關(guān)注最新動(dòng)態(tài)，大家一起多交流學(xué)習(xí)，共同進(jìn)步，以學(xué)習(xí)者的身份寫博客，記錄點(diǎn)滴。 在一個(gè)Web項(xiàng)目中，注冊(cè)，登錄，修改用戶信息，下訂單等功能的實(shí)現(xiàn)都離不開提交表單。這篇文章就闡述了如何編寫相對(duì)看著舒服的表單驗(yàn)證代碼。 假設(shè)我們正在編寫一個(gè)注冊(cè)的頁面，在點(diǎn)擊注冊(cè)按鈕之前，有如下幾條校驗(yàn)邏輯。 ...
摘要：策略模式又稱政策模式，其定義一系列的算法，把它們一個(gè)個(gè)封裝起來，并且使它們可以互相替換。的表單具有表單驗(yàn)證功能，用來校驗(yàn)用戶輸入的表單內(nèi)容。實(shí)際需求中表單驗(yàn)證項(xiàng)一般會(huì)比較復(fù)雜，所以需要給每個(gè)表單項(xiàng)增加自定義校驗(yàn)方法。 showImg(https://segmentfault.com/img/remote/1460000020135990); 策略模式 （Strategy Pattern...
摘要：策略模式可以避免代碼中的多重判斷條件。策略模式在程序中或多或少的增加了策略類。此文僅記錄本人閱讀設(shè)計(jì)模式與開發(fā)實(shí)踐這個(gè)本時(shí)的感受，感謝作者曾探寫出這么好的一本書。設(shè)計(jì)模式中很重要的一點(diǎn)就是將不變和變分離出來。參考設(shè)計(jì)模式與開發(fā)實(shí)踐曾探 策略模式的定義是：定義一系列的算法，把它們一個(gè)個(gè)封裝起來，并且是它們可以相互替換。 策略模式可以避免代碼中的多重判斷條件。 策略模式很好的體現(xiàn)了開放-...
閱讀 3361·2021-11-25 09:43
閱讀 3152·2021-10-11 10:58
閱讀 2757·2021-09-27 13:59
閱讀 3088·2021-09-24 09:55
閱讀 2179·2019-08-30 15:52
閱讀 1839·2019-08-30 14:03
閱讀 2267·2019-08-30 11:11
閱讀 2033·2019-08-28 18:12
