看几天的javascript面向对象和基础等之类相关javascript的知识,由于自己是写php的,也写过java,所以想在写javascript代码的时候也能用上面向对象的思想,
折腾了一整天的js继承和封装等,搞得我是吃午饭都想着问题,怎么javascript代码可以如此松散呢?眼看就要下班了,加班到现在不知怎么滴就弄了这样一个js代码模板,想以后每个模块都这样写。大了就各个功能对象提炼出来,如验证的、语言包的。
好了,废话不多说,菜鸟一个,代码没注释也不完整,高手留情指点:
reg.html文件:
<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>reg.js文件:
$( 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( ); } );
后端程序猿写的前端js代码模板,布布扣,bubuko.com
原文地址:http://blog.csdn.net/zyb_icanplay7/article/details/30282879