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