再谈JQuery插件$.extend(), $.fn和$.fn.extend()

在个人博客中，曾经写过一篇关于JQuery插件的文章  http://www.javashuo.com/article/p-tshdyqnu-u.html

今天看一个项目的代码时，看到使用JQuery插件部分，我因而又仔细看了几篇文章，对JQuery插件有了更加深入的理解，特记录以下:

咱们都知道JQuery中的一个给DOM中元素设置CSS的方法，很简单

$("div").css("color","red");

上面这个方法，能够为DOM中的div元素设置css样式。 咱们可能历来没有想过，这个在JQuery内部是怎样实现的呢，咱们有没有可能仿照它的内部实现，去实现咱们本身自定义的方法

好比咱们能够本身实现一个ourFunc(...), 而后也能够这样用 $("div").outFunc(....)  答案是能够的，这个答案就是 JQuery插件

这个JQuery默认已经提供了的方法css, 其实在JQuery内部就是用JQury插件$.fn来实现的。因此一样的道理，咱们也能够本身写方法添加到$.fn上，而后就能够依葫芦画瓢来使用了:  --看下面的例子

$.fn.setColor = function()
{
    this.css("color", "blue");
   
    console.log(this instanceof jQuery);  //true

};

这里，咱们定义了一个JQuery插件setColor, 如今咱们能够像使用JQuery中默认提供的css方法来同样使用它

$("div").setColor();

咱们在来看setColor的内部实现, 咱们会发现内部用了this, 而从下一个语句console.log咱们能够看出，this就是JQuery对象，而不是DOM对象，因此它才能够直接使用JQuery内部的方法(JQuery插件方法)css()

那么咱们可能会想，有时候咱们搞不清楚在JQuery插件方法内部的this是否是JQuery对象，咱们为了安全起见，用$(this)能够么，答案是彻底能够的，其实在这里，this,$(this),$($(this))..无论嵌套多少层，都是同样的。 具体缘由这里就不深究了

反正你就记住 在插件的范围内，this 关键字表明了这个插件将要执行的jQuery对象，而不是原生的DOM对象

 

上面的内容，咱们讲到了$.fn, 经过$.fn.myFunc()的方式来定义JQuery插件方法 myFunc()

接下来，咱们看看JQuery中的$.extend()

基于我之前项目中对$.extend()的使用和认识，它的使用应该是这样的 

$.extend(target, object1, [objectN])  => 即用一个(object1)或者多个(object1,..objectN)其余对象来扩展一个对象(target), 而后返回被扩展的对象

举个例子以下：

var basicInfo = {name: Mike, age: 28, gender: male};
var additionInfo = {name: Luke, age: 32, company: advent};

$.extend(basicInfo, additionInfo);

//结果
basicInfo == {name: Luke, age: 32, gender: male, company: advent}