1. 程式人生 > >後端程式猿寫的前端js程式碼模板

後端程式猿寫的前端js程式碼模板

看幾天的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( );
    } );