jQuery核心方法vs实用方法



jQuery方法大致分为两种类型;核心方法和实用程序方法

我猜他们叫它$ vs $()

谁能提供每种类型的一个例子,并强调差异。谢谢你。

(跳到TL;医嘱最后,如果你讨厌阅读,想要一个总结,那么如果你需要澄清我所说的内容,那么就回去阅读整篇文章

jQuery的精髓

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

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

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

核心和插件方法(我将简单地把它们称为"方法"从现在开始)是jQuery对象的成员函数($jQuery的别名,以减少类型,所以$()jQuery()是相同的)。这些方法提供了遍历、交互和操作页面上元素的方法。

方法如何工作

当您调用$()时,您将创建一个核心jQuery对象的实例,该实例包含到目前为止定义的所有方法。该对象中还包含对您选择、引用或创建的所有浏览器HTML元素的引用,这取决于您提供给$()的参数。因此,在一个方法中,您应该总是假设您正在处理一个元素集合,集合中有0到许多项。在大多数情况下,您的方法将以这样的方式开始:

$.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通过应用CSSdisplay:none使每个选定元素隐藏,因此它可以只返回this.each。下面是它大致的样子:

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

现在,对于例外。您可以使用一个方法从集合中的元素返回一个值。在这种情况下,不是返回一个jQuery对象,而是返回值。例如,$.fn.html将所有选定元素的HTML内容作为一个字符串返回。

因此,您可能会问,"好吧,但是为什么要为不返回值的方法返回另一个jQuery对象呢?"这样做是为了让开发人员可以在一个调用中将功能链接在一起。回到.my-selector的例子,假设您不仅想应用单击处理程序,而且还想将文本加粗。

你可以这样说:

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

但是,这太啰嗦了,而且在JavaScript中,每一行都要计算页面权重。由于所有这些方法都返回一个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;医嘱

$()指的是一个jQuery对象的实例,$.fn允许你在jQuery对象上添加或替换一个方法,$.yourFunctionNameHere允许你定义一个"静态"或"共享"实用程序函数来封装有用的功能,否则不会遵循jQuery实例模式。

我不确定是否corevsutility是比较两者的正确方法,但我将使用它。

一般来说,核心方法操作选定的jQuery对象。

// Loop through selected jQuery objects, operating on each
$('li').each(function(index) {
alert(index + ': ' + $(this).text());
});

工具方法不是直接操作选定的jQuery对象;而是简单地为开发人员提供某种形式的功能或实用程序。它类似于任何其他JavaScript函数。$允许它有一个jQuery已经熟悉的"伪命名空间"。

// Loop through an array of numbers
$.each([52, 97], function(index, value) { 
alert(index + ': ' + value); 
});

正如@神职人员所指出的,jQuery基础的这一章会更详细地解释它。

最新更新