溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要講解了JS實現數據與邏輯分離的方法，內容清晰明了，對此有興趣的小伙伴可以學習一下，相信大家閱讀完之后會有幫助。
之前已經寫過一個表單驗證插件了，為什么還會重復造輪子呢？第一個問題是代碼結構比較亂，雖然通過原型繼承的寫法將處理分層，但業務邏輯和數據結構混雜在一起，導致第二個問題——可擴展性和靈活性差。
認真分析表單驗證的過程，可以分為兩步：怎么驗證和如何驗證。怎么驗證是數據層面的問題，如何驗證是業務邏輯層面的問題。
點擊：這里 查看源碼
如何讓算法（數據層）和對象（邏輯層）分開來，使得算法可以獨立于使用它的客戶而變化？這里引入策略模式。
什么是策略模式
定義一系列的算法,把每一個算法封裝起來, 并且使它們可相互替換。本模式使得算法可獨立于使用它的客戶而變化。
即：策略模式把對象本身和運算規則區分開來，其功能非常強大，因為這個設計模式本身的核心思想就是面向對象編程的多形性的思想。
關于策略模式的更多定義，參見
下面我們就開始運用策略模式來解決代碼分層問題。
在開始代碼之前，我們希望用更簡單的方式調用插件。
// 獲取表單form元素
var form = document.getElementById('myForm');
// 創建表單校驗實例
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', '請填寫正確的手機號');
// 開始校驗，并接收錯誤信息
$('#submit-btn').click(function() {
var errorMsg = validation.start();
// 如果有錯誤信息輸出，說明校驗未通過
if(errorMsg){
console.log(errorMsg);
return false;
}
})add()方法參數說明
1、 參數1：需要驗證的表單項DOM元素，form[name屬性]
2、 參數2：驗證方法，用冒號分割，冒號后的值為方法的參數（可選）
3、 參數3：錯誤提示信息
我們開始運用策略模式編寫代碼。第一步，只編寫無關業務邏輯的驗證函數算法，即數據層
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;
// 待執行的驗證函數數組
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);
// 這里調用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;
}
};至此，整個表單驗證已經初步完成，在此方法之上，可以隨意添加方法了。
看完上述內容，是不是對JS實現數據與邏輯分離的方法有進一步的了解，如果還想學習更多內容，歡迎關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
