javascript - jQuery核心方法与实用程序方法

Closed. This question is off-topic。它当前不接受答案。












想要改善这个问题吗？ Update the question，所以它是用于堆栈溢出的on-topic。

9年前关闭。



Improve this question




jQuery方法被广泛称为2种类型。核心方法和实用程序方法

我猜他们称之为$ vs $()

有人可以提供每种类型的示例并强调不同之处。
谢谢你。

最佳答案

(跳到 TL；如果您讨厌阅读并想要摘要，请最后输入DNR ，然后如果需要我说的清楚，请回头阅读整个内容)

jQuery的本质

对于jQuery新手来说，第一个也是最令人困惑的事情是jQuery对象是什么，以及它为何以这种方式工作。 jQuery的体系结构旨在允许开发人员使用简单明了的语法在一个语句中选择所有相关元素，然后进行交互，然后对其进行操作，而不必担心不同浏览器的工作方式之间的陷阱和警告。因此，如果我想将事件处理程序附加到具有特定CSS类的页面上的所有链接，我希望看起来像$('a.my-selector').click(function() { /* my handler here */ });的代码，而不是看起来像document.body的所有子元素的怪兽，请检查它是否是 anchor 元素与my-selector类一起使用，如果是的话，则以特定于该浏览器的方式附加所需的处理程序，并为该元素的子元素递归调用自身。

什么是核心方法和什么是插件方法

核心和插件方法是相同的，除了在jQuery脚本中定义了核心方法，并且您或其他开发人员定义了插件来扩展或增强jQuery的核心功能。

核心和插件方法(从现在开始，我将它们简称为“方法”)是属于jQuery对象的函数($是jQuery的别名，以减少输入，因此$()和jQuery()相同) 。这些方法提供了遍历，与页面上的元素交互和操纵页面上的元素的方法。

方法的工作方式

调用$()时，您将创建核心jQuery对象的实例，该实例具有到目前为止已定义的所有方法。此对象中还包含对您选择，引用或创建的所有浏览器HTML元素的引用，具体取决于您提供给$()的参数。因此，在一种方法中，您应始终假定您正在使用元素集合，且该集合中的项数为零。在大多数情况下，您的方法将从以下内容开始:

$.fn.myPlugin = function() {
  // `this` is the jquery object. the next line iterates over each element currently
  // in the collection and invokes the specified function against it.
  return this.each(function() {
     // within _this_ function, `this` is a reference to the current element
     // here, you can interact with or manipulate the element to whatever
     // ends required by your plugin.
  });
};

请注意，$.fn只是$()对象的prototype的别名。因此，$.prototype和$.fn是同义词。 fn/prototype只是JavaScript的一种让您在对象上添加或替换方法的方法。

方法应该返回什么？

除了我将在稍后说明的异常外，方法应返回生成的jQuery对象。结果是什么意思？如果该方法遍历或过滤当前元素，则应返回包含这些新元素的jQuery对象。例如:$.fn.filter接受您选择的原始元素，然后删除与您指定的选择器不匹配的所有元素。例子:

$('a').filter('.my-selector'); // finds all anchor tags on the document, then removes any that don't have the class `my-selector`.

如果该方法仅适用于某些行为，则它应仅返回jQuery中的当前元素(在这种情况下，仅返回this.each的结果是最简单的，如我上面所示)。例如:$.fn.hide通过应用CSS display:none来隐藏每个选定的元素，因此它可以只返回this.each。大致如下所示:

$.fn.hide = function() {
   return this.each(function() {
      $(this).css({'display':'none'});
   });
}

现在，异常(exception)。您可能有一个从集合中的元素返回值的方法。在这种情况下，可以不返回jQuery对象，而可以返回值。例如，$.fn.html将所有选定元素的HTML内容作为一个字符串返回。

因此，您可能会问:“好，但是为什么不为不返回值的方法返回另一个jQuery对象呢？”。您这样做是为了使开发人员可以在一个调用中将功能链接在一起。回到.my-selector示例，假设您不仅要应用单击处理程序，而且还希望使文本变为粗体。

你可以这样说:

var myLinks = $('a.my-selector');

myLinks.click(function() { /* handle click */ });
myLinks.css({'font-weight':'bold'});

但是，这非常冗长，在JavaScript中为every line counts against your page weight。由于所有这些方法都返回一个jQuery对象，因此您可以在一条语句中链接调用:

$('a.my-selector').click(function() { /* handle click */ }).css({'font-weight':'bold'});

更简洁，对不对？

实用程序功能

实用程序功能是包含常用功能的静态或共享功能。如上所述，它们只在普通jQuery模式之外工作，因为它们仅存在于封装一些有用且可重用的逻辑中。他们可以接受所需的任何参数，然后返回所需的任何参数。例如，$.isArray的用法如下:

var myArray = [];

alert($.isArray(myArray)); // displays true

它的定义大致如下:

$.isArray = function(o) {
 // check if o is array and return true or false
};

现在，您可以像这样轻松地通过“老派” JavaScript方式进行定义:

function isArray(o) {
   // check if o is array and return true or false
}

此外，您可能会问将它附加到$的好处是什么。这样做的原因是为了防止开发人员，其他脚本甚至其他版本的jQuery定义的同名函数被覆盖(是的，如果确实需要，您可以在页面中包含多个版本的jQuery，但这是另一个故事)。

TL； DNR
$()指的是jQuery对象的实例，$.fn允许您在jQuery对象上添加或替换方法，$.yourFunctionNameHere允许您定义“静态”或“共享”实用程序功能以封装有用的功能，否则这些功能将不遵循jQuery实例模式。

关于javascript - jQuery核心方法与实用程序方法，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/9684433/