設計模式-策略模式

Youngs 發布于2019-08-20 15:07 / 2082人閱讀

摘要：關注了一個微信公眾號從零開始學里面以詼諧幽默的方式說了一些設計模式總結一下新手和老手的區別一定不是他懂多少種語言看過多少本書而是思路的清晰度和良好的編程習慣寫代碼切忌的一點就是簡單重復的勞動代碼要反復修改提高其執行效率的設計模式相比強類型語

關注了一個微信公眾號: 從零開始學React,里面以詼諧幽默的方式說了一些設計模式,總結一下

新手和老手的區別,一定不是他懂多少種語言,看過多少本書,而是思路的清晰度和良好的編程習慣.寫代碼切忌的一點就是簡單重復的勞動.代碼要反復修改,提高其執行效率.JS的設計模式,相比強類型語言來說是有不少簡化的,這是語言自身的性質造成,不能生搬硬套強類型語言的設計模式,實際上也用不來.策略模式,實際上你已經在使用了,jquery的表單驗證插件,react的表單驗證插件,用的都是這種思路.這種思路有啥好處?為啥比寫if else語句要先進?

假設我們要實現一個注冊的頁面,在提交注冊按鈕之前,我們要做如下幾條校驗邏輯.
1.用戶名不能為空
2.密碼長度不能少于6位
3.手機號碼符合常規格式

頁面




  
  字段驗證


  
    請輸入用戶名: 
    請輸入密碼: 
    請輸入手機號:

大白童鞋一看,這不簡單,幾分鐘后,敲了以下代碼

var registerForm = document.getElementById("registerForm");
registerForm.onsubmit = function() {
  if(registerForm.userName.value === "") {
    alert("用戶名不能為空");
    return false;
  }
  if(registerForm.password.value.length < 6) {
    alert("密碼長度不能少于6位");
    return false;
  }
  if(!/^1[3|5|8][0-9]{9}$/.test(registerForm.phoneNum.value)) {
    alert("手機號碼格式不正確");
    return false;  
  }
}

首先這份作業是沒問題的,代碼可以使用.幾天后,同事小白也要做一個表單驗證的工作,就借來大白的代碼,但是他卻不開心,因為大白的代碼不僅要重新拷貝一份而且復用性很差,要把input定義成同樣的名字才能用,還有,如果要改一個驗證規則,比如把密碼的長度從6位改成8位,還要深入他的代碼內部邏輯去修改,有這時間都夠重寫一個差不多的了.

大白聽到小白的抱怨后,把它該成了一個函數

function check(userName, password, phoneNum) {
  if(userName == "") {
    alert("用戶名不能為空");
    return false;
  }
  if(password.length < 6) {
    alert("密碼長度不能少于6位");
    return false;
  }
  if(!/^1[3|5|8][0-9]{9}$/.test(phoneNum)) {
    alert("手機號碼格式不對");
    return false;
  }
  return true;
}

var registerForm = document.getElementById("registerForm");
var userName, password, phoneNum;
registerForm.onsubmit = function() {
  userName = registerForm.userName.value;
  password = registerForm.password.value;
  phoneNum = registerForm.phoneNum.value;
  if(!check(userName, password, phoneNum)) {
    return false;
  }
}

如果后面的需求有變動,小白的表單需要驗證的不止這幾項,又或者在驗證手機號上,大白和小白的驗證條件不同,此時,又需要改動這個函數,漸漸地,這個函數越來越膨脹,一大堆的if else判斷.

新思路:
我們分析大白的代碼可以得知,驗證這塊邏輯,需要多帶帶抽離出來維護.比如長度判斷,正則判斷等等.每條驗證規則可以稱為一種驗證策略,對于每一個特定的表單,我們可以選取它需要的驗證策略,靈活配置.

var strategies = {
  isNonEmpty: function(error, 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;
    }
  }
}

大家回想jquery和bootstrap的驗證插件,應該是先初始化一個Validator對象,然后調用某個函數,把每個字段綁定上相應的驗證策略即可.然后再去觸發驗證過程.因此,該對象應該有兩個函數,add()和start(),分別用于為字段綁定策略和觸發驗證.

function Validator() {
  this.cache = [];
}

