zoukankan      html  css  js  c++  java
  • Jquery和Javascript 实际项目中写法基础-闭包 (2)

    一.什么是闭包?

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

  • 相关阅读:
    BZOJ4644 经典傻逼题 (线段树分治+可撤销线性基+Xor)
    CF678E Another Sith Tournament(思维+dp)
    HDU 6511
    HDU6513 Reverse It(容斥+Cnk)
    一篇最浅显易懂的Splay讲解(试问谁能比我的更易懂
    [CTSC2016]时空旅行 (线段树分治+凸壳
    关于dsu on tree 和一些例题 CF 741 D
    关于区间开根号+区间询问
    [FJOI2015]火星商店问题 --线段树分治+可持久化trie
    线段树 关于pushup的技巧
  • 原文地址:https://www.cnblogs.com/zhiyin/p/5725563.html
Copyright © 2011-2022 走看看