夏日博客

A-A+

jQuery实现DOM加载方法源码分析

2016年01月13日 前端设计 暂无评论 阅读 5 views 次

DOM是文档对象模型，DOM可以以一种独立于平台和语言的方式访问和修改一个文档的内容和结构。本文我们讲讲jQuery实现DOM加载方法源码分析。

传统的判断dom加载的方法.

使用 dom0级 onload事件来进行触发所有浏览器都支持在最初是很流行的写法 我们都熟悉这种写法：

  1. window.onload=function(){  
  2.          
  3.       ...             
  4. }   

但是onload事件触发过于缓慢，尤其是在存在很多外部图片或者视频文件的时候，为了更好的了解这一点有必要知道一个html文档是如何进行加载的，这里引用一个园友的表述：

1.用户输入网址（假设是个html页面，并且是第一次访问），浏览器向服务器发出请求，服务器返回html文件；

2.浏览器开始载入html代码，发现标签内有一个标签引用外部CSS文件；

3.浏览器又发出CSS文件的请求，服务器返回这个CSS文件；

4.浏览器继续载入html中部分的代码，并且CSS文件已经拿到手了，可以开始渲染页面了；

5.浏览器在代码中发现一个标签引用了一张图片，向服务器发出请求。此时浏览器不会等到图片下载完，而是继续渲染后面的代码；

6.服务器返回图片文件，由于图片占用了一定面积，影响了后面段落的排布，因此浏览器需要回过头来重新渲染这部分代码；

7.浏览器发现了一个包含一行Javascript代码的标签，赶快运行它；

8.Javascript脚本执行了这条语句，它命令浏览器隐藏掉代码中的某个

（style.display=”none”）。杯具啊，突然就少了这么一个元素，浏览器不得不重新渲染这部分代码；

9.终于等到了的到来，浏览器泪流满面……

10.等等，还没完，用户点了一下界面中的“换肤”按钮，Javascript让浏览器换了一下标签的CSS路径；

