前言
在学习和使用JS的过程中,或多或少的接触过或者听到过JS的原型和闭包,JS的各种框架和库中强大的功能都是借助这两大神器来实现的。
打开jquery,到处可以看到prototype关键字(原型)
以及闭包的应用
JS原型
在面向对象中,类封装了属性和方法,JS中是使用function来实现类/对象的功能。
使用function,我们可以实现对属性(公有的,js中没有私有的属性)以及方法(也是function)的封装。
上面这种方式,每次new一个新的Car时就会创建一个新的showColor function。
使用prototype关键字,可以操作对象的属性和方法。
showColor函数只会创建一次,所有的实例都拥有指向该函数的指针。
实际应用中,联合使用构造函数和原型方式,就可像用其他程序设计语言一样创建对象。这种概念非常简单,即用构造函数定义对象的所有非函数属性,用原型方式定义对象的函数属性(方法)。结果是,所有函数都只创建一次,而每个对象都具有自己的对象属性实例。
联合使用构造函数和原型方式是使用最广泛的方式。
关于更多JS中定义类或对象的知识,请详阅 http://www.w3school.com.cn/js/pro_js_object_defining.asp
JS闭包
闭包,指的是词法表示包括不被计算的变量的函数,也就是说,函数可以使用函数之外定义的变量。(w3school定义)
闭包实例
提起闭包,还得说一下JS中的this关键字:关键字 this 总是指向调用该方法的对象
应用--通用的删除操作之前验证密码
在一个应用系统中有多个模块,各个模块都涉及到对数据库的增删改查,这是最常见不过的应用了。
考虑这样一种需求: 在删除操作之前,需要用户输入密码进行确认,密码确认通过后才真正执行删除。(不是简单的一个confirm())
这是一个通用的需求,不可能在各个模块中都写一次这样的验证JS,而不同之处仅大于验证通过后执行删除的逻辑。
1. 将验证密码的JS写在一个单独的文件,如verify.js (说明:这里用到了layer.js,如果是其他弹出层插件,如bootStrap,只需要换掉layer.xxx部分)
function Verify(cb,name){
this.cb=cb; //封装一个function对象,该对象拥有数据和一个删除的function
this.name = name; //封装一个name属性
}
Verify.prototype = { //原型
pwdConfirm : function (){
var html = '<div style="margin-top:20px;margin-left:20px;">用户密码:<input type="password" name="usrPwd" id="usrPwd" /></div>\
<div style="margin-top:20px;margin-left:120px;"><button id="reVerConBtn" type="button" class="btn btn-info btn-right">确认</button></div>';
var xId = layer.open({
type: 1,
content:html,
title:"请输入用户密码以确认删除: " +this.name, //访问属性
area: ['420px', '240px']
// skin: 'layui-layer-demo'
});
var self = this;
$("#reVerConBtn").click(function(){
var validateResult=self.validatePwd($("#usrPwd").val());
if(validateResult.valueOf()){
self.cb.exec();//访问function对象的方法,执行回调函数
//同时,这里的self也是闭包
}else{
alert("密码输入错误!");
}
layer.close(xId);
});
},
validatePwd : function (pwd){
var result = new Boolean();
//同步执行以确保结果的可靠性
$.ajax({
type: "GET",
url:WEB_APP_PATH+"/user/validatePwd.do",
data:{"pwd":pwd},
dataType:"json",
async:false,
success:function(json){
result = (json.code==0);
}
});
return result;
}
}
2. 具体业务页面
首先,引入verify.js
其次,构造一个拥有属性和执行删除的function对象
然后,构造一个verify对象,并调用pwdConfirm方法
1.引入js
<script type="text/javascript" src="${ WEB_APP_PATH }/js/verify.js"></script>
2.构造function,拥有属性和执行删除的function
function deleteResourceCallBack(mysqlId,tenantId,userId){
this.mysqlId = mysqlId;
this.tenantId = tenantId;
this.userId = tenantId;
}
deleteResourceCallBack.prototype.exec = function(){
var url = "${WEB_APP_PATH}/resource/deleteMysql.do";
$.post(url,{"resId":this.mysqlId," TenantId":this.tenantId," UserId":this.userId},function(json){
if(json.code==0){
document.location.href ="${WEB_APP_PATH}/resource/mysql/index.do";
}else{
alert("删除数据库实例失败");
}
});
}
3. 构造verify,并执行pwdConfirm()方法
function deleteMysql(mysqlId,tenantId,userId){
var callback = new deleteResourceCallBack(mysqlId,tenantId,userId);
var verify = new Verify(callback,"MySQL");
verify.pwdConfirm();
}
在其他模块中,也类似的进行如上三步操作即可。
本文链接:http://blog.csdn.net/musa875643dn/article/details/51295140
欢迎转载,转载请注明出处。