Question

此代码来自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来获取成员
网址包含字符串'？callback =？'所以请求被视为JSONP。

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

此代码是否相同？

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

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

Answer 1

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

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

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

Answer 2

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

拥有它可以在DOM完成之前停止运行代码（尝试修改DOM）。

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

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

这允许在不等待DOM准备好的情况下发送数据请求，同时仍然防止过早修改。

此代码是否相同？

否即可。等待DOM甚至在发送数据请求之前就等待它。

Answer 3

如您所知，这个库使用了jQuery。现在，我知道多少we all love jQuery，但如果我想使用另一个库，例如MooTools或Prototype，重新定义我们都知道和喜爱的$角色呢？使用您提供的第二个示例，它会破坏代码，因为作者正在尝试使用可能不再存在的$属性，因为$ != jQuery。

但是在Twitter片段中，$是一个局部变量，一个IIFE的参数，而jQuery对象，远不太可能被覆盖，作为那个论点传入。所以现在，任何希望使用此函数/库的人都可以继续使用它，而不用担心如果它们使用$将它与另一个库结合它会破坏它。

总之，这是关于命名空间的全部内容，以防止其他库覆盖$并破坏您的功能定义。

了解JavaScript代码段

3 个答案: