针对jQuery添加插件$.extend与 $.fn.extend两种方法分析

首先确定jQuery扩展插件的常用的两种方式
1.第一种方式： `$.extend()` 扩展jQuery本身的方法函数或者说静态函数 直接用 $.funName();调用
$.extend({
    funName:function(){
     //...
    }
})

2. 第二种方式：$.fn.extend 扩展jQuery对象的方法

针对第一种方式：

1.  先理解下面的写法
function test(){
}
//在js中函数其实是函数对象 那么可以通过函数名给test函数添加属性和方法
test.age = 1;
test.sex = 'male';
test.alert = function(){
alert('aaaa');
};
//直接使用 函数名.属性 函数名.方法名() 的方法调用相关的属性和方法
console.log(test.age);
console.log(test.alert());//

2. 与上面的相同道理
那么$.funName = function(){}这种方法也就不难理解了。直接把方法添加到jQuery构造函数上。那么使用函数.函数名的方式就可以直接调用相关方法。

3.  针对下面的这种写法
$.extend({
  funName:function(){
  //...
  }
})

jquery专门写了extend方法来实现将funName追加到jQuery上。

————————————————————————————-

针对第二种情况：

针对jquery中源码的分析

针对这一段源码
jQuery.fn = jQuery.prototpe = {};
jQuery.fn 其实指向了jQuery原型对象。
所以说我们通过$.fn.funName = function(){};方法添加插件扩展，本质上相当于$.prototype.funNanme = function(){};,向原型对象添加方法。
原型对象的属性与方法，只有通过对象才能访问,在这里是jQuery对象。所以在使用这类插件时,需要$('div').funName()调用。