這篇文章主要講解了JS實現(xiàn)數(shù)據(jù)與邏輯分離的方法,內(nèi)容清晰明了,對此有興趣的小伙伴可以學習一下,相信大家閱讀完之后會有幫助。
網(wǎng)站建設(shè)哪家好,找創(chuàng)新互聯(lián)公司!專注于網(wǎng)頁設(shè)計、網(wǎng)站建設(shè)、微信開發(fā)、小程序開發(fā)、集團企業(yè)網(wǎng)站建設(shè)等服務(wù)項目。為回饋新老客戶創(chuàng)新互聯(lián)還提供了虎林免費建站歡迎大家使用!
之前已經(jīng)寫過一個表單驗證插件了,為什么還會重復造輪子呢?第一個問題是代碼結(jié)構(gòu)比較亂,雖然通過原型繼承的寫法將處理分層,但業(yè)務(wù)邏輯和數(shù)據(jù)結(jié)構(gòu)混雜在一起,導致第二個問題——可擴展性和靈活性差。
認真分析表單驗證的過程,可以分為兩步:怎么驗證和如何驗證。怎么驗證是數(shù)據(jù)層面的問題,如何驗證是業(yè)務(wù)邏輯層面的問題。
點擊:這里 查看源碼
如何讓算法(數(shù)據(jù)層)和對象(邏輯層)分開來,使得算法可以獨立于使用它的客戶而變化?這里引入策略模式。
什么是策略模式
定義一系列的算法,把每一個算法封裝起來, 并且使它們可相互替換。本模式使得算法可獨立于使用它的客戶而變化。
即:策略模式把對象本身和運算規(guī)則區(qū)分開來,其功能非常強大,因為這個設(shè)計模式本身的核心思想就是面向?qū)ο缶幊痰亩嘈涡缘乃枷搿?/p>
關(guān)于策略模式的更多定義,參見
下面我們就開始運用策略模式來解決代碼分層問題。
在開始代碼之前,我們希望用更簡單的方式調(diào)用插件。
// 獲取表單form元素 var form = document.getElementById('myForm'); // 創(chuàng)建表單校驗實例 var validation = new FormValidator(); // 編寫校驗配置 validation.add(form.username, 'isEmpty', '用戶名不能為空s'); validation.add(form.password, 'minLength: 6', '密碼長度不能小于6個字符'); validation.add(form.password2, 'isEqualTo: password', '密碼不一致'); validation.add(form.mobile, 'isMobile', '請?zhí)顚懻_的手機號'); // 開始校驗,并接收錯誤信息 $('#submit-btn').click(function() { var errorMsg = validation.start(); // 如果有錯誤信息輸出,說明校驗未通過 if(errorMsg){ console.log(errorMsg); return false; } })
add()方法參數(shù)說明
1、 參數(shù)1:需要驗證的表單項DOM元素,form[name屬性]
2、 參數(shù)2:驗證方法,用冒號分割,冒號后的值為方法的參數(shù)(可選)
3、 參數(shù)3:錯誤提示信息
我們開始運用策略模式編寫代碼。第一步,只編寫無關(guān)業(yè)務(wù)邏輯的驗證函數(shù)算法,即數(shù)據(jù)層
var VerifyPolicies = { isEmpty: function(value, errMsg) { if(value == '') return errMsg; }, // 最小長度 minLength: function(value, length, errMsg) { if (value.length < length) return errMsg; }, // 手機號碼 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; } };
function FormValidator(VerifyPolicy) { this.verifyPolicies = VerifyPolicy ? VerifyPolicy : VerifyPolicies; // 待執(zhí)行的驗證函數(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; } };
至此,整個表單驗證已經(jīng)初步完成,在此方法之上,可以隨意添加方法了。
看完上述內(nèi)容,是不是對JS實現(xiàn)數(shù)據(jù)與邏輯分離的方法有進一步的了解,如果還想學習更多內(nèi)容,歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。
網(wǎng)站題目:JS實現(xiàn)數(shù)據(jù)與邏輯分離的方法
瀏覽地址:http://vcdvsql.cn/article36/gjdssg.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供網(wǎng)站設(shè)計、搜索引擎優(yōu)化、動態(tài)網(wǎng)站、靜態(tài)網(wǎng)站、手機網(wǎng)站建設(shè)、Google
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時需注明來源: 創(chuàng)新互聯(lián)