jQuery源码分析-10事件处理-Event-DOM-ready

最新推荐文章于 2024-07-12 10:43:17 发布

mychirs

最新推荐文章于 2024-07-12 10:43:17 发布

阅读量884

点赞数

分类专栏： Jquery 文章标签： jquery javascript 源码事件 event

Jquery 专栏收录该内容

36 篇文章 0 订阅

订阅专栏

    Js代码   
    
  
 作者：nuysoft/JS攻城师/高云　QQ：47214707　EMail：nuysoft@gmail.com    
 声明：本文为原创文章，如需转载，请注明来源并保留原文链接。     
 后文预告：封装事件对象 便捷接口解析  
   
 前记：  
 这一章写的很用心，希望有所启发。因为排版的原因，阅读附件PDF更方便一些。  
   
 jQuery源码分析系列大概已经写了60%，架构、构建jQuery对象、异步队列、浏览器测试、数据缓存、队列、事件模型、AJAX、动画、尺寸大小基本完结，这些比较难读也是我感兴趣的，剩余的部分有选择器、DOM遍历和操作、CSS和部分章节的补充，jQuery中的正则分析已有初稿但是内容太庞大还在拿捏怎么写合适，一些章节写的不是很满意有时间会做修改，详细的目录和计划可以去目录页参看 http://nuysoft.iteye.com/blog/1190542。  
   
 JavaScript同其他语言一样，基础非常重要，仅仅会用框架和工具写一些WebApp是不能成为一名合格的JS工程师的，建议多读几次JavaScript权威指南，以我的经验与Java相比，JavaScript需要花费与Java相当的时间才能达到与Java相当的水平。  
   
 jQuery完结之后计划写Java开源框架的源码解析，从Spring、Hibernate开始，有兴趣的同学可以一起研究。  

    Js代码   
    
  
 10.8    DOM ready  
   
 初学jQuery时，很可能学到的第一个知识点就是.ready()，但是网络上流转的文章和API对此的解释或剖析，经常是模棱两可甚至是不准确或错误的，本节将详细的阐述.ready()的用法和原理，并纠正这些误区。  
   
 10.8.1  如何使用.ready()  
   
 .ready() 指定一个事件句柄，当DOM完全加载完成时执行  
   
 虽然JavaScript提供了load事件，当页面渲染完成之后会执行这个函数，在所以元素加载完成之前，这个函数不会被调用，例如图像。但是在大多数情况下，只要DOM结构加载完，脚本就可以尽快运行。传递给.ready()的事件句柄在DOM准备好后立即执行，因此通常情况下，最好把绑定事件句柄和其他jQuery代码都到这里来。但是当脚本依赖于CSS样式属性时，一定要在脚本之前引入外部样式或内嵌样式的元素。  
   
 如果代码依赖于需加载完的元素（例如，想获取一个图片的尺寸大小），应该用.load()事件代替，并把代码放到load事件句柄中。  
   
 .ready()方法不同于<body οnlοad="">属性。如果必须用load事件，那么就不要使用.ready()，或用.load()代替，把load事件句柄绑定到window或其他的具体元素上，例如图片。  
   
 以下三个语法全部是等价的：  
 $(document).ready(handler)  
 $().ready(handler) (this is not recommended)  
 $(handler)  
   
 $(document).bind("ready", handler)的行为类似于ready方法，但有一个例外：如果ready事件已触发后，再尝试用.bind("ready")绑定的处理函数将不会被执行。而用以上三种方法绑定的句柄会被执行，无论是什么时候绑定的。  
 .ready()方法只能在包含了document的jQuery上调用，因此选择器可以省略。  
 .ready()方法典型的用法是使用一个匿名函数：  
 $(document).ready(function() {  
   // Handler for .ready() called.  
 });  
 等价于：  
 $(function() {  
  // Handler for .ready() called.  
 });  
   
 如果在DOM加载完毕之后调用.ready()，新的句柄将会立即执行。  
   
 特别强调两点：  
 1.  之所以花费篇幅来阐述.ready()如何使用（翻译的官网文档），是因为网络上的一些文章和中文API不准确甚至是错误的（应该是工具翻译的），所以需谨慎参考  
 2.  .ready()的触发要早于.load()，但是不要完全迷信依赖，如果要获取或操作样式，或依赖于像图片这样的必须加载完成才能获取和操作的元素，就用<body οnlοad="">或.load()  
   
 10.8.2  源码分析  
   
 到底.ready()是如何实现更快的触发ready事件的呢，关键在jQuery.bindReady方法的实现里：  
   
 对标准浏览器绑定：document.addEventListener( "DOMContentLoaded", DOMContentLoaded, false );  
 对IE浏览器绑定：document.attachEvent( "onreadystatechange", DOMContentLoaded );  
   
 当然还有一些其他的关键技巧，现在完成的看下jQuery.bindReady的实现：  
   
 // 绑定DOM ready监听器，跨浏览器，兼容标准浏览器和IE浏览器  
 bindReady: function() { // jQuery.bindReady  
 if ( readyList ) {  
     return;  
 }  
   
 readyList = jQuery._Deferred(); // 初始化ready异步事件句柄队列  
   
 // Catch cases where $(document).ready() is called after the  
 // browser event has already occurred.  
 // 如果DOM已经完毕，立即调用jQuery.ready  
 if ( document.readyState === "complete" ) {  
     // Handle it asynchronously to allow scripts the opportunity to delay ready  
     // 重要的是异步  
     return setTimeout( jQuery.ready, 1 );  
 }  
   
 // Mozilla, Opera and webkit nightlies currently support this event  
 // DOM 2级事件模型，Mozilla, Opera, webkit等   
 if ( document.addEventListener ) {  
     // Use the handy event callback  
     // 使用快速事件句柄  
     document.addEventListener( "DOMContentLoaded", DOMContentLoaded, false );  
   
     // A fallback to window.onload, that will always work  
     // 再在window上绑定load事件句柄，这个句柄总是会执行  
     // 为什么同时绑定document window呢？我想是为了安全起见，防御性编码！  
     window.addEventListener( "load", jQuery.ready, false );   
   
 // If IE event model is used  
 } else if ( document.attachEvent ) {  
     // ensure firing before onload,  
     // maybe late but safe also for iframes  
     // 同样onreadystatechange会在onload之前触发，但是对于iframe会有延迟但安全一定会触发  
     // 看看DOMContentLoaded的实现，是检测document.readyState的状态是否为complete，这里有些像ajax中的检测   
     document.attachEvent( "onreadystatechange", DOMContentLoaded );  
   
     // A fallback to window.onload, that will always work  
     window.attachEvent( "onload", jQuery.ready ); // 同样的安全起见，防御性编码！及时前边的所以hack技巧失败了，onload是最后的保障  
   
     // If IE and not a frame  
     // continually check to see if the document is ready  
     var toplevel = false;  
   
     try {  
         toplevel = window.frameElement == null; // 检查window的frameElement属性，看是否是顶层窗口  
     } catch(e) {}  
       
     // 做doScroll检测，如果在iframe中就不检测了，onreadystatechange对于ifame很可靠  
     if ( document.documentElement.doScroll && toplevel ) {  
         doScrollCheck();   
         // 在doScrollCheck中，不断的（每隔1ms）执行document.documentElement.doScroll("left")，直到不抛出异常为止  
         // 这是IE下检测DOM ready的技巧  
         }  
     }  
 },  
   
 然后是完整的ready相关方法的分析，我剔除了其他无关的代码，保留了整体结构和相关方法：  
   
 (function( window, undefined ) {  
   
     var jQuery = (function() {  
           
         // Define a local copy of jQuery  
         var jQuery = function( selector, context ) {  
                 // The jQuery object is actually just the init constructor 'enhanced'  
                 var ret = new jQuery.fn.init( selector, context, rootjQuery );  
                 return ret;  
             },  
           
             // A central reference to the root jQuery(document)  
             rootjQuery, // 包含了document的jQuery对象  
           
             // The deferred used on DOM ready  
             readyList, // ready事件处理函数队列  
           
             // The ready event handler  
             DOMContentLoaded, // DOM ready hack句柄，.ready()能早于.load()的关键所在  
           
         jQuery.fn = jQuery.prototype = {  
             constructor: jQuery,  
             init: function( selector, context, rootjQuery ) {  
                 // HANDLE: $(function)  
                 // Shortcut for document ready  
                 // 如果函数，则认为是DOM ready句柄  
                 if ( jQuery.isFunction( selector ) ) {  
                     return rootjQuery.ready( selector );  
                 }  
             },  
           
             ready: function( fn ) {  
                 // Attach the listeners  
                 jQuery.bindReady(); // 绑定DOM ready监听器，跨浏览器，兼容标准浏览器和IE浏览器  
           
                 // Add the callback  
                 readyList.done( fn ); // 将ready句柄添加到ready异步句柄队列  
           
                 return this;  
             }  
         };  
           
         // Give the init function the jQuery prototype for later instantiation  
         jQuery.fn.init.prototype = jQuery.fn;  
           
         jQuery.extend = jQuery.fn.extend = function() {};  
           
         jQuery.extend({  
           
             // Is the DOM ready to be used? Set to true once it occurs.  
             // DOM是否加载完毕  
             isReady: false,  
           
             // A counter to track how many items to wait for before  
             // the ready event fires. See #6781  
             // DOM加载完毕之前的等待次数  
             readyWait: 1,  
           
             // Hold (or release) the ready event  
             // 是否延迟触发DOM ready？在jQuery中没有任何地方有调用到holdReady，这是个遗留方法还是预留方法，有待继续研究。  
             // 因此在当前版本中，readyWait总是1，直到自减  
             holdReady: function( hold ) {  
                 if ( hold ) { // 继续等待  
                     jQuery.readyWait++;  
                 } else {  
                     jQuery.ready( true ); //   
                 }  
             },  
           
             // Handle when the DOM is ready  
             // 判断DOM是否加载完毕，如果已完毕，调用DOM ready事件异步队列readyList，如果未完，每个1ms检查一次  
             ready: function( wait ) { // jQuery.ready  
                 // Either a released hold or an DOMready/load event and not yet ready  
                 // 条件1：wait === true && !--jQuery.readyWait 还在等待加载完成，但是等待计数器jQuery.readyWait已经是0，  
                 // 换句话说参数wait为true表示尝试一下看是否能开始调用readyList了，如果发现计数器jQuery.readyWait变成0，啥也不管了，开始调用吧  
                 // 再换句话说，计数器已经是0了，开干吧  
                   
                 // 条件2：wait !== true && !jQuery.isReady 明确的说不用了，即使DOM ready标记还是false  
                 // 换句话说，及时DOM ready标记还是false，但是调用jQuery.ready的客户端认为不比再等了，可以开干了  
                 if ( (wait === true && !--jQuery.readyWait) || (wait !== true && !jQuery.isReady) ) {  
                     // Make sure body exists, at least, in case IE gets a little overzealous (ticket #5443).  
                     // 检查document.body是否存在，这是特定于IE的检测，保证在IE中DOM ready事件能正确判断  
                     if ( !document.body ) {  
                         return setTimeout( jQuery.ready, 1 );  
                     }  
   
                     // Remember that the DOM is ready  
                     // 到这里，jQuery.isReady被强制为true  
                     // 在条件2中，如果jQuery.isReady为true，那么说明readyList的状态已经确定，添加到readyList中的函数会被立即执行  
                     // 如果jQuery.isReady为是false，那么接下来readyList中函数将被执行  
                     jQuery.isReady = true;  
   
                     // If a normal DOM Ready event fired, decrement, and wait if need be  
                     // 虽然上边的条件2的意思是，别管其他情况，调用方认为ready了，但是这里仍然做了防御性检测，如果等待计数器仍然大于1，结束ready调用  
                     // 如果这个条件成立，那么一定是哪里出问题了！  
                     // 在当前版本1.6.1中，这个判断永远不会成立，因为没有地方调用会使readyWait加一的holdReady  
                     if ( wait !== true && --jQuery.readyWait > 0 ) {  
                         return;  
                     }  
   
                     // If there are functions bound, to execute  
                     // 调用DOM ready事件异步队列readyList，注意整理的参数亮了！  
                     // document指定了ready句柄的上下文，这样我们在执行ready事件句柄时this指向document  
                     // [ jQuery ]指定了ready事件句柄的第一个参数，这样即使调用$.noConflict()交出了$的控制权，我们依然可以将句柄的第一个参数命名为$，继续在句柄内部使用$符号  
                     // 如此的精致！赞叹之余，但不要在你的项目中也这么用，理解和维护将成为最大的难题。  
                     readyList.resolveWith( document, [ jQuery ] );  
   
                     // Trigger any bound ready events  
                     if ( jQuery.fn.trigger ) {  
                         // 触发ready事件，然后删除ready句柄，DOM ready事件只会生效一次，ready是个自定义事件  
                         jQuery( document ).trigger( "ready" ).unbind( "ready" );  
                     }  
                 }  
             },  
           
             // 绑定DOM ready监听器，跨浏览器，兼容标准浏览器和IE浏览器  
             bindReady: function() { // jQuery.bindReady  
                 if ( readyList ) {  
                     return;  
                 }  
   
                 readyList = jQuery._Deferred(); // 初始化ready异步事件句柄队列  
   
                 // Catch cases where $(document).ready() is called after the  
                 // browser event has already occurred.  
                 // 如果DOM已经完毕，立即调用jQuery.ready  
                 if ( document.readyState === "complete" ) {  
                     // Handle it asynchronously to allow scripts the opportunity to delay ready  
                     // 重要的是异步  
                     return setTimeout( jQuery.ready, 1 );  
                 }  
   
                 // Mozilla, Opera and webkit nightlies currently support this event  
                 // DOM 2级事件模型，Mozilla, Opera, webkit等   
                 if ( document.addEventListener ) {  
                     // Use the handy event callback  
                     // 使用快速事件句柄  
                     document.addEventListener( "DOMContentLoaded", DOMContentLoaded, false );  
   
                     // A fallback to window.onload, that will always work  
                     // 再在window上绑定load事件句柄，这个句柄总是会执行  
                     // 为什么同时绑定document window呢？我想是为了安全起见，防御性编码！  
                     window.addEventListener( "load", jQuery.ready, false );   
   
                 // If IE event model is used  
                 } else if ( document.attachEvent ) {  
                     // ensure firing before onload,  
                     // maybe late but safe also for iframes  
                     // 同样onreadystatechange会在onload之前触发，但是对于iframe会有延迟但安全一定会触发  
                     // 看看DOMContentLoaded的实现，是检测document.readyState的状态是否为complete，这里有些像ajax中的检测   
                     document.attachEvent( "onreadystatechange", DOMContentLoaded );  
   
                     // A fallback to window.onload, that will always work  
                     window.attachEvent( "onload", jQuery.ready ); // 同样的安全起见，防御性编码！及时前边的所以hack技巧失败了，onload是最后的保障  
   
                     // If IE and not a frame  
                     // continually check to see if the document is ready  
                     var toplevel = false;  
   
                     try {  
                         toplevel = window.frameElement == null; // 检查window的frameElement属性，看是否是顶层窗口  
                     } catch(e) {}  
                       
                     // 做doScroll检测，如果在iframe中就不检测了，onreadystatechange对于ifame很可靠  
                     if ( document.documentElement.doScroll && toplevel ) {  
                         doScrollCheck();   
                         // 在doScrollCheck中，不断的（每隔1ms）执行document.documentElement.doScroll("left")，直到不抛出异常为止  
                         // 这是IE下检测DOM ready的技巧  
                     }  
                 }  
             },  
         });  
           
         // All jQuery objects should point back to these  
         rootjQuery = jQuery(document);  
           
         // Cleanup functions for the document ready method  
         // 构造浏览器加载完毕事件处理函数DOMContentLoaded，需要检测浏览器添加事件的方法  
         if ( document.addEventListener ) {  
             DOMContentLoaded = function() {  
                 // document ready之后移除  
                 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).  
                 // 确保body是存在的，IE会有一些延迟  
                 if ( document.readyState === "complete" ) {  
                     // 先移除，难道浏览器重新渲染会再次触发onreadystatechange吗？  
                     document.detachEvent( "onreadystatechange", DOMContentLoaded );  
                     jQuery.ready();  
                 }  
             };  
         }  
           
         // The DOM ready check for Internet Explorer  
         // 在IE里，每隔1ms检测IE浏览器的ready状态  
         function doScrollCheck() {  
             if ( jQuery.isReady ) {  
                 return;  
             }  
           
             try {  
                 // If IE is used, use the trick by Diego Perini  
                 // http://javascript.nwbox.com/IEContentLoaded/  
                 // 如果是IE，则使用该技巧来检测浏览器加载状态  
                 document.documentElement.doScroll("left");  
             } catch(e) {  
                 setTimeout( doScrollCheck, 1 );  
                 return;  
             }  
           
             // and execute any waiting functions  
             // 执行其他的等待函数  
             jQuery.ready();  
         }  
           
         // Expose jQuery to the global object  
         return jQuery;  
       
     })();  
   
     // 见系列文章中关于异步队列的解析  
     jQuery.extend({  
         // Create a simple deferred (one callbacks list)  
         _Deferred: function() {},  
       
         // Full fledged deferred (two callbacks list)  
         Deferred: function( func ) {},  
       
         // Deferred helper  
         when: function( firstParam ) {}  
     });  
       
     // 见系列文章中关于事件的解析  
     jQuery.event = {  
         trigger: function( event, data, elem, onlyHandlers ) {},  
   
         handle: function( event ) {},  
   
         special: {  
             ready: {  
                 // Make sure the ready event is setup  
                 setup: jQuery.bindReady,  
                 teardown: jQuery.noop  
             }  
         }  
     };  
   
     window.jQuery = window.$ = jQuery;  
 })(window);  

mychirs

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
jQuery源码分析-10事件处理-Event-DOM-ready

Js代码作者：nuysoft/JS攻城师/高云　QQ：47214707　EMail：nuysoft@gmail.com 声明：本文为原创文章，如需转载，请注明来源并保留原文链接。后文预告：封装事件对象便捷接口解析前记：这一章写的很用心，希望有所启发。因为排版的原因，阅读附件PDF更方便一些。 jQuery源码分析系
复制链接

扫一扫