jQuery开发自定义插件 $.extend()与$.fn.extend()

jQuery extend()和jQuery.fn.extend()

jQuery提供两个用于封装扩展的方法:

1.$.extend(); 扩展jQuery类方法，即jQuery全局方法 （在全局可直接调用，如$.myFun(); myFun为自定义的方法）

2.$.fn.extend();扩展jQuery实例的成员方法 （如用来扩展一个input框的方法，$.fn = $.prototype，原型）

 

认识$.extend 

$.extend 用法：jQuery.extend( target [, object1 ] [, objectN ] )

它的含义是将object1，object2，object3...合并到target中，生成新的target并返回

如果只想获取到object1，object2，object3...合并后的集合，那么target直接给一个空的对象即可

如：$.extend({},object1,object2,object3...)

使用技巧： 

1.如果合并的集合中存在重复的参数名称，那么后面的会覆盖前面的

var obj1 = {
    name : 'Mary',
    age  : '18'
};

var obj2 = {
    name : 'Lily',
    sex  : 'Female'
}; 

var newObj = $.extend({},obj1,obj2);

//newObj最终结果
{
   name : 'Lily',
   age  : '18' ,
   sex  : 'Female'
} 　　　　

2.省略dest参数

extend方法中的target是可以省略的，如果省略了，则该方法就只能有一个object参数，而且是将该object合并到调用extend方法的对象中去。有点绕，上例子更明白些。

$.extend(src)

该方法就是将obj合并到jQuery的全局对象中去，如

$.extend({
    hello:function(){
        alert('hello!');
    }
} 

//全局可调用
$.hello();　　

3.重载原型

$.extend(boolean,target,obj1,obj2,obj3...)

与前面用法不同的是多了一个boolean参数，boolean 代表是否进行深度拷贝

例子：

var obj1 = {
    name  : 'John',
    score : {
　　　　math :'100',
　　   englisth':'99'
　　 }
};

var obj2 = {
　　age   : '18',
　　score : {
　　　 music   : '66',
　　　 history : '88'
　　}
};

var result = $.extend(true,{},obj1,obj2);

//boolean为true时result最终结果（深度拷贝）
result = {
    name  : 'John',
    age   : '18',
    score : {
       math    : '100',
       english : '99',
       music   : '66',
       history : '88'
　　}
}

//boolean为false时result最终结果（非深度拷贝）
result = {
    name  : 'John',
    age   : '18',
    score : { 
       music   : '66',
       history : '88'
    }
}
//因为obj1，obj2都有score参数，所以obj2会覆盖掉前面obj1的score值

　　

认识$.fn.extend

$.fn.extend 用法:$.fn.extend(object)

含义：把对象挂载到jQuery的prototype属性，来扩展一个新的jQuery实例方法，为jQuery实例添加"成员方法", jQuery实例可以直接使用该函数方法。

jQuery.fn.extend = jQuery.prototype.extend

你可以拓展一个对象到jQuery的prototype里去

(function( $ ){
    $.fn.tooltip = function( options ) {
    };
    //等价于
    var tooltip = {
        function(options){
    }
    };
    $.fn.extend(tooltip) = $.prototype.extend(tooltip) = $.fn.tooltip
})(jQuery);

　　

$.extend() 与 $.fn.extend()两者的区别

1.两者调用方式不同：

   jQuery.extend()      一般由传入的全局函数来调用，主要是用来拓展个全局函数，如$.init()，$.ajax();

   jQuery.fn.extend()  一般由具体的实例对象来调用，可以用来拓展选择器，例如$.fn.each();

2.两者的主要功能作用不同：

   jQuery.extend(object); 为扩展jQuery类本身，为自身添加新的方法。

   jQuery.fn.extend(object);给jQuery实例对象添加方法

3.大部分插件都是用jQuery.fn.extend()