Jquery1.9.1 series of source code analysis (6) jQuery. ready_jquery-js of delayed object applications tutorial

This article mainly introduces jQuery in Jquery1.9.1 source code analysis series (6) Delayed object applications. for more information about ready, see jQuery initialization function. fn. in init, This is a branch.

// Document ready simple syntax $ (function (){...})} Else if (jQuery. isFunction (selector) {return rootjQuery. ready (selector);} So $ (fn) ===$ (document). ready (fn ). Let's take a look at the jQuery. fn. ready source code ready: function (fn) {// Add the callback jQuery. ready. promise (). done (fn); return this ;}

Obviously, the latency is set in the jQuery. ready. promise function, and the fn function is executed when the delayed object is resolved.

Main process:

Create a delayed object and add the processing events after the documents are prepared to the success event list of the delayed object.

jQuery.ready.promise = function( obj ) {　　if ( !readyList ) {　　　　readyList = jQuery.Deferred();　　　　...　　} return readyList.promise( obj );}

Add the listening function for the preparation status of the document (jQuery. ready. promise function segment)

// The standard browser supports DOMContentLoaded events} else if (document. addEventListener) {// bind the DOMContentLoaded event and response function. The response function resolves the document delay. addEventListener ("DOMContentLoaded", completed, false); // return to window. onload event binding. all browsers support windows. addEventListener ("load", completed, false); // if it is an IE event model} else {// ensure that the execution delay before onload may be relatively late, but for iframes, document is safer. attachEvent ("onreadystatechange", completed); // roll back to window. onload Event binding. all browsers support windows. attachEvent ("onload", completed); // If IE is not a frame, check whether the file is ready. var top = false; try {top = window. frameElement = null & document.doc umentElement;} catch (e) {}if (top & top. doScroll) {(function doScrollCheck () {if (! JQuery. isReady) {try {// Use the trick by Diego Perini // http://javascript.nwbox.com/IEContentLoaded/ Top. doScroll ("left");} catch (e) {return setTimeout (doScrollCheck, 50);} // remove the previously bound event detach (); // Execution Delay jQuery. ready ();}})();}}

Once the file preparation is complete, jQuery is called. the success callback list of the delayed objects executed by ready: All callback objects passed through jQuery. added function fn in ready (fn) or jQuery (fn) mode.

// Ready event processing function completed = function (event) {// readyState = "complete" applies if (document. addEventListener | event. type = "load" | document. readyState = "complete") {detach (); jQuery. ready () ;}}, // clear the ready event binding detach = function () {if (document. addEventListener) {document. removeEventListener ("DOMContentLoaded", completed, false); window. removeEventListener ("load", completed, false);} else {document. detachEvent ("onreadystatechange", completed); window. detachEvent ("onload", completed) ;}; // process jQuery when DOM is ready. ready: function (wait ){... // set the ready DOM flag jQuery. isReady = true ;... // execute the bound latency event readyList. resolveWith (document, [jQuery]); // triggers any bound readiness event if (jQuery. fn. trigger) {jQuery (document ). trigger ("ready "). off ("ready ");}}

This is the process. There are some small knowledge points.

A. document loading status document. readyState

Document. readyState is used to judge the loading status of a document. It is a read-only attribute and may have the following values:

0-uninitialized: XML objects are generated, but no files are loaded.
1-loading: The loading program is in progress, but the file has not started parsing.
2-loaded: some files have been loaded and parsed, but the object model has not yet taken effect.
3-interactive: only valid for some loaded files. In this case, the object model is valid but read-only.
4-complete: The file is fully loaded, indicating that the file is successfully loaded.

Instance:

Document. onreadystatechange = stateChange; // This method is executed when the page loading status changes. function stateChange () {if (document. readyState = "complete") {// when the page loading status is complete, enter alert ("document loading succeeded ")}}

However, earlier versions of Firefox do not support document. readyState [the latest Firefox already supports ]. Therefore, to be compatible with all browser listening documents, there are two solutions:

-The standard browser uses addEventListener to add DOMContentLoaded and load listeners. Any event is triggered.

-In earlier versions, Internet Explorer uses attachEvent to add onreadystatechange and onload for listening. when either of them is triggered and onreadystatechange, document. readyState = "complete" is enough.

　That's exactly how jQuery handles it.

JQuery. ready. promise = function (){... // The standard browser supports the DOMContentLoaded event else if (document. addEventListener) {// bind the DOMContentLoaded event and response function. The response function resolves the document delay. addEventListener ("DOMContentLoaded", completed, false); // return to window. onload event binding. all browsers support windows. addEventListener ("load", completed, false); // if it is an IE event model} else {// ensure that the execution delay before onload may be relatively late, but for iframes, document is safer. attachEvent ("onreadystatechange", completed); // roll back to window. onload event binding. all browsers support windows. attachEvent ("onload", completed );...}} // ready event processing function completed = function (event) {// readyState = "complete" applies if (document. addEventListener | event. type = "load" | document. readyState = "complete") {detach (); jQuery. ready ();}}

　　B. The doScroll detection document has been loaded.

This is a method found by Diego Perini to check whether the IE load is complete. Detailed Link

The principle is that an exception occurs when the doScroll method is called when the page DOM is not loaded. Then, you can check whether an exception occurs and whether the file has been loaded. If no exception occurs, the file loading is completed.

(Function doScrollCheck () {if (! JQuery. isReady) {try {// Use the trick by Diego Perini // the http://javascript.nwbox.com/IEContentLoaded/ top. doScroll ("left");} catch (e) {return setTimeout (doScrollCheck, 50);} // remove the previously bound event detach (); // Execution Delay jQuery. ready ();}})();

The above is the Jquery1.9.1 source code analysis series (6) the full content of jQuery. ready for delayed object applications. I hope you will like it.