Question

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

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

我做了类似链接的事情，但我不确定它是否与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();

Answer 1

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

由于您正在返回this，因此您将返回与调用上一个方法相同的对象。这意味着你要使用所有相同的方法返回一个对象。

这样想：

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

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

这里我们有两个对象。

f对象有一个名为foo的方法，它返回b个对象。
b对象有一个名为bar的方法，它返回f个对象。

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

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

但由于f没有bar且b没有foo，我们永远不会再调用相同的方法两次。

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

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

现在我们总是返回一个同时包含foo和bar方法的对象，因此我们可以调用这两种方法。

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

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

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

Answer 2

每个函数的return都是一个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

Answer 3

这样想：

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

myLib.foo().bar();

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

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

Answer 4

如果我没记错的话，jQuery使用经典方法在其原型中进行链接，只有一个例外，它在enhanced原型中也有一个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();

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

Answer 5

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

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

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

5 个答案: