Question

我认为自己（充其量）是一个中级JavaScript家伙......当然......我想了解一些事情已经完成，所以我可以编写更好的代码。因此，我一直在寻找jQuery的内幕，试图更多地了解它如何完成某些事情。

例如：
jQuery处理IE和Opera通过执行以下操作按名称而不是ID返回项目的情况：

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

......好吧，这很容易！

但是，典型的jQuery代码链将一系列命令链接在一起：

$('#someElementId').fadeIn().css({ ...Some CSS Properties ... });

现在......我认为'链接部分在以下区域处理：

jQuery.extend = jQuery.fn.extend = function() { ... };

我正在梳理这个区域......我看到如何处理单个命令...但我没有看到WHERE或者链如何？命令是受管理的。所以我显然错过了一些东西。

所以我的问题是：

jQuery如何实现选择器的链接？

Answer 1

jQuery对象上的所有方法都将返回jQuery个对象。

在此特定示例中，您可以看到正在创建jQuery().find( selector )和jQuery( elem || [] )

Answer 2

我将尝试用一个例子来解释。对于此示例，您应该打开chrome developer console或firebug。

var $m = function() {
    return this;
};
$m.log = function(param) {
    console.log(param);
    return this;
};
$m.alert = function(param) {
    this.log('alerting: ' + param);
    alert(param);
    return this;
};
$m.log('start').alert('Sample message').log('end').log('success');

如您所见，每个函数都返回this，在此示例中引用$m。通过这种方式，我可以根据需要链接任意数量的方法。

Answer 3

根据你的评论：

这是来自此处的示例：http://en.wikipedia.org/wiki/Fluent_interface#JavaScript 附加评论

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);

Answer 4

我的理解是：Jquery函数在执行时返回对相关对象的引用，这允许您将操作链接在一起。因此，如果执行查找div的操作，该函数将返回一个引用，允许您立即将另一个操作链接到它的末尾。

Answer 5

使用返回此项; 返回父OBJECT

var myObject = {
  a: function(){
    alert('a');
    return this; 
    //this == myObject, so returning myObject means 
    //the next function in the chain will call myObject.___
  },
  b: function(){
    alert('b');
    return this;
  }
}
myObject.a().b();//alerts 'a' then alerts 'b'

jQuery如何完成命令的链接？

5 个答案: