我无法理解jQuery链如何工作
我无法理解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();
如果函数的返回值是具有方法的对象，则可以立即调用该方法。 就那么简单。
因为你要返回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; 它会表现得一样。
如果你想创建对象的几个实例，这很重要，但这是一个面向对象技术的问题，而不是方法链 。
每个函数的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
想想这样：
var myLib = { foo: function() { alert("FOO!"); return this; }, bar: function() { alert("BAR!"); return this; } } myLib.foo().bar();
jQuery不是这样做的，但这是获得链接function的一种方法。 这个特定的一个不存储有关当前对象的信息。
jQuery对象具有返回修改后的jquery对象的方法，允许您在其上调用更多方法。
如果我没记错的话，jQuery使用经典方法在其原型中进行链接，只有一个例外，它在init原型中也有一个enhanced构造函数。 这是一个简单的模式：
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通常在文档中多次初始化，如果每次创建一个带有所有可链接方法的新对象，就会增加不必要的开销和可能的泄漏。
几乎每个jQuery函数都会返回一个jQuery对象。 因此，您可以在每个返回的对象上运行jQuery函数。
通过编写链式代码，您不仅可以节省时间，还可以提高性能。 在不强制计算机查找和使用特定节点的情况下，对返回的对象进行操作比启动另一个实例更有效。