了解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准備好時發出/返回JSONP請求。 他們只是在充分利用現有的時間。

有可能在AJAX請求完成時DOM已經准備就緒，但為了安全起見，將它包裝在就緒事件處理程序中是沒有壞處的（如果DOM已經准備就緒，jQuery立即執行回調）。

Answer 2

$函數，如果它傳遞一個函數作為它的參數（它是一個可怕的重載函數），將在DOM准備好時調用該函數。

擁有它可以在DOM完成之前停止運行代碼（嘗試修改DOM）。

如果在調用$之前DOM已經完成，那么將立即調用該函數。

請注意， getJSON發送的HTTP請求可能會在瀏覽器加載並解析原始文檔的DOM 之前或之后獲得響應。

這樣就可以在不等待DOM准備好的情況下發送數據請求，同時仍然可以防止過早修改。

這段代碼是等價的嗎？

不 。 在它甚至發送數據請求之前等待DOM准備就緒。

Answer 3

如您所知，此庫使用jQuery。 現在，我知道我們多么喜歡jQuery ，但如果我想使用另一個庫，例如MooTools或Prototype，重新定義我們都知道和喜愛的$角色呢？ 使用你給出的第二個例子，它打破了代碼，因為作者試圖使用可能不再存在的$屬性，因為$ != jQuery 。

但Twitter的片段， $是一個局部變量 ，參數傳遞給IIFE和jQuery對象，這是不太可能被覆蓋，被傳遞作為這樣的說法。 所以現在，任何希望使用這個函數/庫的人都可以繼續使用它，而不用擔心如果它們使用$將它與另一個庫結合它會破壞它。

總之，它是關於命名空間的 ，它是為了防止另一個庫覆蓋$並破壞你的函數定義。