在jQuery中添加方法的困惑

Question

我想添加一個新的方法到jQuery，以便我可以做一些像$('#id').MyOwnFunc()。我的困惑是從不同的網站和堆棧溢出，我可以看到我可以使用以下兩種方法之一：通過直接建立在fn，也是一個方法

// #1 
jQuery.fn.MyOwnFunc = function() { 
    var o = $(this[0]) // It's your element 
    return this; // This is needed so others can keep chaining off of this 
}; 

// #2 
jQuery.fn.extend({ 
    MyOwnFunc: function() { 
     return this.each(function() { 
      this.checked = true; 
     }); 
    }, 
}); 

因此，我們可以通過上面的方法都建立在jQuery的新方法使用fn.extend所以我的困惑是：

1. 我的理解錯了嗎？
2. 如果否，兩者都可以使用，那麼當我們已經有選項1時，爲什麼我們有fn.extend()？
3. 哪個更好？

請好心解釋一下，因爲我已經瀏覽了很多網站，但不明白你爲什麼有兩種方法？

Answer 1

我理解錯了嗎？

沒有

如果沒有和兩者都可以使用，然後我們爲什麼fn.extend（）的時候，我們已經可以選擇1？

這是因爲extend()是jQuery method它可以讓你合併的任何對象數量的屬性。在這種情況下，您將使用新代碼擴展現有的$.fn對象，該對象包含可應用於選擇器的所有方法。 extend()方法不是特定於插件創作。

哪個更好？

兩者都沒問題。我的首選是你的第一個方法，即。而不使用extend()，因爲它更簡潔。

Answer 2

在JavaScript中，通常有不止一種方法來做同樣的事情。

儘管如此，這兩件事情是不一樣的。

jQuery.fn用於添加的jQuery插件，讓您可以稍後$('#something').myCoolPlugin();

jQuery.fn.extend可以讓你在同一時間添加多個插件，而無需做多jQuery.fn調用，如：

jQuery.fn.extend({ 
    coolPlugin1: function() { 
     // cool stuff 
    }, 
    coolPlugin2: function() { 
     // other cool stuff 
    } 
}); 

優於：

jQuery.fn.coolPlugin1 = function() { 
    // cool stuff 
}; 

jQuery.fn.coolPlugin2 = function() { 
    // other cool stuff 
};