一.什么是闭包?
概念性的我就不去百度了,感兴趣的可以自己去搜下,我自己的理解,闭包就是一个封装的包,相当于类的概念,把乱七八糟的的东西封装到一起,然后统一使用一个对象来调用,实现代码部分对外开放,部分隐藏的作用,就比如很多好用的js jquery 插件,为什么一行代码就可以使用了? 因为往往我们不会去关心实现,而只想知道怎么用,本文仅仅对于这个概念做一个简单的阐述,有兴趣的可以自己自由发挥。 0.0
代码如下:
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <script type="text/javascript" src="js/jquery-1.11.0.js" ></script> <script type="text/javascript"> (function(){ //这个一个空的闭包 })(); </script> <title></title> </head> <body> </body> </html>
简单的用法如下:
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <script type="text/javascript" src="js/jquery-1.11.0.js" ></script> <script type="text/javascript"> (function(){ //自定义方法 var showMessage=function(para){ alert(para) }; var write=function(){ $("body").append("111111"); }; //返回一个可供调用的对象 return window.NewObj={ show:showMessage, writeHtml:write }; })(); $(function(){ NewObj.show("调用了闭包中的方法"); }); </script> <title></title> </head> <body> </body> </html>
这样就完成了一个简单闭包的封装,那么把它放到对应的js文件,就可以做成一个公共的js 来使用了
如下:
/*ToolHelper
* 对象定义内容如下
* AsyncAjax ajax 异步请求
* CommonAjax ajax 同步请求
* SetCookie 创建cookie
* GetCookie 读取cookie
* DelCookie 删除cookie
*/
(function(){
var asyncAjax=function(url,para,callback,options){
$.ajax({
url:url,
data:para,
dataType:"json",
success:function(data){
console.log(JSON.stringify(data[0]));
callback(data,options);
}
});
};
var commonAjax=function(url,para,callback,options){
$.ajax({
url:url,
data:para,
type:"GET",
async:false,
dataType: "json",
success:function(data){
console.log(JSON.stringify(data[0]));
callback(data,options);
}
});
};
var writeCookie = function(key,value) {
//html5 本地存储,这个为内置方法
localStorage.setItem(key,value);
};
var getCookie = function(key) {
//html5 本地存储,这个为内置方法
return localStorage.getItem(key);
}
var delCookie=function(key){
localStorage.removeItem(key);
};
var getQueryStr = function(name) {
var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
var r = location.search.substr(1).match(reg);
if (r != null) return unescape(decodeURI(r[2]));
return null;
};
return ToolHelper={
AsyncAjax:asyncAjax,
CommonAjax:commonAjax,
SetCookie:writeCookie,
GetCookie:getCookie,
DelCookie:delCookie,
GetQueryString:getQueryStr
};
})();
//可以看到文中定义了一个工具对象,封装了一些简单的方法,个人认为ajax 不需要封装什么东西,直接调用即可。