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

時間 2019-11-26

原文原文鏈接

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

JQuery：這個技術必須會，若是不會，那必定要會查api，知道怎麼寫，要看得懂英文文檔，這個框架十分流行，不管是剛入坑的開發者仍是老油條，其實也都是是須要會的react

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

AngularJS：是個MVVM框架，和JQuery徹底不同，JQuery是基於dom元素的，而angerlar卻不是，不少從jquery過來的新手起初作angular會很不習慣web

ReactJS：React是Facebook 的一個內部項目，本身寫了一套來適用於本身公司的業務，其實不少公司都會這麼作，由於市場上的框架廣泛不適用本身，其實通常大公司都這樣，後來他們本身的這套react十分好用，就開源了，react十分好用，性能也不錯，代碼邏輯相對來講也挺簡單，因此不少人開始用，也有人說這是將來web的趨勢ajax

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

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

……還有不少各式各樣的框架，現在前端正火，甚至還有不少前端遊戲引擎的JS，十分強大，在這裏就很少說了api

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

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

<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();
    }