了解JavaScript代码段

Question

This code is from 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);

First, things I understand:

• All the code is wrapped in a IIFE
• They are using Github API for getting the members
• The URL includes the string '?callback=?' so the request is treated as JSONP.

What I don't understand is: why they are using $(function() ... inside the function that is executed if the request succeeds.

Is this code equivalent?

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

Maybe I'm wrong but what I think is that the second code snippet waits for the document to be loaded and then request the members ... so there is not parallelism? In the first code snippet the request is done in parallel with the document loading. Please correct me if I'm wrong.

Answer 1

Maybe I'm wrong but what I think is that the second code snippet waits for the document to be loaded and then request the members

You're not wrong. That is exactly what happens. The first snippet is most likely used so the JSONP request can be made/returned while waiting for the DOM to be ready. They are just making the best use of the time available.

The chances are the DOM will be ready by the time the AJAX request is complete, but to be on the safe side there is no harm wrapping it in a ready event handler (if the DOM is already ready, jQuery executes the callback immediately).

Answer 2

The $ function, if it is passed a function as its argument (it is a horribly overloaded function), will call that function when the DOM is ready.

Having it there stops the code inside (which tries to modify the DOM) from running before the DOM is complete.

If the DOM is already complete before $ is called, then the function will be called immediately.

Note that the HTTP request sent by getJSON might get a response before or after the browser has finished loading and parsing the DOM of the original document.

This allows the request for the data to be sent without waiting for the DOM to be ready while still protecting against premature modification.

Is this code equivalent?

No . That waits for the DOM to be ready before it even sends the request for the data.

Answer 3

As you know, this library makes use of jQuery. Now, I know how much we all love jQuery , but what if I want to use another library, such as MooTools or Prototype, that redefines the $ character we all know and love? Using the second example you gave, it breaks the code, because the author is trying to use properties of the $ that likely no longer exist because $ != jQuery .

But in the Twitter snippet, $ is a local variable , an argument to the IIFE, and the jQuery object, which is far less likely to be overwritten, is passed in as that argument. So now, anyone wishing to use this function/library can go ahead and use it without fear that it will break if they combine it with another library using the $.

In summary, It's all about namespacing , to prevent another library overwriting the $ and breaking your function definition.