策略模式及在表單驗證中的應用

izhuhaodev 發布于2019-08-26 10:24 / 1328人閱讀

摘要：策略模式根據不同參數可以命中不同的策略在函數是一等公民的中策略模式的使用常常隱藏在高階函數中稍微變換下上述的形式如下可以發現我們平時已經在使用它了恭喜我們又掌握了一種設計模式。

策略模式

根據不同參數可以命中不同的策略

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

在函數是一等公民的 JS 中, 策略模式的使用常常隱藏在高階函數中, 稍微變換下上述 demo 的形式如下, 可以發現我們平時已經在使用它了, 恭喜我們又掌握了一種設計模式。

  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項目中，注冊，登錄，修改用戶信息，下訂單等功能的實現都離不開提交表單.
假設我們正在編寫一個注冊的頁面，在點擊注冊按鈕之前，有如下幾條校驗邏輯。

所有選項不能為空

用戶名長度不能少于6位

密碼長度不能少于6位

手機號碼必須符合格式

郵箱地址必須符合格式
HTML代碼：

一般情況下的JavaScript代碼：

策略模式

使用

// 獲取表單form元素
var form = document.getElementById("f1");

// 創建表單校驗實例
var validation = new Formvalidation(VerifiPolicy);
// 編寫校驗配置
validation.add(form.username, "isNoEmpty", "用戶名不能為空");
validation.add(form.password, "minLength: 6", "密碼長度不能小于6個字符");
validation.add(form.code, "isMobile", "請填寫正確的手機號");

// 開始校驗，并接收錯誤信息
var errorMsg = validation.start();

// 如果有錯誤信息輸出，說明校驗未通過
if(errorMsg){
    // 做一些其他的事
    return false;
}

編寫環境類

// 構造函數
var Formvalidation = function(VerifiPolicy){
    // 保存策略對象
    this.strategies = VerifiPolicy;
    // 驗證緩存
    this.validationFns = [];
}

// add 方法  add方法第一個參數，是要驗證的表單元素，第二個參數是一個字符串，使用 冒號(:) //分割，前面是策略方法名稱，后面是傳給這個方法的參數，第三個參數仍然是錯誤信息，
Formvalidation.prototype.add = function(dom, rule, errorMsg){

    var ary = rule.split(":");
    var arg = [];
    var self = this;
    this.validationFns.push(function(){
        arg = [];    // 重置參數
        var ruleName = ary[0];    // 策略對象方法名

        // 組裝參數
        arg.push(dom.value);
        if(ary[1]){
            arg.push(ary[1]);
        }
        arg.push(errorMsg);

        // 調用策略函數
        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;
        }
    }
    // 其他
}

云服務器 GPU云服務器策略模式策略者模式應用安全策略 form表單中的action

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/106115.html

探索兩種優雅的表單驗證——策略設計模式和ES6的Proxy代理模式

原文收錄在我的 GitHub博客 (https://github.com/jawil/blog) ，喜歡的可以關注最新動態，大家一起多交流學習，共同進步，以學習者的身份寫博客，記錄點滴。在一個Web項目中，注冊，登錄，修改用戶信息，下訂單等功能的實現都離不開提交表單。這篇文章就闡述了如何編寫相對看著舒服的表單驗證代碼。假設我們正在編寫一個注冊的頁面，在點擊注冊按鈕之前，有如下幾條校驗邏輯。 ...

Bamboy 2019-08-20 16:32 評論0 收藏0
探索兩種優雅的表單驗證——策略設計模式和ES6的Proxy代理模式

原文收錄在我的 GitHub博客 (https://github.com/jawil/blog) ，喜歡的可以關注最新動態，大家一起多交流學習，共同進步，以學習者的身份寫博客，記錄點滴。在一個Web項目中，注冊，登錄，修改用戶信息，下訂單等功能的實現都離不開提交表單。這篇文章就闡述了如何編寫相對看著舒服的表單驗證代碼。假設我們正在編寫一個注冊的頁面，在點擊注冊按鈕之前，有如下幾條校驗邏輯。 ...

light 2019-08-01 16:50 評論0 收藏0
JavaScript 設計模式系列 - 策略模式與動態表單驗證

摘要：策略模式又稱政策模式，其定義一系列的算法，把它們一個個封裝起來，并且使它們可以互相替換。的表單具有表單驗證功能，用來校驗用戶輸入的表單內容。實際需求中表單驗證項一般會比較復雜，所以需要給每個表單項增加自定義校驗方法。 showImg(https://segmentfault.com/img/remote/1460000020135990); 策略模式（Strategy Pattern...

宋華 2019-08-26 14:06 評論0 收藏0
JS策略模式《JavaScript設計模式與開發實踐》閱讀筆記

摘要：策略模式可以避免代碼中的多重判斷條件。策略模式在程序中或多或少的增加了策略類。此文僅記錄本人閱讀設計模式與開發實踐這個本時的感受，感謝作者曾探寫出這么好的一本書。設計模式中很重要的一點就是將不變和變分離出來。參考設計模式與開發實踐曾探策略模式的定義是：定義一系列的算法，把它們一個個封裝起來，并且是它們可以相互替換。策略模式可以避免代碼中的多重判斷條件。策略模式很好的體現了開放-...

Amos 2019-08-22 17:57 評論0 收藏0