jquery扩展函数详解(我的人生颠覆)

发布时间:2013-08-16 18:47:00作者:左潇龙阅读(1029 )评论(1)

              作者:zuoxiaolong8810(左潇龙),转载请注明出处,特别说明:本博文来自博主原博客,为保证新博客中博文的完整性,特复制到此留存,如需转载请注明新博客地址即可。 

              上次分析了jquery的源码,分享了jquery的核心框架架构,这一次我们抛开源码,只关注功能,来看一下jquery的扩展函数的使用到底有何神奇之处。

               为了看起来方便,我将所有的讲解都附在了代码中,这样看起来会更直观,由于我将多种测试放在一个页面当中,所以会有很多alert弹出,这里各位在测试的时候,可以将其中的功能分开来放,这样可以更加直观的看到效果。

               好了,现在就看一下jquery的扩展函数与我的人生吧。

    <html>
    <head>
    <script src="jquery-1.8.2.js" type="text/javascript"></script>
    <script type="text/javascript">
        /*
         *jquery的extend方法的原版形式,jquery.extend(deep,target,source1,source2......)以及
         *jquery.fn.extend(deep,target,source1,source2......),下面分别演示两个函数的区别与相同之处。
         *参数详解:
         *deep:boolean类型,意为是否要深度拷贝
         *target:Object类型,意为要扩展的目标对象
         *source1:Object类型,意为被扩展的资源对象
         *source2....:与source1相同,理论上可以有无限个
        */
        //此处扩展的是$(即jQuery,以后都用$),当只有一个Object类型参数的时候,此方法扩展$。
        $.extend(
          {
            testExtend:function(){
                alert("extend success");
            }
          }
        );
        //此处扩展的是$()(即jQuery对象,以后都用$()),当只有一个Object类型参数的时候,此方法扩展$()。
        $.fn.extend(
          {
            testFnExtend:function(){
                alert("extend fn success");
            }
          }
        );
        //此处将成功弹出
        $.testExtend();
        //此处将报错,所以我们用try{}catch{}包围起来看错误信息,将提示错误。
        try{
            $("testDiv").testExtend();
        }catch(e){
            alert(e.toString());
        }
        //反过来也是一样,此处将成功弹出
        $("testDiv").testFnExtend();
        //此处将报错,所以我们用try{}catch{}包围起来看错误信息,将提示错误。
        try{
            $.testFnExtend();
        }catch(e){
            alert(e.toString());
        }
        
        //下面将演示不扩展$或者$()的情况,即我们设定一个目标对象
        
        var target = {};//目标对象
        
        //此处target将作为目标对象扩展
        $.extend(target,
          {
            testExtend:function(){
                alert("extend success");
            }
          }
        );
        //扩展成功后,target具有testExtend方法
        target.testExtend();
        
        //下面我们看下两个方法的作用是否相同
        
        var targetFn = {};//目标对象
        
        //此处targetFn将作为目标对象扩展
        $.fn.extend(targetFn,
          {
            testExtend:function(){
                alert("extend success");
            }
          }
        );
        //targetFn被成功扩展,扩展成功后,targetFn具有testExtend方法,说明指定了target,二者效果相同,用哪个都一样
        targetFn.testExtend();
        
        /*最后我们来看下深度拷贝的含义,深度拷贝用文字来解释的意思是,当被扩展的属性如果也是一个对象的时候,那么也会
         *将该属性作为对象来扩展,而不会覆盖属性的对象中原有的属性。
         *这个文字解释略显苍白,我们来看一下实际的效果会如何。
        */
        //首先我们需要一个对象,这个对象的某一个属性又是一个对象。
        
        //为了便于理解,这次我们采用现实当中的例子,我将为技术献身,以下纯属虚构。
        var me = {
            name:"zuoxiaolong",
            sex:"man",
            //注意,这里我的女朋友,我的属性,也是一个对象
            girlFriend:{
                name:"secret",
                sex:"woman"
            }
        };
        
        //下面首先采用非深度拷贝的方式对我进行扩展,此处不再区分$.extend和$.fn.extend,因为二者在有目标对象的情况下,效果相同
        $.extend(me,
            {
                work:"programmer",//扩展我的工作为程序员
                girlFriend:{
                    work:"rich"//扩展我女朋友的职业为富婆,这是不是若干人群的梦想
                }
            }
        );
        
        //我们来看下非深度拷贝,扩展以后的结果,我的生活会变成什么样子
        alert("name:" + me.name);
        alert("sex:" + me.sex);
        alert("work:" + me.work);
        //特别注意我的女朋友被扩展的结果
        alert("girlFriend.name:" + me.girlFriend.name);
        alert("girlFriend.sex:" + me.girlFriend.sex);
        alert("girlFriend.work:" + me.girlFriend.work);
        /*
         *是不是发现我女朋友的名字和性别都未知了,这是因为在非深度拷贝的情况下,如
         *果属性为对象,将会被扩展的属性值直接覆盖掉,也就是原来的属性name和sex会被直接覆盖,即name和sex会被work覆盖
         */
         
        //我当然不能让我的生活如此悲催,一个连性别都不知道的富婆如何做我的女友,我们来看下神奇的深度拷贝
        
        //这里我们需要重新定义me这个对象,因为之前已经被扩展了,这里要将我的生活重新来过
        me = {
            name:"zuoxiaolong",
            sex:"man",
            girlFriend:{
                name:"secret",
                sex:"woman"
            }
        };
        //注意,增加了第一个参数,deep为true,即深度拷贝
        $.extend(true,me,
            {
                work:"programmer",//依然扩展我的工作为程序员
                girlFriend:{
                    name:"chaolu",//当有相同属性名的时候会被覆盖
                    work:"manager"//当有多出的属性名的时候会被扩展,扩展我女朋友的职业为经理
                }
            }
        );
        //我们来重新查看一下扩展后的对象,看我的生活是否恢复正常
        alert("name:" + me.name);
        alert("sex:" + me.sex);
        alert("work:" + me.work);
        //特别注意我的女朋友被扩展的结果
        alert("girlFriend.name:" + me.girlFriend.name);
        alert("girlFriend.sex:" + me.girlFriend.sex);
        alert("girlFriend.work:" + me.girlFriend.work);
        //我的生活已经恢复正常,一切都完美了
        
        //以上为属性为对象时的情况,那么当属性为数组时,则会以数组的下标进行覆盖和扩展
        //文字解释依旧苍白,我们来看例子,我将依然献身给技术
        me = {
            name:"zuoxiaolong",
            sex:"man",
            //这里注意,我的好朋友是一个数组
            goodFriends:["xubo","xiaochen","xiaoqiang"]
        };
        
        //下面我们来看下深度拷贝对数组的影响
        
        //第一个参数为true,深度拷贝
        $.extend(true,me,
            {
                work:"programmer",//依然扩展我的工作为程序员
                goodFriends:["shiqiang","andi","liulei"]
            }
        );
        //我的工作将被正常扩展
        alert("name:" + me.name);
        alert("sex:" + me.sex);
        alert("work:" + me.work);
        //主要关注我的好朋友的变化,这里或许有的人会以为在深度拷贝的情况下,我的好朋友将成为六个人,我们看结果
        alert("goodFriends:" + me.goodFriends);
        
        //结果显示我原来的三个好朋友没有了,这里解释下为何在深度拷贝的情况下,会覆盖我原来的朋友,刚才我已经解释过
        //对数组的深度拷贝会以下标进行判断,所以说虽然是深度拷贝,但是后面扩展的goodFriends[0]和前面定义的goodFriends[0],将
        //会被认为是同一个属性名,所以依据同名替换的原理,这里我原来的朋友将会被替换。
        
        //你或许会说,那能不能将六个人都扩展为我的好朋友。答案是否定的,这样直接扩展,无论如何,前三个位置都将会被扩展的头三个好朋友覆盖。
        //人生总是不完美的,有了新的好朋友,旧的朋友就容易被遗忘,但是只要你努力,你可以同时拥有,就像下面这样
        me = {
            name:"zuoxiaolong",
            sex:"man",
            //这里注意,我的好朋友是一个数组
            goodFriends:["xubo","xiaochen","xiaoqiang"]
        };
        var newGoodFriends = ["shiqiang","andi","liulei"];
        var nowGoodFriends = me.goodFriends.concat(newGoodFriends);//将原来的好朋友与新的好朋友努力连接在一起
        
        //第一个参数取消,非深度拷贝,因为我们已经复制了前三个好朋友,虽然会被覆盖,但我们已经保存
        $.extend(true,me,
            {
                work:"programmer",//依然扩展我的工作为程序员
                goodFriends:nowGoodFriends
            }
        );
        //我的工作将被正常扩展
        alert("name:" + me.name);
        alert("sex:" + me.sex);
        alert("work:" + me.work);
        //再次关注我的好朋友的变化,我们看结果
        alert("goodFriends:" + me.goodFriends);
        //总结,人生有得到就有失去,但有些我们可以通过努力留住很多
        
        //从以上结果我们可以看出,当属性为数组时,如果source属性中数组的长度大于target目标对象属性中数组的长度,那么无论是否深度拷贝,
        //都将彻底覆盖原有的数组元素,那么如果source属性中数组的长度小于target目标对象属性中数组的长度,是否深度拷贝是否会影响结果呢。
        //答案是肯定的,当出现上述情况时,如果非深度拷贝,将直接覆盖原有属性的数组,如果为深度拷贝,则会留下原有数组多出的元素。
        //下面看示例,依旧恢复我的生活
        me = {
            name:"zuoxiaolong",
            sex:"man",
            //这里注意,我的好朋友是一个数组
            goodFriends:["xubo","xiaochen","xiaoqiang"]
        };
        //注意,此处为非深度拷贝,这时将覆盖原有数组
        $.extend(me,
            {
                work:"programmer",//依然扩展我的工作为程序员
                goodFriends:["shiqiang","andi"]//此处注意,这里将要扩展的数组长度小于原来的长度
            }
        );
        //我的工作将被正常扩展
        alert("name:" + me.name);
        alert("sex:" + me.sex);
        alert("work:" + me.work);
        //再次关注我的好朋友的变化,我们看结果,是否会将原有的好朋友全部覆盖
        alert("goodFriends:" + me.goodFriends);
        
        //结果显示,非深度拷贝,将直接覆盖原有的数组,我的好朋友开始减少,我们来看深度拷贝会出现什么情况
        
        //依旧恢复我的生活
        me = {
            name:"zuoxiaolong",
            sex:"man",
            //这里注意,我的好朋友是一个数组
            goodFriends:["xubo","xiaochen","xiaoqiang"]
        };
        //注意,此处添加深度拷贝deep为true,这时将覆盖原有数组的相同部分,多余部分保存
        $.extend(true,me,
            {
                work:"programmer",//依然扩展我的工作为程序员
                goodFriends:["shiqiang","andi"]
            }
        );
        //我的工作将被正常扩展
        alert("name:" + me.name);
        alert("sex:" + me.sex);
        alert("work:" + me.work);
        //再次关注我的好朋友的变化,我们看结果,是否会留下多余的部分的好朋友,也就是这位叫"xiaoqiang"的朋友
        alert("goodFriends:" + me.goodFriends);
        
        //从结果中看到,前两个好朋友被后面的扩展所替代,但是在深度拷贝下,最后的第三个好朋友将会被留存
        //从这里我们看出,当source属性中数组的长度小于target属性中数组的长度时,是否深度拷贝则会影响结果,反之则不会影响。
    </script>
    </head>
    <body>
        <h2 id="testDiv">jquery extend test</h2>
    </body>
    </html>

                 jquery将我的人生颠覆好几次,我们总要来一下人生的总结,下面我们来整体的看一下这两个扩展函数:

                 1.当第一个参数为boolean类型时,将指示是否深度拷贝。

                 2.当参数中只有一个Objec类型的时候,$.extend扩展的是$,$.fn.extend扩展的是$()。

                 3.当参数中有两个或两个以上的Object类型的时候,第一个Object类型的参数将作为target被扩展,而后面所有的Object类型的参数的属性都将被添加到target当中。
                 总结下深度拷贝:

                 1.当出现属性为对象时,如果选择深度拷贝,则会覆盖同名的属性,扩展多出的属性。否则,则直接覆盖整个对象。

                 2.当出现属性为数组时,如果选择深度拷贝,则会覆盖同索引的属性,如果有多出的属性,则保留。否则,则直接覆盖整个数组。

     

     


    版权声明:本文版权归作者(左潇龙)所有,欢迎转载。但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。

    3
    精彩
    0
    感动
    0
    搞笑
    1
    开心
    0
    愤怒
    0
    无聊
    0
    灌水
    0
    惊讶
#1楼     时间:2015-04-16 10:49:00      来源:张万帆
博主的讲解很形象易懂,界面风格也很好,作为一名工作不到一年的小程,对博主十分膜拜啊。
发表评论

站内搜索

最新评论