後端程式猿寫的前端js程式碼模板
阿新 • • 發佈：2019-01-29
看幾天的javascript面向物件和基礎等之類相關javascript的知識，由於自己是寫php的，也寫過java，所以想在寫javascript程式碼的時候也能用上面向物件的思想，
折騰了一整天的js繼承和封裝等，搞得我是吃午飯都想著問題，怎麼javascript程式碼可以如此鬆散呢？眼看就要下班了，加班到現在不知怎麼滴就弄了這樣一個js程式碼模板，想以後每個模組都這樣寫。大了就各個功能物件提煉出來，如驗證的、語言包的。
好了，廢話不多說，菜鳥一個，程式碼沒註釋也不完整，高手留情指點：
reg.html檔案：
reg.js檔案：<html> <head><include file="layout/head"/><title>{$Think.lang.REG}</title></head> <body> <include file="layout/nav"/> <div id="content"> <div class="panel panel-warning"> <div class="panel-heading"> <h3 class="panel-title">{$Think.lang.REG}</h3> </div> <div class="panel-body"> <form id="regForm" action="{:U('home/user/reg')}" method="post"> <div class="form-group"> <label for="account">{$Think.lang.ACCOUNT}</label> <input type="text" id="account" methods="keyup,blur" name="account" class="form-control" style="width: 30%;" placeholder="{$Think.lang.REG_ACCOUNT_TIP}" title="{$Think.lang.REG_ACCOUNT_TIP}"/> <div class="alert alert-danger js-account_alert" style="width: 30%; display: none;"> <strong>:(</strong> <span></span> </div> </div> <div class="form-group"> <label for="password">{$Think.lang.PWD}</label> <input type="password" methods="keyup,blur" name="password" class="form-control" style="width: 30%;" id="password" placeholder="{$Think.lang.REG_PWD_TIP}" title="{$Think.lang.REG_PWD_TIP}"/> <div class="alert alert-danger js-pwd_alert" style="width: 30%; display: none;"> <strong>:(</strong> <span></span> </div> </div> <div class="form-group"> <label for="password">{$Think.lang.VERIFY}</label> <div class="input-group" style="width: 30%;"> <input type="text" methods="blur" id="verify" name="verify" class="form-control"/> <span class="input-group-addon" style="padding: 0px;"> <img src="{:U('home/user/verify','','')}" methods="click" id="changeVerify" title="點選更換"/> </span> </div> <div class="alert alert-danger js-verify_alert" style="width: 30%; display: none;"> <strong>:(</strong> <span></span> </div> </div> <input type="hidden" name="submit_code" value="{$submitCode}"/> <button type="button" id="regSubmitBtn" methods="click" class="btn btn-primary">{$Think.lang.REG}</button> <button type="reset" class="btn btn-default">{$Think.lang.RESET}</button> </form> </div> </div> </div> <include file="layout/foot"/> <script src="reg.js"></script> </body> </html>
$( function( ) { var Reg = { regEx: { ACCOUNT: /^\w{5,8}$/, PWD: /^\d{5,15}$/, VERIFY: /^\d{4}$/ }, node: { account: $( '#account' ), pwd: $( '#password' ), verify: $( '#verify' ), regForm: $( '#regForm' ) }, lang: { ACCOUNT: '{$Think.lang.REG_ACCOUNT_TIP}', PWD: '{$Think.lang.REG_PWD_TIP}', VERIFY: '{$Think.lang.REG_VERIFY_TIP}', CHECK_VERIFY_URL: "{:U('home/user/checkVerify')}", VERIFY_URL: "{:U('home/user/verify','','')}" }, server: { checkVerify: function( val, callback ) { $.post( Reg.lang.CHECK_VERIFY_URL, { verify: val }, callback, 'json' ); } }, validator: { account: function( val, tip ) { var result = false; if ( !Reg.regEx.ACCOUNT.test( val ) ) { Reg.ui.showTip( tip, Reg.lang.ACCOUNT ); } else { result = true; Reg.ui.hideTip( tip ); } return result; }, pwd: function( val, tip ) { var result = false; if ( !Reg.regEx.PWD.test( val ) ) { Reg.ui.showTip( tip, Reg.lang.PWD ); } else { result = true; Reg.ui.hideTip( tip ); } return result; }, verify: function( val, tip, callback ) { var result = false; if ( !Reg.regEx.VERIFY.test( val ) ) { Reg.ui.showTip( tip, Reg.lang.VERIFY ); } else { Reg.server.checkVerify( val, function( data ) { if ( data.status ) { if ( typeof callback === 'function' ) { callback(); } Reg.ui.hideTip( tip ); } else { Reg.ui.showTip( tip, Reg.lang.VERIFY ); } } ); } return result; } }, ui: { showTip: function( obj, msg ) { $( obj ).slideDown( 'slow' ).find( 'span' ).html( msg ); }, hideTip: function( obj ) { $( obj ).slideUp( ).find( 'span' ).html( '' ); } }, event: { accountKeyup: function( e ) { var self = $( this ); setTimeout( function( ) { Reg.validator.account( self.val( ), '.js-account_alert' ); }, 1000 ); }, accountBlur: function( e ) { var self = $( this ); Reg.validator.account( self.val( ), '.js-account_alert' ); }, passwordKeyup: function( e ) { var that = $( this ); setTimeout( function( ) { Reg.validator.pwd( that.val( ), '.js-pwd_alert' ); }, 1000 ); }, passwordBlur: function( e ) { var self = $( this ); Reg.validator.pwd( self.val( ), '.js-pwd_alert' ); }, verifyBlur: function( e ) { Reg.validator.verify( $( this ).val( ), '.js-verify_alert' ); }, changeVerifyClick: function( ) { var src = Reg.lang.VERIFY_URL + '/' + new Date( ).getTime( ); $( this ).attr( 'src', src ); }, regSubmitBtnClick: function() { Reg.validator.account( Reg.node.account.val( ), '.js-account_alert' ) && Reg.validator.pwd( Reg.node.pwd.val( ), '.js-pwd_alert' ) && Reg.validator.verify( Reg.node.verify.val( ), '.js-verify_alert', function() { Reg.node.regForm.submit(); } ); } }, util: { upFirstLetter: function( word ) { var reg = /\b(\w)|\s(\w)/g; word = word.toLowerCase(); return word.replace( reg, function( m ) { return m.toUpperCase(); } ); } }, initializer: function( ) { var node = $( '[methods]' ); node.each( function( ) { var self = $( this ), methods = self.attr( 'methods' ); if ( methods ) { var _methods = methods.split( ',' ); for ( var i = 0, len = _methods.length; i < len; i++ ) { var method = _methods[i]; if ( method ) { var func = self.attr( 'id' ) + Reg.util.upFirstLetter( method ); console.log( func ); self.on( method, Reg.event[func] ); } } } } ); } }; Reg.initializer( ); } );