0

此代码来自http://twitter.github.com/

(function ($, undefined) {
    // more code ...

    $.getJSON("https://api.github.com/orgs/twitter/members?callback=?", function (result) {
        var members = result.data;
        $(function () {
            $("#num-members").text(members.length);
        });
    });

    // more code ...
})(jQuery);

首先，我理解的事情：

  • 所有代码都包含在 IIFE 中
  • 他们使用 Github API 来获取会员
  • URL 包含字符串 '?callback=?' 因此请求被视为 JSONP。

我不明白的是：为什么他们$(function() ...在请求成功时执行的函数内部使用。

这段代码等效吗？

$(function() {
    $.getJSON("https://api.github.com/orgs/twitter/members?callback=?", function (result) {
        var members = result.data;
         $("#num-members").text(members.length);
    });
});

也许我错了，但我认为第二个代码片段等待文档加载然后请求成员......所以没有并行性？在第一个代码片段中，请求与文档加载并行完成。如果我错了，请纠正我。

4

3 回答 3

1

也许我错了，但我认为第二个代码片段等待文档加载然后请求成员

你没有错。这正是发生的事情。第一个片段最有可能使用，因此可以在等待 DOM 准备好时发出/返回 JSONP 请求。他们只是在充分利用可用的时间。

DOM 可能会在 AJAX 请求完成时准备好，但为了安全起见，将其包装在准备好的事件处理程序中没有害处（如果 DOM 已经准备好，jQuery 会立即执行回调）。

于 2013-03-28T13:29:45.693 回答
1

该$函数，如果它被传递一个函数作为它的参数（它是一个可怕的重载函数），将在 DOM 准备好时调用该函数。

在 DOM 完成之前，它会阻止内部代码（尝试修改 DOM）运行。

如果在调用之前 DOM 已经完成$，则该函数将立即被调用。

请注意，发送的 HTTP 请求可能会在浏览器完成加载和解析原始文档的 DOM之前或之后getJSON得到响应。

这允许发送数据请求而无需等待 DOM 准备好，同时仍可防止过早修改。

这段代码等效吗？

没有。在它甚至发送数据请求之前等待 DOM 准备好。

于 2013-03-28T13:30:08.117 回答
0

如您所知，这个库使用了 jQuery。现在，我知道我们有多喜欢 jQuery了，但是如果我想使用另一个库，例如 MooTools 或 Prototype，重新定义$我们都知道和喜爱的角色怎么办？使用您给出的第二个示例，它破坏了代码，因为作者试图使用$可能不再存在的属性，因为$ != jQuery.

但是在 Twitter 代码片段中，$是一个局部变量，是 IIFE 的一个参数，而 jQuery 对象（不太可能被覆盖）作为该参数传入。所以现在，任何希望使用这个函数/库的人都可以继续使用它，而不必担心如果他们将它与另一个使用 $.

总之，这都是关于命名空间的，以防止另一个库覆盖$和破坏你的函数定义。

于 2013-03-28T13:41:00.807 回答