策略模式 -- 表單驗證多規則 · 前端知識 -- 學習整理

>[success] ##### 有意思的立即執行函數 ~~~ 1.問題為啥add用了閉包？https://developer.mozilla.org/zh-CN/docs/Glossary/%E7%AB%8B%E5%8D%B3%E6%89%A7%E8%A1%8C%E5%87%BD%E6%95%B0%E8%A1%A8%E8%BE%BE%E5%BC%8F 2.第一部分是包圍在圓括號運算符 () 里的一個匿名函數，這個匿名函數擁有獨立的詞法作用域。這不僅避免了外界訪問此 IIFE 中的變量，而且又不會污染全局作用域。 3.在只有 var，沒有 let 的舊 JavaScript 時代，誕生了一個技巧，叫做：立即執行的函數表達式（IIFE），通過創建一個函數，并且立即執行，來構造一個新的域，從而控制 var 的范圍。 ~~~ >[danger] ##### IIFE立即執行函數講解 ~~~ 1.現在讓你只用'es5'的方式'給文檔添加了 20 個 div 元素，并且綁定了點擊事件，打印它們的序號' ~~~ * 第一反應 ~~~ 1.但是執行后的結果是打印二十個20，這是因為'var 只是當前作用域聲明這個變量'，但要注意的是 'var 除了腳本和函數體都會穿透',簡單的理解就是你不是函數不是腳本我var 就和大家共享，因此最后的結果就是大家都是'20' 因為你的'for 不是函數我就能穿透你跟大家共享' ~~~ ~~~ for(var i = 0; i < 20; i ++) { var div = document.createElement("div"); div.innerHTML = i; div.onclick = function(){ console.log(i); } document.body.appendChild(div); } ~~~ * 改正 ~~~ 1.現在知道了問題就是for不是函數導致'var穿透形成個共享'，那么解決方法就是利用函數讓你出不去, 老老實實一個是一個，這就是立即執行函數上場了 2.下面代碼我執行完就一個新函數，我新函數里面的i 就是實際現在的，你跑不出去 ~~~ ~~~ for(var i = 0; i < 20; i ++) { void function(i){ var div = document.createElement("div"); div.innerHTML = i; div.onclick = function(){ console.log(i); } document.body.appendChild(div); }(i); } ~~~ >[danger] ##### 策略模式 ~~~ <html> <head> <meta charset="utf-8"> </head> <body> <form action="" id="registerForm" method="post"> 請輸入用戶名：<input type="text" name="userName"/> 請輸入密碼：<input type="text" name="passWord"/> 請輸入手機號碼：<input type="text" name="phoneNumber"/> <input type="submit" value="提交"/> </form> <script> /***************策略對象*************/ var strategies = { isNotEmpty:function(value,errorMsg){ if(value === ''){ return errorMsg; } }, minLength:function(value,length,errorMsg){ if(value.length<length){ return errorMsg; } }, isMobile:function(){ if(!/(^1[3|5|8][0-9]{9}$)/.test(value)){ return errorMsg; } } } /***************validator類***************/ var Validator = function(){ this.cache = []; }; Validator.prototype.add = function(dom,rules){ var self = this; for(var i=0,rule;rule = rules[i++];){ (function(rule){ var strategyAry = rule.strategy.split(':'); var errorMsg = rule.errorMsg; self.cache.push(function(){ var strategy = strategyAry.shift(); strategyAry.unshift(dom.value); strategyAry.push(errorMsg); return strategies[strategy].apply(dom,strategyAry); }) })(rule); } } Validator.prototype.start = function(){ for(var i=0,validatorFunc;validatorFunc = this.cache[i++];){ var errorMsg = validatorFunc(); if(errorMsg){ return errorMsg; } } } /************客戶調用代碼***********/ var registerForm = document.getElementById('registerForm'); var validatorFunc = function(){ var validator = new Validator(); validator.add(registerForm.userName,[{ strategy:'isNotEmpty', errorMsg:'用戶名不能為空' },{strategy:'minLength:10', errorMsg:'用戶名長度不能小于10位' }]); validator.add(registerForm.passWord,[{ strategy:'minLength:6', errorMsg:'用戶密碼不能小于6位' }]); validator.add(registerForm.phoneNumber,[{ strategy:'isMobile', errorMsg:'手機號碼格式不正確' }]); var errorMsg = validator.start(); return errorMsg; } registerForm.onsubmit = function(){ var errorMsg = validatorFunc(); if(errorMsg){ alert(errorMsg); return false; } } </script> </body> </html> ~~~