一.什么是闭包?

概念性的我就不去百度了，感兴趣的可以自己去搜下,我自己的理解，闭包就是一个封装的包，相当于类的概念，把乱七八糟的的东西封装到一起，然后统一使用一个对象来调用，实现代码部分对外开放，部分隐藏的作用，就比如很多好用的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  不需要封装什么东西，直接调用即可。

Jquery和Javascript 实际项目中写法基础-闭包 (2)的更多相关文章

  1. Jquery和Javascript 实际项目中写法基础-弹出窗和弹出层 (4)

     一.实际项目中有很多如下界面效果.    二.该效果可以归结为弹出窗或者弹出层来实现的,为什么这么说?看如下代码:      <!DOCTYPE html> <html> & ...

  2. Jquery和Javascript 实际项目中写法基础 (1)

    一.JS 是什么,jquery 是什么  就不说明了,直接说一般使用是怎么样的 <!DOCTYPE html> <html> <head> <meta cha ...

  3. Jquery和Javascript 实际项目中写法基础-ajax和json (3)

    一.什么是JSON数据? 一种轻量级的数据交换格式.实际中知道如何使用即可. 软件开发我认为就是一个会用,然后知其原理的过程. 例子如下: <!DOCTYPE html> <html ...

  4. JavaScript在HTML中的基础用法总结

    网页主要由三部分组成,分别为html.CSS和Javascript.如果说HTML是肉身,CSS是皮相,那Javascript就是灵魂.因此,三者的联系与融合则至关重要.本文就来为大家讲解一下Java ...

  5. ASP.NET MVC jQuery 树插件在项目中使用方法（一）

    jsTree是一个 基于jQuery的Tree控件.支持XML,JSON,Html三种数据源.提供创建,重命名,移动,删除,拖"放节点操作.可以自己自定义创建,删 除,嵌套,重命名,选择节点 ...

  6. JQuery统一复写美化项目中所有radio单选按钮样式

    老项目要升级改版,对于分散在各页面的样式不好处理,怕有遗漏,尤其是优化input表单,修改其默认样式,接下来,我将给大家分享一下,我在项目中的总结. 效果 上代码: 1.简单搞一搞 CSS,此处代码有 ...

  7. 项目中lua(基础)

    关于项目中lua任务(某些没弄懂,但lua上耗费时间有点长了不看了) 这段时间看了lua语法和项目中lua应用 .在lua中注册c库,在lua5.2中好像都是注册c库,相当于在lua中定义一个tabl ...

  8. jQuery Validate验证（项目中使用的）

    大致结构是: <script type="text/javascript" src="<%=path %>/js/jquery-1.9.1.min.js ...

  9. NopCommerce开源项目中很基础但是很实用的C# Helper方法

    刚过了个五一,在杭州到处看房子,不知道杭州最近怎么了,杭州买房的人这么多,房价涨得太厉害,这几年翻倍翻倍地涨,刚过G20,又要亚运会,让我这样的刚需用户买不起,也买不到房子,搞得人心惶惶,太恐怖了,心 ...

随机推荐

  1. ContentProvider总结

    一.使用ContentProvider(内容提供者)共享数据 ContentProvider在android中的作用是对外共享数据,也就是说你可以通过ContentProvider把应用中的数据共享给 ...

  2. 大分享-hibernate,springmvc,easyui简要介绍

    近期公司一直在做项目,主要用到了springMVC,eseayui,hibernate几大框架.近一个月的时间,个人就目前自我知识给予分享. 很多公司使用mybatis产品,综合所述其最大优点是全SQ ...

  3. Consul Template的简单使用

    Consul Template的使用 1安装 地址 https://github.com/hashicorp/consul-template/releases wget https://release ...

  4. NSUrl的打印

    1转自 http://my.oschina.net/wangdk/blog/165554: NSURL *url = [NSURL URLWithString:@"http://www.ba ...

  5. XAF How to: 实现一个WCF Application Server 并配置它的客户端应用

    本主题描述了如何实现一个 WCF 中间层应用程序服务器及如何配置 XAF客户端连接到此服务器. 注意 本主题演示可以由解决方案向导自动生成的代码.执行操作时,如果你想要在现有的 XAF 解决方案中实现 ...

  6. <hr/> 水平线样式

    <hr style="width:490px;" /> <hr size=8 style="COLOR: #ffd306;border-style:ou ...

  7. js中对radio和checkbox是否选中的判断

    一.js判断checkbox 例如:<div class="checkbox" style="width: 150px;"> <label&g ...

  8. 从欧几里得距离、向量、皮尔逊系数到http://guessthecorrelation.com/

    一.欧几里得距离就是向量的距离公式 二.皮尔逊相关系数反应的就是线性相关 游戏http://guessthecorrelation.com/ 的秘诀也就是判断一组点的拟合线的斜率y/x ------- ...

  9. Spring中@Async注解实现“方法”的异步调用

    原文:http://www.cnblogs.com/zhengbin/p/6104502.html 简单介绍: Spring为任务调度与异步方法执行提供了注解支持.通过在方法上设置@Async注解,可 ...

  10. CSS 3 盒子属性

    #box1{ width: 100px;height: 40px; border: 1px solid black;(1)内容沾满盒子的处理方式 所有的都要添加前缀,以便更好的浏览器兼容  1,ove ...