Detailed source code analysis after the jquery deferred application Dom is loaded (3)

I admit that the Ajax part in the previous chapter is not well written. Don't blame me, its AjaxCodeThere are too many, and there are too many ways to jump. It is really difficult to layout and explain, but if you really want to study the source code and read it carefully, your

The gains should be huge. At least you understand how JavaScript Ajax is going. You don't know how to continue to refer to Ajax and deferred. In fact, I want you to understand deferred.

Okay, let's get down to the point. This time I am talking about $ (function () {console. log ("dom ready")}); How simple is a piece of code, but does it run in every browser?

Let's take a look at the global outlook. We will use the following methods. Here you will know that jquery is a real hold elder brother, because he wants to hold Dom ready event holdready, a magic method.

$ (FN) --> $. FN. Ready (FN) --> $. bindready () --> $. Ready (wait) <--> $. holdready (hold)

The following is part of the code of the init function. It is used to determine that the parameter in $ is a function.

1//Processing: $ (function) Abbreviation $ (document). Ready (function)
2If(Jquery. isfunction (selector )){
3ReturnRootjquery. Ready (selector);-> so here you should understand why $ (FN) can replace $ (document). Ready (FN)
4} --> Rootjquery = $ (document)

What should I do after $ (document). Ready (FN? Isn't $ (document) A jquery object instantiated? Of course, it needs to call the $. FN. Ready function.
 

Okay, come to $. FN. ready, well, this function does not care about how to punish Dom ready events, but just cares about the callbacks function queue FN, which means you $ (fn1), $(FN2 ),

It depends on the global readylist, and then this readylist is a deferred object. You know its importance!

 1   /*  $ (FN) --> $ (document). Ready (FN) Why $ (document) instead of other $ ("body?
  2   * $ (Function () {console. Log (this = Document) ;}); --> true
  3   */ 
 4 Ready: Function (FN ){
 5        //  Attach the listeners  
  6 Jquery. bindready ();
7 
 8         //  Add the callback function in $ (FN) so that readylist. resolvewith (document, [jquery]) When domready is triggered. Here readylist is a global variable.  
  9 Readylist. Done (FN );
 10 
 11         Return   This ;
 12 },

---> Here we can see that we can continue to call $. bindready (). It does not matter how Dom ready is triggered.

I came to the bindready function and performed different processing based on different function support conditions. Here I want to learn more about browser compatibility,

Actually, you have learned about jquery and Shenma browser compatibility. However, this function is only concerned with event addition and does not care about how events are triggered ,,

The final callback trigger is still handed over to $. Ready. Here there will be a domcontentloaded public function.

 1     /*  It can be seen from this that $ (function () {}) does not affect performance if there are many pages, because this $. bindready is executed only once.
  2   * In the future, the $ (FN) Incoming functions will be added through the deferred done function. As long as this object is resolve, all the later FN will be immediately executed.
  3   */ 
 4 Bindready: Function (){
 5          //  If readylist exists, return directly to prove that a deferred object has been created.  
  6             If (Readylist ){
 7                       Return ;
 8 }
 9           //  Create jquery private deferred  
  10 Readylist = jquery. _ deferred ();
 11  
 12          //  After the browser event is triggered, $ (document). Ready () will also be called.  
  13           //  This status indicates that fully loaded and document have been fully loaded.  
  14        If (Document. readystate = "complete "){
 --> Jquery code always worries about errors  , However, do not worry that your callback will be triggered multiple times because it is added to the event adder.
--> $. Ready will help you deal with it ~ _~
 15                       //  Handle it asynchronously to allow scripts the opportunity to delay ready  
  16             Return SetTimeout (jquery. Ready, 1 );
 17 }
 18  
 19             //  Mozilla, opera and WebKit nightlies currently support this event  
  20            If (Document. addeventlistener ){
 21                      //  Supports domcontentloaded events, which is simple.  
  22 Document. addeventlistener ("domcontentloaded", domcontentloaded, False );
 23  
 24               //  A fallback to window. onload, that will always work-> jquery code always worries about errors ,
// But don't worry. Will this trigger your callback function multiple times? Of course not!
  25 Window. addeventlistener ("LOAD", jquery. Ready, False );
 26  
 27              //  If IE event model is used  
  28 } Else   If (Document. attachevent ){
 29                   // I am mainly worried that IFRAME exists in the page, so onreadystatechange is used for triggering.  
  30 Document. attachevent ("onreadystatechange", domcontentloaded );
 31  
 32                   //  A fallback to window. onload, that will always work  
  33 Window. attachevent ("onLoad", jquery. Ready );
 34  
 35                     // If it is IE and the page window is toplevel, continue to check  -> For the code that IE cares about, is doscrollcheck () A magic horse?
  36                     //  MDN: window. frameelement = NULL if the window is top-level  
  37                     VaR Toplevel = False ;
 38  
 39                       Try {
 40 Toplevel = Window. frameelement = Null ;
 41 } Catch (E ){}
 42  
 43                       If (Document.doc umentelement. doscroll & toplevel ){
 44 Doscrollcheck ();
 45 }
 46 }
47 },

// The original domcontentloaded is still here, and finally it is handed over to $. Ready () for processing, but domcontentloaded does not do anything, just remove the event listening again
If (document. addeventlistener ){
Domcontentloaded = function (){
Document. removeeventlistener ("domcontentloaded", domcontentloaded, false );
Jquery. Ready ();
};

} Else if (document. attachevent ){
Domcontentloaded = function (){
// Make sure body exists, at least, in case ie gets a little overzealous (ticket #5443 ).
If (document. readystate = "complete "){
Document. detachevent ("onreadystatechange", domcontentloaded );
Jquery. Ready ();
}
};
}

/* This is only for IE. When the page Dom is not loaded, an exception occurs when the doscroll method is called.
* We will use it in turn. If there is no exception, the page Dom is loaded!
* The idea here is really loose!
*/
Function doscrollcheck (){
If (jquery. isready ){
Return;
}
Try {
// If IE is used, use the trick by Diego Perini
// Http://javascript.nwbox.com/IEContentLoaded/
Document.doc umentelement. doscroll ("Left ");
} Catch (e ){
SetTimeout (doscrollcheck, 1 );
Return;
}

// Execute $. Ready () until no exception occurs ()
Jquery. Ready ();
}
--> You will eventually find that the event is actually handled by $. Ready (), no matter how you trigger the event ^_^

Well, all the major events finally fall into ready, and Callbacks are triggered by him. The readylist in him is a deferred object. You know, he wants

Resolvewith (document, [jquery]), do you know what this document means? $ (Function () {console. Log (this = Document )})~ _~.

1    /*  $. Holdready jquery is the real hold elder brother. here it will hold the domready event,
  2   * $. Holdready (true) --> hold once delayed, trigger domready event delayed
  3   * $. Holdready (false) --> release hold once. If $. readywait = 0 after release, the domready event is triggered.
  4   * The function of the entire function is to delay the domready event. For example, you need to dynamically load a jquery plug-in, and then you need to use this plug-in.
  5   * $. Holdready (true); $. getscript ("myplugin. js", function () {.. holdready (false );});
  6  -> The above statement is used to hold the entire scene, and is released after loading.
  7   */ 
 8 Holdready: Function (Hold) {--> here you finally see that Shenma is a hold brother.
 9                   If (Hold ){
 10 Jquery. readywait ++;
 11 } Else {
 12 Jquery. Ready ( True );
 13 }
 14 },
 15   /*  In the final analysis, it triggers callbacks when the DOM tree is loaded, but different browsers trigger $. Ready () in different ways ()
  16   */ 
 17 Ready: Function (Wait ){
 18                   // Release hold status or DOM Event trigger  
  19           If (Wait = True &&! -- Jquery. readywait) | (wait! = True &&! Jquery. isready )){
 20               //  Make sure body exists, at least, in case ie gets a little overzealous (ticket #5443 ).  
  21                 If (! Document. Body ){
22                       Return SetTimeout (jquery. Ready, 1 );
 23 }
 24  
 25             //  The surface DOM tree has been loaded.  
  26 Jquery. isready = True ;
 27  
 28               // If a normal Dom function event is triggered, but there is still a hold status, return the handle, not trigger first  
  29                If (Wait! = True & -- Jquery. readywait> 0 ){
 30                        Return ;
 31 }
 32               //  Function in readylist. Done (FN );  
  33               // The function was triggered here.  
  34 Readylist. resolvewith (document, [jquery]);
 35  
 36               //  Trigger any events bound to document ready  
  37              //  $ (Document). BIND ({"ready": function () {alert ("document ready ");}});  
  38              If (Jquery. FN. Trigger ){
39 Jquery (document). Trigger ("ready"). Unbind ("ready ");
 40 }
 41 }
 42 },

There is a 2B code above $ (document). BIND ("ready", function () {...}). I don't know which 2B will be used in this method...

Well, if you understand the above code, you can write your own $ (function () {}) instead of having to implement it for jquery's taste!