了解JavaScript代码段

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用于获取成员
• 该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); 
    }); 
}); 

也许我错了，但我想的是，第二代码片段等待要加载的文件，然后要求会员...所以不是并行？在第一个代码片段中，请求与文档加载并行完成。如果我错了，请纠正我。

Answer 1

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

让它停止在DOM完成前停止运行（它试图修改DOM）。

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

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

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

此代码是否等同？

否。在它发送数据请求之前，DOM等待DOM准备就绪。

Answer 2

也许我错了，但我想的是，第二代码片段等待要加载的文件，然后请求成员

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

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

Answer 3

如您所知，该库使用jQuery。现在，我知道有多少we all love jQuery，但是如果我想使用另一个库（如MooTools或Prototype）重新定义我们都知道并喜爱的$角色？使用你给出的第二个例子，它破坏了代码，因为作者正试图使用​​可能不再存在的$的属性，因为$ != jQuery。

但在Twitter的片断，$是局部变量，参数传递给IIFE，和jQuery对象，这是远不太可能被覆盖，被传递在作为这样的说法。所以现在，任何想使用这个函数/库的人都可以继续使用它，而不用担心如果它们使用$与另一个库结合使用它将会中断。

总之，它全部是关于命名空间，以防止其他库覆盖$并打破您的函数定义。