Javascript笔记：（实践篇）从jQuery插件技术说起（上篇）
生活随笔
收集整理的這篇文章主要介紹了
Javascript笔记：（实践篇）从jQuery插件技术说起（上篇）
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
? ? ? 最近寫了個網站，當時借鑒了很多相關網站前端技術，為了讓客戶的體驗更加好，我在網站前端加入了相當多的校驗代碼，因此代碼顯的特別臃腫。雖然開發過程中我將前端代碼重構了三次，但是我還是對我原來寫的代碼不滿意。五一假期我好好復習了下javascript的知識，這里試著總結下我對代碼不滿意的地方，大致有以下幾點：
1) 我一直都在琢磨jQuery源碼的寫法，覺得jQuery是我見過寫的最棒的代碼，因此代碼里的寫了大量的普通的function，這個很不符合jQuery的風格，這個讓我很不爽。
2) 不同的頁面其實有很多類似的操作，這些操作是可以抽取成為公共的方法，例如：不同頁面里的文本框、下拉框、多選框和單選框，它們大多都會有blur、focus和keyup事件，如果我一個個綁定這些事件，真是一件很不爽的事情，而且最終的代碼會讓人感覺很沒有檔次，因此事件綁定應該要好好的封裝下，這樣代碼的質量會更高，通用性更好。
3) ?頁面里的js代碼過多。我現在寫前端頁面總會考慮我這么開發會讓我的頁面運行的更快嗎？提高頁面的相應速度的方法很多，但是有幾點只要你在開發時候處處留心很容易做到，例如：減小頁面的大小，但是如果你的頁面的js代碼過多了，頁面的大小會變大，或多或少會影響到頁面在網絡中傳輸的速度；好的js代碼應該是盡力的把統一的方法寫到外部的js文件，而且這個js文件數量要盡量少。而我的頁面里js代碼過多，這也是一個敗筆。
4) 我一直都覺得用json的格式定義javascript變量是一個十分優雅的編程模式，但是這個技能我并不太熟練，因此當項目很趕的時候我不自覺的還是按原來的套路寫js代碼，這樣的代碼現在回頭看看，真是有點原始（幼稚）。
5) ?既然是用jQuery框架做開發，那么代碼應該盡量發揮出jQuery代碼的特點，用最好的jQuery風格的代碼去開發，才會讓你的代碼顯得優質（也許jQuery代碼的效率和原生態的js代碼有性能的差別，不過我們平時做的項目里，jQuery的效率的缺陷基本都可以忽略不計），多去思考如何讓你寫的jQuery代碼寫的更好，是對你使用語言的尊重，這種尊重一定能讓你進步的更快。
五一節我想到了用jQuery插件的模式重新封裝我的代碼，讓我的代碼和jQuery框架融為一體，此外盡力把公共的方法都抽取出來放到統一的js文件里，頁面最好只留一定要寫到頁面里的代碼。
下面就是我寫的代碼，首先還是先看看我的目錄結構：
index.html的代碼如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>UMSS JQUERY MAIN JS File</title> <script type="text/javascript" src="js/jquery-1.7.1.js"></script> <script type="text/javascript" src="js/jquery.umss.js"></script> <link type="text/css" rel="stylesheet" href="css/jquery.umss.css" /></link> </head> <body> <fieldset><legend>用戶注冊</legend><form><p><label for="email"> 電子郵件：</label><input type="text" size="24" id="email" name="email"/><span id="emailmsg" name='' style="color:#F00"></span></p><p><label for="mphone"> 手機號碼：</label><input type="text" size="24" id="mphone" name="mphone"/><span id="mphonemsg" name='' style="color:#F00"></span> </p><p><label for="onepwd"> 密 碼：</label><input type="password" size="24" id="onepwd" name="onepwd"/><span id="onepwdmsg" name='' style="color:#F00"></span> </p><p><label for="twopwd">密碼again：</label><input type="password" size="24" id="twopwd" name="twopwd"/><span id="twopwdmsg" name='' style="color:#F00"></span> </p><p><label> 驗證碼：</label><input type="text" id="code" name="code" maxlength="6" size="24"/> <input type="text" id="codeimg" name="codeimg" class='unchanged' readonly="readonly"/><span id="codemsg" name='' style="color:#F00"></span> </p><p><input type="button" value="確 定" id="btn" name="btn"/></p></form> </fieldset> </body> </html> <script type="text/javascript"> $(document).ready(function(){bindFormAttrEvt(); });function bindFormAttrEvt(){var formattrs = ['#email','#mphone','#onepwd','#twopwd','#code','#codeimg','#btn']; var evttypes = 'focus blur keyup click';var evtMethods = {'focus':evtFocusMethod,'blur':evtBlurMethod,'keyup':evtKeyUpMethod,'click':evtClickMethod};// 綁定事件 $.bindEvtByTypeUmss(formattrs,evttypes,evtMethods);// 初始化驗證碼 $.createUmssCode($('#codeimg')); }// 點擊(click)事件方法 function evtClickMethod(evt){var objid = evt.target.id;switch(objid){case 'codeimg':$.createUmssCode($('#codeimg'));break;case 'btn':var flag = true;var checkarrs = ['email','mphone','onepwd','twopwd','code'];$.each(checkarrs,function(i,data){var evt = {'target':{'id':data}};if (flag){flag = evtBlurMethod(evt);}});console.log(flag);if (flag){alert('數據提交成功！！！！！');}break;default:break; } }// 失去焦點（blur）事件方法 function evtBlurMethod(evt){var objid = evt.target.id;/*if (evt.target.id != null){objid = evt.target.id;}else{objid = evt;}*/switch(objid){case 'email':if ($.isEmailUmss($('#email').val()) == false){$('#emailmsg').text('電子郵件格式不正確!'); return false;}else{$('#emailmsg').text('恭喜你！電子郵件格式正確!'); return true; }break;case 'mphone':if ($.isMPhoneUmss($('#mphone').val()) == false){$('#mphonemsg').text('手機號碼不正確!');return false; }else{$('#mphonemsg').text('恭喜你！手機號碼正確!'); return true;} break;case 'onepwd':if ($.isPwdLengthMinUmss($('#onepwd').val())){$('#onepwdmsg').text('密碼長度不能少于6個字符!');return false;}else if ($.isPwdLengthMaxUmss($('#onepwd').val())){$('#onepwdmsg').text('密碼長度不能多于32個字符!'); return false;}else if ($.pwdFormatCheckUmss($('#onepwd').val())){$('#onepwdmsg').text('密碼由6~32位不連續的數字或英文字母組成!'); return false;}else{$('#onepwdmsg').text('恭喜你！密碼格式正確!');return true; }break;case 'twopwd':if ($('#onepwd').val() != $('#twopwd').val()){$('#twopwdmsg').text('兩次密碼不一致!'); $('#twopwd').val('');return false;}else{$('#twopwdmsg').text('恭喜你！密碼一致的哈!'); return true; }break;case 'code':if ($('#code').val() != $.umsscode){$('#codemsg').text('驗證碼輸入不正確!'); return false;}else{$('#codemsg').text('恭喜你！驗證碼輸入正確!');return true; }break;default:break; } }// 焦點（blur）事件方法 function evtFocusMethod(evt){var objid = evt.target.id;switch(objid){case 'email':$('#emailmsg').text('請輸入電子郵件!'); break;case 'mphone':$('#mphonemsg').text('請輸入手機號碼!'); break;case 'onepwd':$('#onepwdmsg').text('請輸入密碼!');break;case 'twopwd':$('#twopwdmsg').text('請輸入密碼again!');break;case 'code':$('#code').text('請輸入驗證碼!');break;default:break; } }// 鍵盤輸入(keyup)事件 function evtKeyUpMethod(evt){var objid = evt.target.id;switch(objid){case 'email':$('#emailmsg').text('你輸入的字符長度是:' + $('#email').val().length); break;case 'mphone':$('#mphonemsg').text('你輸入的字符長度是:' + $('#mphone').val().length); break;case 'onepwd':$('#onepwdmsg').text('你輸入的字符長度是:' + $('#onepwd').val().length);break;case 'twopwd':$('#twopwdmsg').text('你輸入的字符長度是:' + $('#twopwd').val().length);break;case 'code':$('#codemsg').text('你輸入的字符長度是:' + $('#code').val().length);break;default:break; } } </script>jquery.umss.js的代碼：
// 為了避免函數、對象以及變量和jQuery其他的函數、對象及變量沖突，所有方法都以Umss結束 ;(function($){var emailregex = /^([a-zA-Z0-9_-]{1,})((.[a-zA-Z0-9_-]{1,}){0,})@([a-zA-Z0-9_-]{1,})((.[a-zA-Z0-9_-]{1,}){1,})$/,mphoneregex = /^1[3|4|5|8][0-9]\d{4,8}$/,pwdregex = /^[a-zA-Z0-9]{6,32}$/;$.extend({'umsscode':'','isEmailUmss':function(val){return emailregex.test(val);},'isMPhoneUmss':function(val){return mphoneregex.test(val);},'isPwdLengthMinUmss':function(val){return (val.length < 6)?true:false;},'isPwdLengthMaxUmss':function(val){return (val.length > 32)?true:false;},'pwdFormatCheckUmss':function(val){ return !pwdregex.test(val);},'createUmssCode':function(jobj){$.umsscode = '';var codelen = 6;//驗證碼的長度var selectChar = new Array(0,1,2,3,4,5,6,7,8,9,'A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R','S','T','U','V','W','X','Y','Z');//所有候選組成驗證碼的字符，當然也可以用中文的for (var i = 0;i < codelen;i++){var charindex = Math.floor(Math.random()*36);$.umsscode += selectChar[charindex]; }jobj.val($.umsscode);},'bindEvtByTypeUmss':function(formattrs,evttypes,evtMethods){$.each(formattrs,function(ind,obj){$(obj).bind(evttypes,function(evt){var type = evt.type;switch(type){case 'blur':evtMethods.blur(evt);break;case 'focus':evtMethods.focus(evt);break;case 'keyup':evtMethods.keyup(evt);break;case 'click':evtMethods.click(evt);break;default:break; }});}); }}); })(jQuery)jquery.umss.css的代碼如下：
#codeimg{background-image:url(../images/code.jpg);font-family:Arial;font-style:italic;color:Red;border:0;padding:2px 3px;letter-spacing:3px;font-weight:bolder;cursor:pointer; } .unchanged{border:0;width:80px; } form p {margin-left:300px; }form p input[type='button']{margin-left:150px; }這里的代碼還存在缺陷，但是比我早先寫的代碼要好多，今天把它貼出來和大家交流下，希望js的大牛們能好好指點下。
為了以這樣的方式寫出代碼，我研究了下jQuery插件技術，發現jQuery插件技術還是非常有內涵的技術，下篇里我就會和大家好好聊下jQuery的插件技術。
? (注意：代碼最好在firefox或是chrome里運行，代碼里還存在一點小錯誤，我在下篇里會指出并修復)
? 代碼下載鏈接：
http://files.cnblogs.com/sharpxiajun/jqumss.zip
?
總結
以上是生活随笔為你收集整理的Javascript笔记：（实践篇）从jQuery插件技术说起（上篇）的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： TTThumbsViewControll
- 下一篇： 开始——“运行”命令集