以最简单的登陆为例，诠释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();
    }

最后的最后我来唠叨几句吧，前端对于后端开发人员来讲也许是个坑，由于不少后端人员都不喜欢接触，其实否则，现在全栈工程师是趋势，尤为在国外，国内要成为全栈挺难，毕竟前端后端通吃的开发者少之又少，极品中的极品，而这样的牛人小编我认识一个，而后他已经去美国知名公司作开发多年！

做为后端人员，JS其实必定要会，那些页面的逻辑性脚本要会写，其次，jquery要能看懂，要能灵活运用，到最后，要去使用某个js插件的时候你就能灵活运用了，好比jqgrid啦，ztree啦，其实都是一模一样。