一.什么是闭包?

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

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  2. Mysql常用数据类型

    Mysql常用数据类型 数字: 字符串: 时间:

  3. 初学画布canvas的chapter1

    ——这篇读后感是我阅读<写给Web开发人员看的HTML5教程>一书中的第5章画布后的小小看法,由于编程实力有限,很多效果病没有一一去实现,所以只是停留在纸上谈兵的阶段. 画布(canvas ...

  4. Oracle Form Data Entry Sample

    I shared a data entry example form here in this post for Oracle Forms beginner developers, so that t ...

  5. CSS基础介绍

    CSS介绍 CSS是指层叠样式表,CSS样式表极大的提高了工作效率 CSS基础语法 1. 首先选择一个属性 2. 选择了属性以后,用大括号括起来 3. 括号里面是对应的属性和属性值,如: select ...

  6. 《BI那点儿事》数据流转换——字词查找转换

    字词查找转换将从转换输入列的文本中提取的字词与引用表中的字词进行匹配,然后计算出查找表中的字词在输入数据集中出现的次数,并将计数与引用表中的此字词一并写入转换输出的列中.此转换对于创建基于输入文本并带 ...

  7. STM32学习笔记(七) ADC模数转换测电平(普通和DMA模式)

    嵌入式系统在微控制领域(温度,湿度,压力检测,四轴飞行器)中占据着重要地位,这些功能的实现是由微处理器cpu(如stm32)和传感器以及控制器共同完成的,而连接他们,使它们能够互相正常交流的正是本小节 ...

  8. MFC编程入门之十七（对话框：文件对话框）

    上一讲介绍的是消息对话框,本节讲解文件对话框.文件对话框也是很常用的一类对话框. 文件对话框的分类 文件对话框分为打开文件对话框和保存文件对话框,相信大家在Windows系统中经常见到这两种文件对话框 ...

  9. [Git] 怎么使用Git让代码回到以前的某个节点

    我们可以使某个文件回到以前的某个节点,也可以使整个文件夹下面的文件都回到以前的某个节点,下面只介绍某个文件的,全部的类似. 按步骤操作完成后本地你选中的文件会变成红色,此时的代码还是原来的代码,但是G ...

  10. python爬虫（1）

    了解python的基本语法后就可以开始了,边学边巩固. 学爬虫那什么是网络爬虫,以下是百度百科的定义:网络爬虫(又被称为网页蜘蛛,网络机器人, 在FOAF社区中间,更经常的称为网页追逐者),是一种按照 ...