abstract：JavaScript，是前端開發(fā)人員必須會(huì)的一門技術(shù)，從JS演變出來的有很多框架，先說說幾個(gè)熱門的框架吧：JQuery：這個(gè)技術(shù)必須會(huì)，如果不會(huì)，那一定要會(huì)查api，知道怎么寫，要看得懂英文文檔，這個(gè)框架十分流行，不論是剛?cè)肟拥拈_發(fā)者還是老油條，其實(shí)也都是是需要會(huì)的BackBone：這個(gè)技術(shù)還不錯(cuò)，曾經(jīng)的項(xiàng)目中用到過多次，很方便，是個(gè)MVC的實(shí)用框架，用來渲染視圖十分簡便AngularJS：是個(gè)M

JavaScript，是前端開發(fā)人員必須會(huì)的一門技術(shù)，從JS演變出來的有很多框架，先說說幾個(gè)熱門的框架吧：

JQuery：這個(gè)技術(shù)必須會(huì)，如果不會(huì)，那一定要會(huì)查api，知道怎么寫，要看得懂英文文檔，這個(gè)框架十分流行，不論是剛?cè)肟拥拈_發(fā)者還是老油條，其實(shí)也都是是需要會(huì)的

BackBone：這個(gè)技術(shù)還不錯(cuò)，曾經(jīng)的項(xiàng)目中用到過多次，很方便，是個(gè)MVC的實(shí)用框架，用來渲染視圖十分簡便

AngularJS：是個(gè)MVVM框架，和JQuery完全不一樣，JQuery是基于dom元素的，而angerlar卻不是，很多從jquery過來的新手起初做angular會(huì)很不習(xí)慣

ReactJS：React是Facebook 的一個(gè)內(nèi)部項(xiàng)目，自己寫了一套來適用于自己公司的業(yè)務(wù)，其實(shí)很多公司都會(huì)這么做，因?yàn)槭袌錾系目蚣芷毡椴贿m用自己，其實(shí)一般大公司都這樣，后來他們自己的這套react十分好用，就開源了，react十分好用，性能也不錯(cuò)，代碼邏輯相對來說也挺簡單，所以很多人開始用，也有人說這是未來web的趨勢 

JQuery EasyUI：這是一個(gè)比較不錯(cuò)的框架，很輕便，用來開發(fā)后端管理系統(tǒng)再好不過了，提供了各種組件

ExtJS：這個(gè)就不多說了，剛出來的時(shí)候很牛，但是后來貌似收費(fèi)了，這個(gè)我不清楚，我沒用過，現(xiàn)在用這個(gè)框架的貌似有，可能不多，至少我接觸到的項(xiàng)目都不用這個(gè)，要用也大多都是基于JQuery EasyUI

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

好了，貌似有點(diǎn)廢話了，那么入正題吧，寫JS，其實(shí)也要面向?qū)ο?，?8年小編我剛?cè)肟庸ぷ鞯臅r(shí)候，JS并不受大家重視，甚至CSS都是讓美工人員做的，現(xiàn)在已經(jīng)大不一樣，來看看一個(gè)簡單的登錄是如何用面向?qū)ο蟮姆绞阶龅陌桑?/p>

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

<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部分，我單獨(dú)寫了份login.js

var Login = function () {    // 登錄Form
    var formLoginValidation = function() {            var loginForm = $('#loginForm');            // 表單驗(yàn)證            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 {        // 初始化各個(gè)函數(shù)及對象
        init: function () {
            formLoginValidation();
            
        }
    };
}();
jQuery(document).ready(function() {
    Login.init();
});

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

那么這個(gè)對象已經(jīng)創(chuàng)建了，但是還沒用，因?yàn)闆]有初始化，初始化必定是在dom完全加載完畢后

那么 Login.init()就行了

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

return {        // 初始化各個(gè)函數(shù)及對象
        init: function () {
            formDataDictValidation();
            initDataDictTypes();
            initDataDictTable();
            
        }
    };

最后來看一下action吧，這個(gè)是用shiro來實(shí)現(xiàn)的，這里就不多說了，以后會(huì)單獨(dú)拿出來再說說，也有可能直接上視頻

 @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());        // 默認(rèn)設(shè)置為記住密碼，你可以自己在表單中加一個(gè)參數(shù)來控制//        token.setRememberMe(true);
        try {
            user.login(token);
        } catch (UnknownAccountException e) {            return LeeJSONResult.errorMsg("賬號(hào)不存在");
        } catch (DisabledAccountException e) {            return LeeJSONResult.errorMsg("賬號(hào)未啟用");
        } catch (IncorrectCredentialsException e) {            return LeeJSONResult.errorMsg("密碼錯(cuò)誤");
        } catch (RuntimeException e) {            return LeeJSONResult.errorMsg("未知錯(cuò)誤,請聯(lián)系管理員");
        }        return LeeJSONResult.ok();
    }

最后的最后我來嘮叨幾句吧，前端對于后端開發(fā)人員來說也許是個(gè)坑，因?yàn)楹芏嗪蠖巳藛T都不喜歡接觸，其實(shí)不然，如今全棧工程師是趨勢，尤其在國外，國內(nèi)要成為全棧挺難，畢竟前端后端通吃的開發(fā)者少之又少，極品中的極品，而這樣的牛人小編我認(rèn)識(shí)一個(gè)，然后他已經(jīng)去美國知名公司做開發(fā)多年！

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