#15：链式操作 | CSS-Tricks

我们已经多次谈论了 jQuery API 中一些非常棒的小细节。一切都经过精心设计和完善。链式操作绝对属于此类。一旦你开始使用并理解它，就会感觉非常自然，就像应该没有其他方法一样。

主要思想是，你可以对单个元素集合连续使用多个方法。

例如，假设我想在点击按钮后更改类并更改一些文本。但是按钮中有一些 HTML 内容。

<button class="button open">
  <span class="icon"></span>
  <span class="text">Open</span>
</button>

使用 jQuery，我们可以将整个操作序列“链接”在一起。

$(".button")
  .removeClass("open")
  .addClass("closed")
  .find(".text")
  .text("Closed");

这之所以可行，是因为 jQuery 的大多数方法虽然用作 setter，但会返回与调用方法时相同的元素集。有时该集合完全相同，例如这里 removeClass 和 addClass 的情况，有时该集合会被修改，例如这里 find 的情况。

在我们视频中使用的示例中，我们还谈论了 .end()，它会在链中“退回”一层。

$(".button")
  .removeClass("open")  // .button
  .addClass("closed")   // .button
  .find(".text")        // .button .text
    .text("Closed")     // .button .text
    .end();             // .button
  .data("thing");       // GETTER on .button

也许这样解释更清楚。当元素集合发生变化时，我缩进了该行并用注释标明了变化。然后当我们使用 .end() 时，它就会退回一层。无论你改变选择次数有多少，这都适用。只有当你使用返回非元素集的其他内容的方法时，它才会结束。

vgvenkat

# 2014 年 10 月 14 日

我现在有点搞不懂链式操作和回调函数了。:-/ 两者都有“先做这个，完成后再做另一个”的感觉。如何区分什么时候该用哪个？回调函数是不是更像是重型链式操作？

Chris Coyier

评论永久链接# 2014 年 10 月 17 日
好问题！
- 链式操作 = 立即执行下一项操作，无需等待上面的操作“完成”。
- 回调函数 = 操作“完成”时执行回调函数。
在链式操作的许多情况下，前面的操作会在后面的操作发生之前完成，因为它本身是“同步”的。例如，
```
$("#thing")
    .addClass("open")
    .animate( ... ); // you can count on the open class being there by the time this starts
```
但如果你执行了异步操作，例如 Ajax 调用，那么在链中后面的操作发生时，它可能还没有完成。
```
$("#thing")
    .load( ... ) // ajax call
    .addClass("done");
```
这样“done”类会过早添加，因此你需要使用回调函数。
```
$("#thing")
   .load( ..., function() {
       // callback
       $("#thing).addClass("done");
   });
```
Chris Coyier

评论永久链接# 2014 年 11 月 4 日

http://codepen.io/chriscoyier/blog/the-difference-between-chaining-and-callbacks

vgvenkat

# 2014 年 10 月 17 日

这解释了很多。感谢你详细的解释，Chris。

评论

发表回复 取消回复

发表回复取消回复