JS原型及闭包应用--通用的删除操作需要密码确认

前言

   在学习和使用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

  欢迎转载，转载请注明出处。