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

在我的博客中，曾经写过一篇关于JQuery插件的文章  https://www.cnblogs.com/wphl-27/p/6903170.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}