以最簡單的登錄為例，詮釋JS面向對象的簡單實例

JavaScript，是前端開發人員必須會的一門技術，從JS演變出來的有很多框架，先說說幾個熱門的框架吧：

JQuery：這個技術必須會，如果不會，那一定要會查api，知道怎么寫，要看得懂英文文檔，這個框架十分流行，不論是剛入坑的開發者還是老油條，其實也都是是需要會的

 

BackBone：這個技術還不錯，曾經的項目中用到過多次，很方便，是個MVC的實用框架，用來渲染視圖十分簡便

 

AngularJS：是個MVVM框架，和JQuery完全不一樣，JQuery是基於dom元素的，而angerlar卻不是，很多從jquery過來的新手起初做angular會很不習慣

 

ReactJS：React是Facebook 的一個內部項目，自己寫了一套來適用於自己公司的業務，其實很多公司都會這么做，因為市場上的框架普遍不適用自己，其實一般大公司都這樣，后來他們自己的這套react十分好用，就開源了，react十分好用，性能也不錯，代碼邏輯相對來說也挺簡單，所以很多人開始用，也有人說這是未來web的趨勢

 

JQuery EasyUI：這是一個比較不錯的框架，很輕便，用來開發后端管理系統再好不過了，提供了各種組件

 

ExtJS：這個就不多說了，剛出來的時候很牛，但是后來貌似收費了，這個我不清楚，我沒用過，現在用這個框架的貌似有，可能不多，至少我接觸到的項目都不用這個，要用也大多都是基於JQuery EasyUI

 

……還有很多各式各樣的框架，如今前端正火，甚至還有很多前端游戲引擎的JS，十分強大，在這里就不多說了

好了，貌似有點廢話了，那么入正題吧，寫JS，其實也要面向對象，在08年小編我剛入坑工作的時候，JS並不受大家重視，甚至CSS都是讓美工人員做的，現在已經大不一樣，來看看一個簡單的登錄是如何用面向對象的方式做的吧：

先來看看登錄頁面的代碼，十分簡單，就是一個用戶名和密碼

<form id="loginForm" >
        <input type="hidden" id="hdnContextPath" name="hdnContextPath" value="<%=request.getContextPath() %>"/>
        <P>
            <input class="ipt" type="text" name="username" placeholder="請輸入用戶名或郵箱" value="" />
        </P>
        <P>
            <input class="ipt" id="password" type="password" name="password" placeholder="請輸入密碼" value="" />
        </P>
        <button type="submit">Login</button>
    </form>

 

重頭戲在js部分，我單獨寫了份login.js

var Login = function () {

    // 登錄Form
    var formLoginValidation = function() {

            var loginForm = $('#loginForm');

            // 表單驗證
            loginForm.validate({
                rules: {
                    username: {
                        required: true
                    },
                    password: {
                        required: true
                    }
                },
                messages: {
                    username: {
                        required: "登錄用戶名不能為空"
                    },
                    password: {
                        required: "登錄密碼不能為空"
                    }
                },

                submitHandler: function (form) {
                    
                    var hdnContextPath = $("#hdnContextPath").val();
                    loginForm.ajaxSubmit({
                        dataType: "json",
                        type: "post", // 提交方式 get/post
                        url: hdnContextPath + '/login.action', // 需要提交的 url
                        data: loginForm.serialize(),
                        success: function(data) {
                            // 登錄成功或者失敗的提示信息
                            if (data.status == 200 && data.msg == "OK") {
                                window.location.href = hdnContextPath + "/index.action";
                            } else {
                                alert(data.msg);
                            }
                        }
                    });
//                    return false;
                }
                
            });
            
    }
    
    return {
        // 初始化各個函數及對象
        init: function () {

            formLoginValidation();
            
        }

    };

}();

jQuery(document).ready(function() {
    Login.init();
});

這是一個Login的對象，對象Login，formLoginValidation是這個對象中的屬性，而這個屬性是個function，主要兩個作用，驗證form以及登錄成功后的跳轉；最后這個Login對象返回一個init的函數，這個函數的作用是初始化對象中的所有方法

那么這個對象已經創建了，但是還沒用，因為沒有初始化，初始化必定是在dom完全加載完畢后

那么 Login.init()就行了

那么只要加入這段代碼皆可以了，調用Login對象的init()方法，就可以初始化話所有對象函數，當然，有不同的屬性都要寫在init中，比如這樣：

return {
        // 初始化各個函數及對象
        init: function () {

            formDataDictValidation();
            initDataDictTypes();
            initDataDictTable();
            
        }

    };

 

最后來看一下action吧，這個是用shiro來實現的，這里就不多說了，以后會單獨拿出來再說說，也有可能直接上視頻

    @RequestMapping(value = "/login", method = RequestMethod.POST)
    @ResponseBody
    public LeeJSONResult loginPost(String username, String password) {

        if (StringUtils.isBlank(username)) {
            return LeeJSONResult.errorMsg("用戶名不能為空");
        }
        if (StringUtils.isBlank(password)) {
            return LeeJSONResult.errorMsg("密碼不能為空");
        }
        Subject user = SecurityUtils.getSubject();
        
        UsernamePasswordToken token = new UsernamePasswordToken(username, DigestUtils.md5DigestAsHex(password.getBytes()).toCharArray());
        // 默認設置為記住密碼，你可以自己在表單中加一個參數來控制
//        token.setRememberMe(true);
        try {
            user.login(token);
        } catch (UnknownAccountException e) {
            return LeeJSONResult.errorMsg("賬號不存在");
        } catch (DisabledAccountException e) {
            return LeeJSONResult.errorMsg("賬號未啟用");
        } catch (IncorrectCredentialsException e) {
            return LeeJSONResult.errorMsg("密碼錯誤");
        } catch (RuntimeException e) {
            return LeeJSONResult.errorMsg("未知錯誤,請聯系管理員");
        }
        return LeeJSONResult.ok();
    }

最后的最后我來嘮叨幾句吧，前端對於后端開發人員來說也許是個坑，因為很多后端人員都不喜歡接觸，其實不然，如今全棧工程師是趨勢，尤其在國外，國內要成為全棧挺難，畢竟前端后端通吃的開發者少之又少，極品中的極品，而這樣的牛人小編我認識一個，然后他已經去美國知名公司做開發多年！

作為后端人員，JS其實一定要會，那些頁面的邏輯性腳本要會寫，其次，jquery要能看懂，要能靈活運用，到最后，要去使用某個js插件的時候你就能靈活運用了，比如jqgrid啦，ztree啦，其實都是如出一轍。