JQuery1.0 source code analysis-ready function (4)

 

The previous articles have already explained the basic framework design of jQuery. Let's take a closer look at this article, jQuery's ready function.

 

 

JQuery's ready function is equivalent to the main function in C language. It indicates that when the Dom document is loaded successfully, the ready function is executed.

 

The DOMContentLoaded event of the document is successfully bound to the Dom document, while the load event of the window is bound to the webpage load. The former is much earlier than the latter.

 

 

There is a good online example provided by Microsoft. The address is as follows:

Http://ie.microsoft.com/testdrive/html5/domcontentloaded/default.html. you can use IE 9 or other browsers that support standard browsers.

 

 

JQuery's ready function is also very easy to use. There are two methods, the Code is as follows:

 

 

$ (Document). ready (function (){

// Start here

});

 

$ (Function (){

// Start here

});

These two methods are slightly different. You can use them all.

 

Let's take a look at how jQuery's code is handled.

 

Function jQuery (a, c ){

 

// Procedure cut for document ready (because $ (document). each () is silly)

If (a & a. constructor = Function & jQuery. fn. ready)

Return jQuery (document). ready ();

 

}

Obviously, jQuery is also the first method when we use the second method. That is to say, the second method is the first shortcut. All call jQuery's prototype method ready function.

Let's take a look at the ready function of the jQuery prototype method. The parameter f is the passed-in anonymous function. When the isReady flag variable is true, directly execute the f function. Otherwise, put the f function in the readyList array.

 

 

JQuery. fn. extend ({

 

Ready: function (f ){

// If the DOM is already ready

If (jQuery. isReady)

// Execute the function immediately

F. apply (document );

// Otherwise, remember the function for later

Else {

// Add the function to the wait list

JQuery. readyList. push (f );

}

Return this;

}

});

It is easy to understand that isReady is the flag variable. When the Dom document is loaded, it is set to true. readyList is the array that stores the passed anonymous functions.

 

Therefore, jQuery's static method ready executes all functions in readyList when isReady is true.

 

JQuery. extend ({

/*

* All the code that makes DOM Ready work nicely.

*/

IsReady: false,

ReadyList: [],

// Handle when the DOM is ready

Ready: function (){

// Make sure that the DOM is not already loaded

If (! JQuery. isReady ){

// Remember that the DOM is ready

JQuery. isReady = true;

// If there are functions bound, to execute

If (jQuery. readyList ){

// Execute all of them

For (var I = 0; I <jQuery. readyList. length; I ++)

JQuery. readyList [I]. apply (document );

// Reset the list of functions

JQuery. readyList = null;

}

}

}

});

 

Finally, the key to executing the ready function is to register the DomContentLoad event. However, the method for triggering the event is not the same because the implementations of different browsers are different. The Code is as follows:

 

 

New function (){

// If Mozilla is used

If (jQuery. browser. mozilla | jQuery. browser. opera ){

// Use the handy event callback

Document. addEventListener ("DOMContentLoaded", jQuery. ready, false );

// If IE is used, use the excellent hack by Matthias Miller

// Http://www.outofhanwell.com/blog/index.php? Title = the_window_onload_problem_revisited

} Else if (jQuery. browser. msie ){

// Only works if you document. write () it

Document. write ("<scr" + "ept id =__ ie_init defer = true" +

"Src = //:> <\/script> ");

// Use the defer script hack

Var script = document. getElementById ("_ ie_init ");

Script. onreadystatechange = function (){

If (this. readyState = "complete ")

JQuery. ready ();

};

// Clear from memory

Script = null;

// If Safari is used

} Else if (jQuery. browser. safari ){

// Continually check to see if the document. readyState is valid

JQuery. safariTimer = setInterval (function (){

// Loaded and complete are both valid states

If (document. readyState = "loaded" |

Document. readyState = "complete "){

// If either one are found, remove the timer

ClearInterval (jQuery. safariTimer );

JQuery. safariTimer = null;

// And execute any waiting functions

JQuery. ready ();

}

}, 10 );

}

 

// A fallback to window. onload, that will always work

JQuery. event. add (window, "load", jQuery. ready );

};

In the early days, only Firefox and Opera supported the DomContentLoaded event, but neither IE nor safari supported it. Now we can see that besides IE, IE 9 is also supported.

 

One of the highlights of the above Code is the processing of IE. The defer attribute of the script tag is used, which is unique to IE. When it is set to true, this script is executed only after the file is loaded.

Author: baozhifei