看几天的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代码模板
时间： 2024-08-06 20:07:10