我无法理解jQuery链是如何工作的

I am not able to understand how jQuery chaining works.

我无法理解jQuery链是如何工作的。

jQuery("div").attr("id", "_id")
    .hide()
    .show();

I did something like chaining, but I'm not sure if it's the same logic that jQuery uses.

我做了类似链接的事情，但我不确定它是否与jQuery使用的逻辑相同。

var fun = (function (parma) {
return function () {
    return {
        start: function () {
            console.log("start");
            return this;
        },

        mid: function () {
            console.log("mid");
            return this;
        },

        last: function () {
            console.log("last");
            return this;
        }
    }
}

})();

}）（）;

// Working
fun().start()
    .mid()
    .last();

5 个解决方案

#1

If the return value of a function is an object that has a method, you can call that method immediately. Simple as that.

如果函数的返回值是具有方法的对象，则可以立即调用该方法。就那么简单。

Since you're returning this, you're returning the same object that the previous method was called on. That means you're returning an object with all the same methods.

因为你要返回这个，所以你返回的是调用前一个方法的同一个对象。这意味着您将使用所有相同的方法返回一个对象。

Think of it this way:

想一想：

var f = {
    foo: function() {
             console.log("foo");
             return b;
         }
};

var b = {
    bar: function() {
             console.log("bar");
             return f;
         } 
};

Here we have two objects.

这里我们有两个对象。

The f object has a method called foo that returns the b object.
f对象有一个名为foo的方法，它返回b对象。
The b object has a method called bar that returns the f object.
b对象有一个名为bar的方法，它返回f对象。

Because of this, after calling foo, we can call bar, and vice versa.

因此，在调用foo之后，我们可以调用bar，反之亦然。

f.foo().bar().foo().bar(); // etc

But because f doesn't have bar and b doesn't have foo, we can never call the same method twice.

但是因为f没有bar而b没有foo，所以我们永远不能两次调用相同的方法。

But what if we only had one object, that had both methods, and both methods always returned the same original object?

但是如果我们只有一个对象，有两个方法，并且两个方法总是返回相同的原始对象呢？

var fb = {
    foo: function() {
             console.log("foo");
             return fb;
         },
    bar: function() {
             console.log("bar");
             return fb;
         }
};

Now we're always returning an object that has both the foo and bar methods, so we can call either method.

现在我们总是返回一个同时具有foo和bar方法的对象，因此我们可以调用任一方法。

fb.foo().bar().bar().bar().foo().foo().bar();

So now the only real difference is that we are returning fb instead of this, but it doesn't matter since they're the same object. The code above could do return this; and it would behave the same.

所以现在唯一真正的区别是我们正在返回fb而不是这个，但它并不重要，因为它们是同一个对象。上面的代码可以返回这个;它会表现得一样。

It would matter if you wanted to create several instances of the object, but that's a question of object orientation techniques, not method chaining.

如果你想创建对象的几个实例，这很重要，但这是一个面向对象技术的问题，而不是方法链。

#2

The return on every function is a jQuery object. Each jQuery object will have the reference to all the function such as show/hide and so you can simply write

每个函数的返回值都是一个jQuery对象。每个jQuery对象都将引用所有函数，如show / hide，因此您可以简单地编写

jQuery("#myDiv")         //returns a jQuery object 
    .attr("id", "_id")   //sets the ID and returns the jQuery object
    .hide()              //Hides the element with ID myDiv and returns jQuery object
    .show();             //show the element with ID myDiv and returns jQuery object

#3

Think of it like this:

想想这样：

var myLib = {
    foo: function() {
        alert("FOO!");
        return this;
    },
    bar: function() {
        alert("BAR!");
        return this;
    }
}

myLib.foo().bar();

jQuery doesn't do it exactly like this, but this is one way to get a chaining functionality. This particular one doesn't store information about the current object.

jQuery不是这样做的，但这是获得链接功能的一种方法。这个特定的一个不存储有关当前对象的信息。

The jQuery object has methods that return the modified jquery object, allowing you to call more methods on it.

jQuery对象具有返回修改后的jquery对象的方法，允许您在其上调用更多方法。

#4

If I remember correctly, jQuery uses a classic approach to chaining within it’s prototypes with one exception, it also have an enhanced constructor in it’s init prototype. Here is a simple pattern:

如果我没记错的话，jQuery使用经典方法在其原型中进行链接，只有一个例外，它在init原型中也有一个增强的构造函数。这是一个简单的模式：

function myQuery(elem){
   return new myQuery.prototype.init(elem);
};

myQuery.prototype.init = function(elem) { // the constructor "enhanced"
    this.elem = elem;
};

// now copy the myQuery prototypes into init.prototype
myQuery.prototype.init.prototype = myQuery.prototype;

// here comes the chainable prototypes:

myQuery.prototype.start = function() {
    this.elem.className = 'start';
    return this; // returning the instance allows further chaining
};

myQuery.prototype.finish = function() {
    this.elem.className = 'finish';
    return this;
};

// now use it
myQuery(document.body).start().finish();

Chaining prototypes is more effective, because you can reuse the prototype methods for each instance. jQuery is often initialized many times in a document, and if you created a new object with all chainable methods each time it would add unnecessary overhead and possible leaks.

链接原型更有效，因为您可以为每个实例重用原型方法。 jQuery通常在文档中多次初始化，如果每次创建一个带有所有可链接方法的新对象，就会增加不必要的开销和可能的泄漏。

#5

Almost every jQuery function will also return a jQuery object. As a result, you're able to run jQuery functions on each individual returned object.

几乎每个jQuery函数都会返回一个jQuery对象。因此，您可以在每个返回的对象上运行jQuery函数。

By writing chained code, you not only save time but also improve performance. Without forcing the computer to seek and use a specific node, operating on a returned object is far more efficient than starting another instance.

通过编写链式代码，您不仅可以节省时间，还可以提高性能。在不强制计算机查找和使用特定节点的情况下，对返回的对象进行操作比启动另一个实例更有效。

#1