Js notes -- why does the ready () event in jQuery require so much code?

The Application of ready () events is not familiar to anyone. The most common code for learning jQuery is jQuery (document ). ready (function () {}); jQuery (function () {}); $ (document ). ready (function () {}); $ (function () {}); the purpose and effect of the above four lines of code are the same-after the DOM is loaded, run the passed function. A friend who is a little familiar with jquery may know that the "wait for DOM loading to be completed" is not a window. onload event, window. onload refers to "DOM Loading complete + DOM-Related File Download complete ". DOM loading is complete, excluding DOM-related file loading ". Related events are: DOMContentLoaded event (IE9 + and other browsers) onreadystatechange event (ie 9 and earlier browsers. If you know the two events, you can associate the passed function with these two events, and there are so many ready-related codes in jquery, there are hundreds of lines of code. Why? The reason is as follows: 2. storage Structure-Based on Asynchronous queue design: Read the following code first: copy the code // apply ready event $ (function () {alert (10) ;}); $ (function () {alert (20) ;}); $ (function () {alert (30) ;}); copy the code above and apply the ready method three times in a row, in fact, jquery uses its own jquery. callbacks. The main code is as follows: readyList = jQuery. callbacks ("once memory"); readyList. add (fn); readyList. fireWith (document, [jQuery]); "once": indicates that the added function is called only once. "memory": indicates that the read list is executed once, then, the functions that are subsequently added will be immediately executed according to the environment and parameters during execution. 3. Clever event binding: Take the DOMContentLoaded supported by IE9 + and other browsers as an example. First read the code: copy the code // Mozilla, Opera and webkit nightlies currently support this event if (document. addEventListener) {// Use the handy event callback document. addEventListener ("DOMContentLoaded", DOMContentLoaded, false); // A fallback to window. onload, that will always work window. addEventListener ("load", jQuery. ready, false);} DOMContentLoaded = function () {document. removeEventListener ("DOMCon TentLoaded ", DOMContentLoaded, false); jQuery. ready () ;}; the copied code is visible based on the above Code. The DOMContented event is actually executed by jQUery. ready. (Note: jquery. ready () and jquery (document). raedy () are different !!, The former is a tool function, and the latter is an instance function .) Here, we define a DOMContentLoaded function as a bridge to execute the jquery. ready () function. The purpose of this function is to remove the reference of the DOMContentLoaded event of the document. Document. addEventListener ("DOMContentLoaded", DOMContentLoaded, false); document. removeEventListener ("DOMContentLoaded", DOMContentLoaded, false); extract the two lines separately. You can see that after adding the lines, remove them. In the middle, cleverly executed jquery. ready (), this usage is worth learning! In turn, if the following code is implemented, the reference of the DOMContentLoaded event of the document will not be deleted in time. // Inverse example document. removeEventListener ("DOMContentLoaded", jQuery. ready, false); in addition to the DOMContentLoaded/onreadystatechange method in the browser, you can call jquery. besides the ready () function, there is also a clever way to call jquery. ready () function. In browsers lower than IE9, if the current page is top-level (that is, it is not included in the iframe and friame elements), call html. doScroll () until no exception is thrown, you can call jquery. ready () function. Copy code 1 if (document.doc umentElement. doScroll & toplevel) {2 doScrollCheck (); 3} 4 5/* omitted */6 7 try {8 // If IE is used, use the trick by Diego Perini 9 // http://javascript.nwbox.com/IEContentLoaded/10 document.doc umentElement. doScroll ("left"); 11} catch (e) {12 setTimeout (doScrollCheck, 1); 13 return; 14} 15 16 // and execute any waiting functions17 jQuery. ready (); copy the Code 4. event execution: As mentioned above, you can use DOMContentLoaded/onreadystatechange event, and. doScroll () detection to call jquery. ready () tool function, jquery. ready () will eventually call the firewith () method of the asynchronous queue to trigger all incoming events. If it is manually called through js, it can also be called through the jquery Event System. ReadyList. fireWith (document, [jQuery]); if (jQuery. fn. trigger) {jQuery (document ). trigger ("ready "). off ("ready");} Actually there is a jquery. the holdready () method is used to delay calling, but it is relatively simple and not commonly used. 5. conclusion: we can see that the ready () event in jQuery is not as simple as we seem. While learning about its principles, we should also think about how we fully consider it when designing our own system. It uses an asynchronous queue so that users can call it multiple times and execute it sequentially. Its event binding takes into account various situations, while fully considering the release of resources; it also takes into account browser calls and js Manual calls. Personal experience: it is a shortcut to learn how to use JavaScript and how to design the source code of js.