再談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}