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