在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 
};