Validator.prototype.add = function(dom, rule, errorMsg) {
  var arr = rule.split(":");
  this.cache.push(function() {
    var strategy = arr.shift();
    arr.unshift(dom.value);
    arr.push(errorMsg);
    return strategies[strategy].apply(dom, arr);
  })
}

Validator.prototype.start = function() {
  for(var i=0; i < cache.length; i++) {
    var msg = this.cache[i]();
    if(msg) {
      return msg;
    }
  }
}


var todoFunc = function() {
var validator = new Validator();
  validator.add(registerForm.userName, "isNonEmpty", "用戶名不能為空");
  validator.add(registerForm.password, "minLength:6", "密碼長度不能少于6位");
  validator.add(registerForm.phoneNum, "isMobile", "手機號碼格式不正確");
  var errorMsg = validator.start();
  return errorMsg;
}

var registerForm = document.getElementById("registerForm");
registerForm.onsubmit = function() {
  var errorMsg = todoFunc();
  if(errorMsg) {
    alert(errorMsg);
    return false;
  }
}

云服務器 GPU云服務器策略模式策略者模式代碼設計模式工廠模式設計模式觀察者模式

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

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

Java設計模式-策略模式

摘要：可以使用其他模式來修正這個缺陷，如工廠方法模式代理模式或享元模式。我們的策略模式只是實現了策略的管理，但是沒有嚴格地定義適當的場景使用適當的策略，在實際項目中，一般通過工廠方法模式來實現策略類的聲明。源碼地址參考文獻設計模式之禪定義 Define a family of algorithms,encapsulate each one,and make them interchange...

dabai 2019-08-16 18:26 評論0 收藏0
設計模式之策略模式

摘要：一定義定義維基百科策略模式作爲一種軟件設計模式，指對象有某個行爲，但是在不同的場景中，該行爲有不同的實現算法。二策略模式圖我們看看策略模式是有怎樣設計結構的。如中創建線程池，線程池任務滿時，對提交的任務做處理就使用了策略模式。以前完整的看過《大話設計模式》，雖然完整看過，也做過筆記，但現在依然很多已經很模糊。這段時間趁著離職，有時間，打算重新過一遍，該篇將介紹策略模式。一、定義定義（維基百科...

番茄西紅柿 2019-05-23 16:08 評論0 收藏0
設計模式之策略模式

摘要：一定義定義維基百科策略模式作爲一種軟件設計模式，指對象有某個行爲，但是在不同的場景中，該行爲有不同的實現算法。二策略模式圖我們看看策略模式是有怎樣設計結構的。如中創建線程池，線程池任務滿時，對提交的任務做處理就使用了策略模式。以前完整的看過《大話設計模式》，雖然完整看過，也做過筆記，但現在依然很多已經很模糊。這段時間趁著離職，有時間，打算重新過一遍，該篇將介紹策略模式。一、定義定義（維基百科...

番茄西紅柿 2019-05-23 16:08 評論0 收藏0
設計模式之策略模式

摘要：一定義定義維基百科策略模式作爲一種軟件設計模式，指對象有某個行爲，但是在不同的場景中，該行爲有不同的實現算法。二策略模式圖我們看看策略模式是有怎樣設計結構的。如中創建線程池，線程池任務滿時，對提交的任務做處理就使用了策略模式。以前完整的看過《大話設計模式》，雖然完整看過，也做過筆記，但現在依然很多已經很模糊。這段時間趁著離職，有時間，打算重新過一遍，該篇將介紹策略模式。一、定義定義（維基百科...

MangoGoing 2019-05-22 18:00 評論0 收藏0
我的Java設計模式-策略模式

摘要：孫臏心里一萬個草泥馬在奔騰，差點沒噎死自己滾一邊去，我們這盤跟他賽馬開始，策略模式上場。在設計模式之禪中的提出通過策略枚舉和反射機制對策略模式進行改良，膜拜了但是要添加或淘汰策略，還是得去對枚舉進行修改，也不符合開閉原則。今天給大家說說田忌賽馬的故事。如有雷同，純屬巧合！話說在戰國時期，群雄割據，硝煙四起，茶余飯后還是少不了娛樂活動的，其中賽馬是最火爆的。一天，孫臏看到田忌像個死雞似...

zilu 2019-08-15 12:25 評論0 收藏0