成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

設(shè)計(jì)模式-策略模式

Youngs / 2092人閱讀

摘要：關(guān)注了一個(gè)微信公眾號(hào)從零開始學(xué)里面以詼諧幽默的方式說了一些設(shè)計(jì)模式總結(jié)一下新手和老手的區(qū)別一定不是他懂多少種語言看過多少本書而是思路的清晰度和良好的編程習(xí)慣寫代碼切忌的一點(diǎn)就是簡單重復(fù)的勞動(dòng)代碼要反復(fù)修改提高其執(zhí)行效率的設(shè)計(jì)模式相比強(qiáng)類型語

關(guān)注了一個(gè)微信公眾號(hào): 從零開始學(xué)React,里面以詼諧幽默的方式說了一些設(shè)計(jì)模式,總結(jié)一下

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

假設(shè)我們要實(shí)現(xiàn)一個(gè)注冊的頁面,在提交注冊按鈕之前,我們要做如下幾條校驗(yàn)邏輯.
1.用戶名不能為空
2.密碼長度不能少于6位
3.手機(jī)號(hào)碼符合常規(guī)格式

頁面




  
  字段驗(yàn)證


  

    請(qǐng)輸入用戶名: 
    請(qǐng)輸入密碼: 
    請(qǐng)輸入手機(jī)號(hào):

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

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("手機(jī)號(hào)碼格式不正確");
    return false;  
  }
}

首先這份作業(yè)是沒問題的,代碼可以使用.幾天后,同事小白也要做一個(gè)表單驗(yàn)證的工作,就借來大白的代碼,但是他卻不開心,因?yàn)榇蟀椎拇a不僅要重新拷貝一份而且復(fù)用性很差,要把input定義成同樣的名字才能用,還有,如果要改一個(gè)驗(yàn)證規(guī)則,比如把密碼的長度從6位改成8位,還要深入他的代碼內(nèi)部邏輯去修改,有這時(shí)間都?jí)蛑貙懸粋€(gè)差不多的了.

大白聽到小白的抱怨后,把它該成了一個(gè)函數(shù)

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("手機(jī)號(hào)碼格式不對(duì)");
    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;
  }
}

如果后面的需求有變動(dòng),小白的表單需要驗(yàn)證的不止這幾項(xiàng),又或者在驗(yàn)證手機(jī)號(hào)上,大白和小白的驗(yàn)證條件不同,此時(shí),又需要改動(dòng)這個(gè)函數(shù),漸漸地,這個(gè)函數(shù)越來越膨脹,一大堆的if else判斷.

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

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的驗(yàn)證插件,應(yīng)該是先初始化一個(gè)Validator對(duì)象,然后調(diào)用某個(gè)函數(shù),把每個(gè)字段綁定上相應(yīng)的驗(yàn)證策略即可.然后再去觸發(fā)驗(yàn)證過程.因此,該對(duì)象應(yīng)該有兩個(gè)函數(shù),add()和start(),分別用于為字段綁定策略和觸發(fā)驗(yàn)證.

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", "手機(jī)號(hào)碼格式不正確");
  var errorMsg = validator.start();
  return errorMsg;
}

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

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/82016.html

相關(guān)文章

  • Java設(shè)計(jì)模式-策略模式

    摘要：可以使用其他模式來修正這個(gè)缺陷，如工廠方法模式代理模式或享元模式。我們的策略模式只是實(shí)現(xiàn)了策略的管理，但是沒有嚴(yán)格地定義適當(dāng)?shù)膱鼍笆褂眠m當(dāng)?shù)牟呗?，在?shí)際項(xiàng)目中，一般通過工廠方法模式來實(shí)現(xiàn)策略類的聲明。源碼地址參考文獻(xiàn)設(shè)計(jì)模式之禪 定義 Define a family of algorithms,encapsulate each one,and make them interchange...

    dabai 評(píng)論0 收藏0

  • 設(shè)計(jì)模式之策略模式

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

    番茄西紅柿 評(píng)論0 收藏0

  • 設(shè)計(jì)模式之策略模式

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

    番茄西紅柿 評(píng)論0 收藏0

  • 設(shè)計(jì)模式之策略模式

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

    MangoGoing 評(píng)論0 收藏0

  • 我的Java設(shè)計(jì)模式-策略模式

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

    zilu 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

Youngs

男|高級(jí)講師

TA的文章

閱讀更多
最新活動(dòng)
閱讀需要支付1元查看
<