1

我无法理解 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();
4

5 回答 5

5

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

由于您正在返回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

但是因为fdoesn't havebar和bdoesn't have 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;，并且行为相同。

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

于 2012-09-25T14:54:17.007 回答
3

每个return函数上的 jQuery 对象。每个 jQuery 对象都会引用所有的函数，比如show/hideand 所以你可以简单地写

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
于 2012-09-25T14:51:39.820 回答
2

可以这样想：

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

myLib.foo().bar();

jQuery 并非完全如此，但这是获得链接功能的一种方式。这个特定的不存储有关当前对象的信息。

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

于 2012-09-25T14:55:26.147 回答
2

如果我没记错的话，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 经常在一个文档中被初始化很多次，如果你每次都创建一个包含所有可链接方法的新对象，它会增加不必要的开销和可能的泄漏。

于 2012-09-25T15:05:39.093 回答
1

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

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

于 2012-09-25T14:51:16.933 回答