以最簡單的登入狀態例，詮釋JS物件導向的簡單一實例

標籤：rip   amp   except   開發人員   國內   方式   api   返回   效能   

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啦，其實都是如出一轍。

 

以最簡單的登入狀態例，詮釋JS物件導向的簡單一實例