這篇文章主要講解了JS實(shí)現(xiàn)數(shù)據(jù)與邏輯分離的方法，內(nèi)容清晰明了，對(duì)此有興趣的小伙伴可以學(xué)習(xí)一下，相信大家閱讀完之后會(huì)有幫助。

網(wǎng)站建設(shè)哪家好，找創(chuàng)新互聯(lián)公司！專(zhuān)注于網(wǎng)頁(yè)設(shè)計(jì)、網(wǎng)站建設(shè)、微信開(kāi)發(fā)、小程序開(kāi)發(fā)、集團(tuán)企業(yè)網(wǎng)站建設(shè)等服務(wù)項(xiàng)目。為回饋新老客戶(hù)創(chuàng)新互聯(lián)還提供了虎林免費(fèi)建站歡迎大家使用！

之前已經(jīng)寫(xiě)過(guò)一個(gè)表單驗(yàn)證插件了，為什么還會(huì)重復(fù)造輪子呢？第一個(gè)問(wèn)題是代碼結(jié)構(gòu)比較亂，雖然通過(guò)原型繼承的寫(xiě)法將處理分層，但業(yè)務(wù)邏輯和數(shù)據(jù)結(jié)構(gòu)混雜在一起，導(dǎo)致第二個(gè)問(wèn)題——可擴(kuò)展性和靈活性差。

認(rèn)真分析表單驗(yàn)證的過(guò)程，可以分為兩步：怎么驗(yàn)證和如何驗(yàn)證。怎么驗(yàn)證是數(shù)據(jù)層面的問(wèn)題，如何驗(yàn)證是業(yè)務(wù)邏輯層面的問(wèn)題。

點(diǎn)擊：這里 查看源碼

策略模式將對(duì)象和規(guī)則區(qū)分

如何讓算法（數(shù)據(jù)層）和對(duì)象（邏輯層）分開(kāi)來(lái)，使得算法可以獨(dú)立于使用它的客戶(hù)而變化？這里引入策略模式。

什么是策略模式

定義一系列的算法,把每一個(gè)算法封裝起來(lái), 并且使它們可相互替換。本模式使得算法可獨(dú)立于使用它的客戶(hù)而變化。

即：策略模式把對(duì)象本身和運(yùn)算規(guī)則區(qū)分開(kāi)來(lái)，其功能非常強(qiáng)大，因?yàn)檫@個(gè)設(shè)計(jì)模式本身的核心思想就是面向?qū)ο缶幊痰亩嘈涡缘乃枷搿?/p>

關(guān)于策略模式的更多定義，參見(jiàn)

下面我們就開(kāi)始運(yùn)用策略模式來(lái)解決代碼分層問(wèn)題。

理想中的插件調(diào)用

在開(kāi)始代碼之前，我們希望用更簡(jiǎn)單的方式調(diào)用插件。

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

  // 創(chuàng)建表單校驗(yàn)實(shí)例
  var validation = new FormValidator();
  // 編寫(xiě)校驗(yàn)配置
  validation.add(form.username, 'isEmpty', '用戶(hù)名不能為空s');
  validation.add(form.password, 'minLength: 6', '密碼長(zhǎng)度不能小于6個(gè)字符');
  validation.add(form.password2, 'isEqualTo: password', '密碼不一致');
  validation.add(form.mobile, 'isMobile', '請(qǐng)?zhí)顚?xiě)正確的手機(jī)號(hào)');

  // 開(kāi)始校驗(yàn)，并接收錯(cuò)誤信息
  $('#submit-btn').click(function() {
    var errorMsg = validation.start();

    // 如果有錯(cuò)誤信息輸出，說(shuō)明校驗(yàn)未通過(guò)
    if(errorMsg){
      console.log(errorMsg);
      return false;
    }
  })

add()方法參數(shù)說(shuō)明

1、 參數(shù)1：需要驗(yàn)證的表單項(xiàng)DOM元素，form[name屬性]
2、 參數(shù)2：驗(yàn)證方法，用冒號(hào)分割，冒號(hào)后的值為方法的參數(shù)（可選）
3、 參數(shù)3：錯(cuò)誤提示信息

編寫(xiě)驗(yàn)證函數(shù)

我們開(kāi)始運(yùn)用策略模式編寫(xiě)代碼。第一步，只編寫(xiě)無(wú)關(guān)業(yè)務(wù)邏輯的驗(yàn)證函數(shù)算法，即數(shù)據(jù)層

var VerifyPolicies = {
  isEmpty: function(value, errMsg) {
    if(value == '') return errMsg;
  },

  // 最小長(zhǎng)度
  minLength: function(value, length, errMsg) {
    if (value.length < length) return errMsg;
  },
  // 手機(jī)號(hào)碼
  isMobile: function(value, errMsg) {
    if(!/^1[34578]\d{9}$/.test(value)) return errMsg;
  },
  // 是否相等
  isEqualTo: function (value, toDom, errMsg) {
    var toValue = document.getElementById(toDom).value;

    if(value !== toValue) return errMsg;
  }
};

編寫(xiě)驗(yàn)證邏輯

function FormValidator(VerifyPolicy) {
  this.verifyPolicies = VerifyPolicy ? VerifyPolicy : VerifyPolicies;
  // 待執(zhí)行的驗(yàn)證函數(shù)數(shù)組
  this.validateFn = [];
}

FormValidator.prototype.add = function(dom, rules, errMsg) {
  var _this = this;

  this.validateFn.push(function() {
    var args = [];
    var rule = rules.split(':');
    var ruleName = rule[0];
    var ruleParam = rule[1];
    var value = dom.value;

    args.push(value);
    if(ruleParam) args.push(ruleParam.trim());
    args.push(errMsg);

    // 這里調(diào)用apply只是為了傳參，如果支持ES6，也可以這樣做：
    // return _this.verifyPolicies[ruleName](...args)
    return _this.verifyPolicies[ruleName].apply(null, args);
  })
};

FormValidator.prototype.start = function() {
  var fn = this.validateFn;
  for(var i =0, len = fn.length; ; i++) {
    var msg = fn[i]();
    if(msg) return msg;
  }
};

至此，整個(gè)表單驗(yàn)證已經(jīng)初步完成，在此方法之上，可以隨意添加方法了。

看完上述內(nèi)容，是不是對(duì)JS實(shí)現(xiàn)數(shù)據(jù)與邏輯分離的方法有進(jìn)一步的了解，如果還想學(xué)習(xí)更多內(nèi)容，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

網(wǎng)站題目：JS實(shí)現(xiàn)數(shù)據(jù)與邏輯分離的方法
瀏覽地址：http://aaarwkj.com/article36/gjdssg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站設(shè)計(jì)、搜索引擎優(yōu)化、動(dòng)態(tài)網(wǎng)站、靜態(tài)網(wǎng)站、手機(jī)網(wǎng)站建設(shè)、Google

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀(guān)點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話(huà)：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)