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