以最简单的登录为例,诠释JS面向对象的简单实例-阿里云开发者社区

开发者社区> 风间影月> 正文

以最简单的登录为例,诠释JS面向对象的简单实例

简介: JavaScript,是前端开发人员必须会的一门技术,从JS演变出来的有很多框架,先说说几个热门的框架吧: JQuery:这个技术必须会,如果不会,那一定要会查api,知道怎么写,要看得懂英文文档,这个框架十分流行,不论是刚入坑的开发者还是老油条,其实也都是是需要会的   BackBone:这个技术...
+关注继续查看

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啦,其实都是如出一辙。

 

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
ecmall二次开发 直接实例化mysql对象
$db = &db(); // 第一步赋值数据库类库, $db->query(sql); // 第二步执行mysql 语句; 常用的数据库函数: 得到一行数据 $user=$db->getrow("select * from ecm_member where user_id=111...
607 0
Lua程序设计(四)面向对象类继承
1.类继承  ①代码 Sharp = { _val = 1} --① 父类 function Sharp:new() local new_sharp = { } self.__index = self --②,self == Sharp setmetatable(n...
661 0
ThinkPHP中实例化对象M()和D()的区别,select和find的区别
原文:ThinkPHP中实例化对象M()和D()的区别,select和find的区别 1.ThinkPHP中实例化对象M()和D()的区别 在实例化的过程中,经常使用D方法和M方法,这两个方法的区别在于M方法实例化模型无需用户为每个数据表定义模型类,如果D方法没有找到定义的模型类,则会自动调用M方法。
869 0
LUA面向对象编程技巧
详文请见 http://ffown.sinaapp.com/?p=11 1. LUA中的对象 我们知道,对象由属性和方法组成。LUA中最基本的结构是table,So 必须用table描述对象的属性。
647 0
+关注
风间影月
互联网后端开发工程师,技术经理,项目经理,架构师
170
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
文娱运维技术
立即下载
《SaaS模式云原生数据仓库应用场景实践》
立即下载
《看见新力量:二》电子书
立即下载