jQuery如何完成命令的链接? [英] How does jQuery accomplish chaining of commands?
问题描述
我认为自己(充其量)是一个中级JavaScript家伙......当然......我想了解一些事情已经完成,所以我可以编写更好的代码。因此,我一直在寻找jQuery的内幕,试图更多地了解某些事情是如何完成的。
I consider myself (at best) a mid-level JavaScript guy...and of course...I want to understand HOW some things are accomplished so I can write better code. As such, I've been looking under-the-hood of jQuery trying to uderstand it a little more about how certain things are accomplished.
例如:
jQuery处理IE和Opera按名称而不是ID返回项目的情况:
For example:
jQuery handles the case where IE and Opera return items by name instead of ID by doing the following:
// HANDLE: $("#id")
else
{
var elem = document.getElementById( match[3] );
// Handle the case where IE and Opera return items
// by name instead of ID
if ( elem && elem.id != match[3] )
return jQuery().find( selector );
// Otherwise, we inject the element directly into the jQuery object
var ret = jQuery( elem || [] )
ret.context = document;
ret.selector = selector;
return ret;
}
...好的,这很简单!
...okay that's easy!
但是一个典型的jQuery代码链将一系列命令链接在一起:
$('#someElementId').fadeIn().css({ ...Some CSS Properties ... });
现在......我认为'链接部分是在以下区域处理的:
Now...I 'think' the chaining portion is handled in the following area:
jQuery.extend = jQuery.fn.extend = function() { ... };
我正在梳理这个区域......我看到单身如何命令被处理...但我没有真正看到WHERE或如何管理命令链。所以我显然错过了一些东西。
I'm combing through this area...and I see HOW a single command is processed...but I don't really see WHERE or HOW a chain-of-commands are managed. So I am obviously missing something.
所以我的问题是:
- jQuery如何实现选择器的链接?
推荐答案
根据你的评论:
这是来自这里的例子: http://en.wikipedia.org/wiki/Fluent_interface#JavaScript
附加评论
This is from the example here: http://en.wikipedia.org/wiki/Fluent_interface#JavaScript With extra comments
var Car = function() {
var speed, color, doors;
this.setSpeed = function(speed) {
this.speed = speed;
**//Returns the reference to the calling `car` object**
return this;
};
this.setColor = function(color) {
this.color = color;
**//Returns the reference to the calling `car` object**
return this;
};
this.setDoors = function(doors) {
this.doors = doors;
**//Returns the reference to the calling `car` object**
return this;
};
};
// Fluent interface
**//Each method returns a reference to the object itself**
**//so the next method chain is refering back to the previous returned value**
**//ie - itself, the orginal object that started the call chain**
myCar = new Car();
myCar.setSpeed(100).setColor('blue').setDoors(5);
// Example without fluent interface
**// normal, non fluent style, where each method returns Void**
**// so you need to start with the object reference yourself each time**
myCar2 = new Car();
myCar2.setSpeed(100);
myCar2.setColor('blue');
myCar2.setDoors(5);
这篇关于jQuery如何完成命令的链接?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!