zoukankan      html  css  js  c++  java
  • Jquery的扩展方法extend详解

    今天研究了下Jquery的扩展方法extend。

    1.extend(obj,item1,item2,item3...);

    这段代码的含义是将src1,scr2等所有项合并到obj对象中,但是同样存在一个问题,这样合并会修改到obj的整个结构。

    2.var result = $.extend({},item1,item2,item3...);

    这个方法巧妙地运用了extend的特性 将一个空对象与所有item合并,并通过返回值的形式获取到一个新的对象。如下所示:

    var result = $.extend({},{name:"zx",age:21},{name:"clt",sex:"man"});

    输出结果为{name:"clt",age:21,sex:"man"},由此我们可以看出在合并中, 如果存在相同的属性名,则后者会覆盖前者。

    3.接下来是我们通常在插件中会看到的,扩展jq类的静态方法。如下所示:

    $.extend({say:function(){alert("hello");}});

    这样就是将src合并到jquery的全局对象中,换句话说也就是扩展了整个jq类的静态方法,我们可以通过$.say()进行调用。

    举一反三,既然可以扩展jq类,自然也能扩展我们的自定义对象。

    例如:$.extend(obj,{say:function(){alert("hello");}});

    我们可以自定义一个obj对象,然后扩展他的say方法,通过obj.say()调用。

    4.$.fn.extend(say:function(){alert($(this).text());}})

    在jq源码中,$.fn = $.prototype,也就是jq类的原型链,该方法将src合并到jquery的实例对象中去,需要一个实例化的jq对象才可以调用,如下所示:

    通过$("#test").say()可以调用到扩展的say方法。

    5.var result=$.extend( true or false, {},
    { name: "zx", location: {city: "上饶",county:"USA"} },
    { last: "clt", location: {state: "江西",county:"China"} } );

    最后我们需要了解$.extend中的传参,第一个参数为ture or false,分别代表执行深拷贝 or 浅拷贝。结果如下所示:

    { name: "zx", location: {city: "上饶",county:"China",state:"江西"} ,last:"clt"}。

    当传入false时,代表执行浅拷贝,结果如下所示:

    { name: "zx", location: {state: "江西",county:"China"} ,last:"clt"}。

    通过观察结果,我们可以得到以下结论。当参数为ture时,即为深拷贝,当第一个对象的location与第二个location的值不一样时,前者会将后者中的值给覆盖,换而言之,当不同时,则会进行合并。

    当参数为false时,子项location属性相同时,后者location的属性值会将前者的值给完全覆盖。

  • 相关阅读:
    C#学习记录(一)
    C#学习记录(五)第一次上机实验
    C#学习记录(四)
    C#学习记录(三)
    统计代码行数
    夜深了
    写在岁末的烟花易冷
    c语言|博客作业02
    c语言I博客作业03
    设计模式之模板方法模式
  • 原文地址:https://www.cnblogs.com/myice/p/4103047.html
Copyright © 2011-2022 走看看