jquery Dom Ready, jqery2.1.1 implementation-source analysis

This article links http://www.cnblogs.com/Bond/p/4178311.html

The implementation of jquery document ready is very simple, although it's a lot of people who haven't paid attention to its implementation. I've got nothing to do now. jquery document ready implementation. In the lower version 1. The realization of XX and 2.XX slightly different, here to 2.1.1 as the prevail

Usually this kind of writing, generally in these two ways

$ (document). Ready (function() {    //dosomething}) $ (function  () {    //dosomething})

Analysis of source code discovery in fact, the above two types of writing is the same effect, so it is recommended to use the second set of wording, more concise.

The discovery is finally $ (document). Ready (), in order to find the implementation, we have to find the implementation of JQuery.fn.ready, so we found this small section

It is not hard to see that the last Call is JQuery.ready.promise (). Done (FN);

Obviously here we have to find jQuery.ready.promise, in fact JQuery.ready.promise () returned a Promise object and then done (FN) is actually adding a callback function to the inside, and finally the call of the callback add,

Based on the above speculation, we found this code implementation.

Call JQuery.ready.promise (), enter the function to determine whether readylist is already present, create a deferred object to readylist when it does not exist, and readylist is a deferred instance object

Down judgment document.readystate = = = "complete" If not true execute settimeout (jquery.ready); Later analyze Jquery.ready This static method that hangs on to jquery

This is to add the corresponding events and callbacks to the document and window respectively, since this is only supported by the Advanced browser, so it simplifies a lot of only two words

Document.addeventlistener ("domcontentloaded", completed, false);

Window.addeventlistener ("Load", completed, false);

The return readylist.promise (obj) is returned, and all DOM ready callbacks are added to the readylist ; This relies on the jquery deferred module, and the jquery deferred relies on callback. Interested can go to see their implementation, or is very skillful, it is worth a look, here does not pull that, a pull can not stop down.

is actually the return deferred.promise (obj), returned by the Deferred.promise () method of the deferred promise object, is no resolve, reject, progress, resolvewith, Rejectwith, Progresswith These can change the state of the method, you can only use do, then, fail and other methods to add handler or judge the state.

Here we find that eventually when domcontentloaded will execute completed actually completed finally also executes Jquery.ready ();

Finally, we just need to jquery.ready the mysterious veil, and the final implementation of Dom ready will be solved.

So we found this piece of code again.

The following is a simple analysis of its implementation

The front directly calls Jquery.ready (), enter this function after the first judgment is false, go down Jquery.isready = true; Mark IsReady =true, the second if also skip directly, and finally execute readylist.resolvewith (document, [JQuery]);

This sentence is the final core, Readylist was assigned in order to deferred an instance of the object, where the execution Resolvewith () here simply said, Resolvewith inside is actually jquery.callbacks ("once Memory "), and then Resolvewith is Firewith

Know the context and parameters of the last call, and eventually execute all callbacks that were added to Readylist.

Inside the Readylist

["Resolve", "done", Jquery.callbacks ("Once Memory"), "resolved"],
["Reject", "fail", Jquery.callbacks ("Once Memory"), "rejected"],

["Notify", "Progress", Jquery.callbacks ("Memory")]

Others ignore only the jquery.callbacks ("Once Memory")

All of our $ (FN) FN is added to the Jquery.callbacks ("Once Memory"), and once a fire is executed a second call to fire will not work, if the fire is called in the Add (FN) This FN will be executed immediately.

So: The document ready will only be executed once, once executed at $ (FN) again at this time FN will execute immediately.

A simple document ready Jqeury implementation or relatively around, the internal dependence on the deferred, not clear deferred people seem to feel dizzy, in fact, we can throw away the deferred again to see will feel a lot simpler.

jquery Dom Ready, jqery2.1.1 implementation-source analysis