jQuery中的extend方法

最近在研究jQuery插件的时候,发现很多的插件里面都用到了extend方法，在这里我们就一起来研究一下这个方法。

定义和用法：
jQuery.extend() 函数用于将一个或多个对象的内容合并到目标对象。

注意：
1. 如果只为$.extend()指定了一个参数，则意味着参数target被省略。此时，target就是jQuery对象本身。通过这种方式，我们可以为全局对象jQuery添加新的函数。
2. 如果多个对象具有相同的属性，则后者会覆盖前者的属性值。

语法：

$.extend( target [, object1 ] [, objectN ] )
//指示是否深度合并
$.extend( [deep ], target, object1 [, objectN ] )

这里写图片描述

第一种引用场景：实现静态方法，可以为jQuery对象添加方法。

$.extend(target)表示为jQuery类本身添加静态方法。

<!--引入jQuery文件-->
<script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>
<script>
    //入口函数
    $(function(){
        //一定要注意extend里面是对象
        $.extend({
            min: function (a, b) {
                return a < b ? a : b;
            },
            max: function (a, b) {
                return a > b ? a : b;
            }
        });

        $.min(4,5);  //结果是4

        $.max(5,6);  //结果是6

        //会报错，这个方法只有jQuery本身采用才有效，实例化的对象是继承不了的
        $('#box').min();

    })
</script>

第二种场景：这里这个方法主要用来合并，将所有的参数项都合并result中，并返回result，但是这样就会破坏result的结构。

//语法：result对应的是target,item1对应是对象1.....
extend(result,item1,item2…..)

例如：

<script>
    $(function () {
        var object1 = {
            apple: 0,
            banana: { weight: 52, price: 100 },
            cherry: 97
        };
        var object2 = {
            apple:10,
            banana: { price: 200 },
            durian: 100
        };
        // 将 object2 递归合并到 object1中
        $.extend(object1, object2 );
        console.log(object1);
    })
</script>

object1的输出结果是：
这里写图片描述

我们发现object1对象里面的apple的值发生了改变，原来是0现在是10；原来object2里面的apple值覆盖了object1里面apple的值。如果多个对象具有相同的属性，则后者会覆盖前者的属性值。

第三种应用场景：Extend方法还有带bool型参数的重载。bool型参数为true表示深拷贝，为false时表示浅拷贝。

    var object1 = {
        apple: 0,
        banana: { weight: 52, price: 100 },
        cherry: 97
    };
    var object2 = {
        banana: { price: 200 },
        durian: 100
    }; 
    // 将 object2 递归合并到 object1中
    $.extend( true, object1, object2 );
    //输出结果：
    {"apple":0,"banana":{"weight":52,"price":200},"cherry":97,"durian":100}

当参数为ture时，即为深拷贝，当子项item1中的子项有与item中的子项相同属性的值不一样时，item1中子项的值会将item子项中的值给覆盖，当子项item1的属性跟item中的属性不同时，会与item进行合并。

第四种应用场景:我们发现上面的方法都会破坏掉原来object1的结构，为了不破坏原有的结构，很多插件在书写的时候都会在前面添加一个{}空对象，这样两者合并内容会覆盖掉这个空对象。

extend({},item1,item2,……)
extend(bool,{},item1,item2….)

举例：在滑动条插件中作者的处理方法：

var option = {
        color: 'deepskyblue',
        width: '400px',
        progress: 0.3,
        handleSrc: 'img/slider_handle.png',
        isCustomText: false
    };

var defaults = {
        width: '400px',
        handleSrc: '../Images/slider_handle.png',
        progress: 0.3,
        isCustomText: false
    };

//作者这样写就将两个对象合并为一个新的对象，并存储赋值给setting
//关于作者为什么这样写两个一模一样的对象，我们后面继续研究
var settings = $.extend({}, defaults, options);

最后一种应用场景： $.fn.extend(item) 上边提到的$ .extend(item)说是为Jquery类添加了静态方法，那么这里的$.fn.extend(item)就是为每一个实例添加一个实例方法了。

//语法：
$.fn.extend(item)
//或则
$.prototype.extend(item)

举例：
//需求：当用户在输入框里输入内容的时候，我就让输入框里的内容在控制台显示出来。

<script>
    $(function(){
        $.fn.extend({ //里面放的是对象
           logTextValue : function() {
               $(this).on('click',function(){
                   console.log($(this).val());
               });
            }
        });

        //jQuery实例化的对象调用这个方法
        $('#txt').logTextValue();
    });

</script>

总结：如果想开发插件，那么extend方法很重要。

jQuery中的extend方法

猜你喜欢