11.浏览器召集了在座的各位

  • 们，“大伙儿收拾收拾行李，咱得重新来过……”，浏览器向服务器请求了新的CSS文件，重新渲染页面。

    可以看到是先加载dom结构后加载对用的资源 比如一个一个img标签 ，浏览器再加载img标签时不会等到src对应的图片加载完成就会执行后面的代码，而onload则必须要等到所有资源加载完成才会触发，所以domContentLoaded 就代替了onload 但是对于ie低版本浏览器来说这种方法还没有实现 ，那么如何实现完美的判断dom加载呢？下面来看jquery的写法：

    使用jquery进行开发

    1. <span style="font-size: 16px; font-family: 'Microsoft YaHei';">$(function(){  
    2.     ...  
    3. })     
    4.    
    5. //or  
    6.    
    7. $(doucment).ready(function(){  
    8.     ...  
    9. })</span>  

    在稍后的分析中会发现两者并无区别，下面就从这个入口开始一步一步了解jquery的写法：

    源码分析

    首先$(fn) 是在构造函数里传入了一个函数 在init函数

    1. // HANDLE: $(function)  
    2. // Shortcut for document ready  
    3.         } else if ( jQuery.isFunction( selector ) ) {  
    4.             return rootjQuery.ready( selector );  
    5.         }  

    如果传入的是一个函数 则会执行 rootjQuery.ready( selector ); rootjQuery是什么呢？

    // All jQuery objects should point back to these

    rootjQuery = jQuery(document);

    其实就是$(document) ,然后执行了一个原型方法ready把函数作为参数传了进去，好的现在视线转移到ready（此方法是原型方法还有工具方法不要混淆）

    1. ready: function( fn ) {  
    2.         // Attach the listeners  
    3.         jQuery.bindReady();  
    4.   
    5.         // Add the callback  
    6.         readyList.add( fn );  
    7.               
    8.         return this;  
    9. },  

    fn接受了传递进来的函数 先执行了一个工具方法bindReady，视线接着转移

    1. bindReady: function() {  
    2.         if ( readyList ) {  
    3.             return;  
    4.         }  
    5.   
    6.         readyList = jQuery.Callbacks( "once memory" );  
    7.   
    8.         // Catch cases where $(document).ready() is called after the  
    9.         // browser event has already occurred.  
    10.         if ( document.readyState === "complete" ) {  
    11.             // Handle it asynchronously to allow scripts the opportunity to delay ready  
    12.             return setTimeout( jQuery.ready, 1 );  
    13.         }  
    14.   
    15.         // Mozilla, Opera and webkit nightlies currently support this event  
    16.         if ( document.addEventListener ) {  
    17.             // Use the handy event callback  
    18.             document.addEventListener( "DOMContentLoaded", DOMContentLoaded, false );  
    19.   
    20.             // A fallback to window.onload, that will always work  
    21.             window.addEventListener( "load", jQuery.ready, false );  
    22.   
    23.         // If IE event model is used  
    24.         } else if ( document.attachEvent ) {  
    25.             // ensure firing before onload,  
    26.             // maybe late but safe also for iframes  
    27.             document.attachEvent( "onreadystatechange", DOMContentLoaded );  
    28.   
    29.             // A fallback to window.onload, that will always work  
    30.             window.attachEvent( "onload", jQuery.ready );  
    31.   
    32.             // If IE and not a frame  
    33.             // continually check to see if the document is ready  
    34.             var toplevel = false;  
    35.   
    36.             try {  
    37.                 toplevel = window.frameElement == null;  
    38.             } catch(e) {}  
    39.   
    40.             if ( document.documentElement.doScroll && toplevel ) {  
    41.                 doScrollCheck();  
    42.             }  
    43.         }  
    44.     },  

    这个方法看起来复杂，呵呵不要着急一行一行的看 我们现在的分析路线是 $(fn)->$(document).ready->$.bindReady

    1. if ( readyList ) {  
    2.        return;  
    3.    }  

    这里出现了一个新变量readyList 第一次执行的时候由于只有声明没有初始化肯定是undefined所以不会走这里

    // The deferred used on DOM ready

    readyList,

    readyList = jQuery.Callbacks( "once memory" );

    然后给readyList赋值 其最为成为了一个回调对象 关于jquery回调对象的方法这里不再赘述，回调对象创建了但是目前是没有添加回调方法的

    1. // Catch cases where $(document).ready() is called after the  
    2. / browser event has already occurred.  
    3.       if ( document.readyState === "complete" ) {  
    4.           // Handle it asynchronously to allow scripts the opportunity to delay ready  
    5.           return setTimeout( jQuery.ready, 1 );  
    6.       }  

    document.readyState表示文档加载的状态，如果加载完成了则可以直接执行ready方法也是也就是执行传递的回调函数，既然已经记载好了就可以直接执行了，使用settimeout是保证函数可以异步加载

    接来下来的事情就是用dom2级事件处理程序来监听onload事件 和 domcontentLoaded 既然后者加载速度比前者快为什吗还要多此一举呢？这是因为浏览器可能会缓存事件处理程序onload可能会被缓存而先执行所以都写上谁先触发谁先执行；

    只不过对于domcontentLoaded是执行的domcontentLoaded方法而不是ready方法，其实domcontentLoaded方法也是最终执行ready方法 ：

    1. // Cleanup functions for the document ready method  
    2. if ( document.addEventListener ) {  
    3.     DOMContentLoaded = function() {  
    4.         document.removeEventListener( "DOMContentLoaded", DOMContentLoaded, false );  
    5.         jQuery.ready();  
    6.     };  
    7.     
    8. } else if ( document.attachEvent ) {  
    9.     DOMContentLoaded = function() {  
    10.         // Make sure body exi msts, at least, in case IE gets a little overzealous (ticket #5443).  
    11.         if ( document.readyState === "complete" ) {  
    12.             document.detachEvent( "onreadystatechange", DOMContentLoaded );  
    13.             jQuery.ready();  
    14.         }  
    15.     };  
    16. }  

    只不过是先解除绑定之后再执行确保不会多次触发，对于ie浏览器还有一个特殊的方法就是检测滚动条是可以可以执行 当然前提不在框架页面 ，因为如果dom结构加载好了body才有滚动条

    1. if ( document.documentElement.doScroll && toplevel ) {  
    2.                 doScrollCheck();  
    3.      }  
    4.   
    5. // The DOM ready check for Internet Explorer  
    6. function doScrollCheck() {  
    7.     if ( jQuery.isReady ) {  
    8.         return;  
    9.     }  
    10.     try {  
    11.         // If IE is used, use the trick by Diego Perini  
    12.         // http://javascript.nwbox.com/IEContentLoaded/  
    13.         document.documentElement.doScroll("left");  
    14.     } catch(e) {  
    15.         setTimeout( doScrollCheck, 1 );  
    16.         return;  
    17.     }  
    18.   
    19.     // and execute any waiting functions  
    20.     jQuery.ready();  
    21. }  

    isReady是判断是否已经加载的状态值 只有执行ready工具方法后才会变成true，然后就是不停的检测滚动条 直不报错了执行ready方法；

    所以bindReady方法就是一个准备方法，把要执行的函数绑定在回调函数中并且判断何时才能去触发，最终都执行$.ready方法 注意这里的ready是工具方法 不同于上面说的ready原型方法或者叫实例方法

    马上就可以看到函数被触发了但是别着急 还没有把传进来的fn添加到回调函数列表中呢，看完bindReady之后我们再回到ready实例方法中

    1. ready: function( fn ) {  
    2.         // Attach the listeners  
    3.         jQuery.bindReady();  
    4.   
    5.         // Add the callback  
    6.         readyList.add( fn );  
    7.               
    8.         return this;  
    9.     },  

    原来是在这里添加的 由于bindReady中调用jQuery.ready时都是采用的异步所以完全添加操作得以在执行之前完成 ，现在可以看最后工具方法ready了吧？当然不是你还要直到另一个方法holdReady

    1. // Hold (or release) the ready event  
    2. holdReady: function( hold ) {  
    3.     if ( hold ) {  
    4.         jQuery.readyWait++;  
    5.     } else {  
    6.         jQuery.ready( true );  
    7.     }  
    8. },  

    代码不多主要就是阻止回调函数触发的，比如我们在代码中间需要加载一个脚本文件并且希望优先于rady事件执行就可以使用此方法先停止执行后再恢复实现动态脚本加载参数为false如果不传就是组织ready事件如果传入就是解除阻止,准备工作终于完成下面开始看jQuery.ready方法：

    1. // Handle when the DOM is ready  
    2. ready: function( wait ) {  
    3.     // Either a released hold or an DOMready/load event and not yet ready  
    4.     if ( (wait === true && !--jQuery.readyWait) || (wait !== true && !jQuery.isReady) ) {  
    5.         // Make sure body exists, at least, in case IE gets a little overzealous (ticket #5443).  
    6.         if ( !document.body ) {  
    7.             return setTimeout( jQuery.ready, 1 );  
    8.         }      

    此方法接受一个参数也就是holdReady可能传入的true 这里限制了两个条件才能继续运行 1，wait为true readyWait减一后为0，readyWait是一个计数器，因为holdReady可以执行多次，没执行一次该值加一解除一次该值减一 2，wait不为true 并且isRead为false 因为isReady只用执行到这条if语句后面才能修改为ture所以这是保证不要重复执行的 。正常情况下（没有调用holdReady）都是可以通过的，如果调用了并且wait存在说明有解除但是如果解除次数低于阻止次数还是不行的；

    if进来之后又是一个if判断这里是这对ie的一个bug可以忽视 有兴趣查看jQuery官网说明http://bugs.jquery.com/ticket/5443 下面就可以让isReady为true了

    1. // Remember that the DOM is ready  
    2.             jQuery.isReady = true;  
    3.   
    4.             // If a normal DOM Ready event fired, decrement, and wait if need be  
    5.             if ( wait !== true && --jQuery.readyWait > 0 ) {  
    6.                 return;  
    7. }  

    ready状态改变之后并不意味着可以立刻执行回调函数了，在前面判断了没有使用holdReady以及使用了holdReady(false)的情况 这两种情况仅仅可以满足isReady为ture 但是如果使用了holdReady没有传值的情况时只要readyWait减一后大于0还是不能执行但是下次解除时isReady状态已经是true了

    1. // If there are functions bound, to execute  
    2.             readyList.fireWith( document, [ jQuery ] );  
    3.   
    4.             // Trigger any bound ready events  
    5.             if ( jQuery.fn.trigger ) {  
    6.                 jQuery( document ).trigger( "ready" ).off( "ready" );  
    7.             }  

    最终创建的回调对象通过fireWith方法执行了，并且把this指向了doument并且把jQuery作为参数传递了进去 最后针对有可能使用 on方法绑定ready事件也进行了trigger触发然后解除绑定；至此完毕 机构比较复杂需要看着源码多理几次，最后贴上主要源码

    1. // Is the DOM ready to be used? Set to true once it occurs.  
    2.     isReady: false,  
    3.   
    4.     // A counter to track how many items to wait for before  
    5.     // the ready event fires. See #6781  
    6.     readyWait: 1,  
    7.   
    8.     // Hold (or release) the ready event  
    9.     holdReady: function( hold ) {  
    10.         if ( hold ) {  
    11.             jQuery.readyWait++;  
    12.         } else {  
    13.             jQuery.ready( true );  
    14.         }  
    15.     },  
    16.   
    17.     // Handle when the DOM is ready  
    18.     ready: function( wait ) {  
    19.         // Either a released hold or an DOMready/load event and not yet ready  
    20.         if ( (wait === true && !--jQuery.readyWait) || (wait !== true && !jQuery.isReady) ) {  
    21.             // Make sure body exists, at least, in case IE gets a little overzealous (ticket #5443).  
    22.             if ( !document.body ) {  
    23.                 return setTimeout( jQuery.ready, 1 );  
    24.             }      
    25.             // Remember that the DOM is ready  
    26.             jQuery.isReady = true;  
    27.   
    28.             // If a normal DOM Ready event fired, decrement, and wait if need be  
    29.             if ( wait !== true && --jQuery.readyWait > 0 ) {  
    30.                 return;  
    31.             }  
    32.   
    33.             // If there are functions bound, to execute  
    34.             readyList.fireWith( document, [ jQuery ] );  
    35.   
    36.             // Trigger any bound ready events  
    37.             if ( jQuery.fn.trigger ) {  
    38.                 jQuery( document ).trigger( "ready" ).off( "ready" );  
    39.             }  
    40.         }  
    41.     },  
    42.   
    43.     bindReady: function() {  
    44.         if ( readyList ) {  
    45.             return;  
    46.         }  
    47.   
    48.         readyList = jQuery.Callbacks( "once memory" );  
    49.   
    50.         //    
    51.         if ( document.readyState === "complete" ) {  
    52.             // Handle it asynchronously to allow scripts the opportunity to delay ready  
    53.             return setTimeout( jQuery.ready, 1 );  
    54.         }  
    55.   
    56.         // Mozilla, Opera and webkit nightlies currently support this event  
    57.         if ( document.addEventListener ) {  
    58.             // Use the handy event callback  
    59.             document.addEventListener( "DOMContentLoaded", DOMContentLoaded, false );  
    60.   
    61.             // A fallback to window.onload, that will always work  
    62.             window.addEventListener( "load", jQuery.ready, false );  
    63.   
    64.         // If IE event model is used  
    65.         } else if ( document.attachEvent ) {  
    66.             // ensure firing before onload,  
    67.             // maybe late but safe also for iframes  
    68.             document.attachEvent( "onreadystatechange", DOMContentLoaded );  
    69.   
    70.             // A fallback to window.onload, that will always work  
    71.             window.attachEvent( "onload", jQuery.ready );  
    72.   
    73.             // If IE and not a frame  
    74.             // continually check to see if the document is ready  
    75.             var toplevel = false;  
    76.   
    77.             try {  
    78.                 toplevel = window.frameElement == null;  
    79.             } catch(e) {}  
    80.   
    81.             if ( document.documentElement.doScroll && toplevel ) {  
    82.                 doScrollCheck();  
    83.             }  
    84.         }  
    85.     },  
标签：

给我留言