码迷,mamicode.com
首页 > Web开发 > 详细

后端程序员写的前端js代码模板

时间:2014-09-27 17:33:50      阅读:272      评论:0      收藏:0      [点我收藏+]

标签:style   blog   io   os   ar   java   strong   for   文件   

看几天的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代码模板

标签:style   blog   io   os   ar   java   strong   for   文件   

原文地址:http://www.cnblogs.com/lcchuguo/p/3996573.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!