Chinaunix首页 | 论坛 | 博客
  • 博客访问: 818035
  • 博文数量: 62
  • 博客积分: 526
  • 博客等级: 二等列兵
  • 技术积分: 2078
  • 用 户 组: 普通用户
  • 注册时间: 2012-02-04 20:41
个人简介

博客迁移至 freefe.cc

文章分类

全部博文(62)

分类: JavaScript

2014-08-28 20:54:41


    对于 jQuery 使用中 $( function(){} ) 的形式我们都不陌生,将事件函数绑定在 dom 加载完毕的时刻,相对于 window.onload 来讲可以避免一些图片,动态脚本,以及一些外部资源等加载对于当前代码执行带来的较大的延时影响,因为 window.onload 是需要等当前页面需要加载的资源全部加载结束后才触发执行,包括 onload 触发之前执行的动态加载。

    对于标准浏览器,具有 DOMContentLoaded 事件来作为 dom 加载完毕后触发的事件,当然准确点说的话是 dom 和 非动态加载的JS 加载完毕时刻触发(关于触发时机可以看这里 )。
    
    当然低版本的IE(IE6 ~ IE8)不支持 DOMContentLoaded 事件,那么也需要使用一些其他的方法来进行模拟 DOMContentLoaded 时刻触发。当前主流的低版本IE模拟方法就是使用 doScroll 进行循环判断,对于 JScript ,若在 dom 未加载完毕时刻调用 doScroll 则会报错,借此使用 try catch 进行轮询判定。

    那么,要了解 jQuery 对 domReady 和 load 的区分,其实就是说 jQuery 对于兼用的 domReady 是如何实现的而已,因为 onload 是各个浏览器已经实现的事件,而 DOMContentLoaded 未被低版本IE实现。然后本次使用的 jQuery 版本为 1.11,毕竟还要包括以下低版本IE,所以不使用 2.*的版本,但其实质是一样的,只不过 2.*版本中就舍弃使用 doScroll 进行循环判定放弃低版本IE而已。那么,要了解本质,最好的办法还是看 jQuery 源码。

  1. // DOM ready 的 一个 jQuery deferred
  2. // 也作为 绑定初始化的判定标签
  3. var readyList;

  4. // 调用绑定才进行 绑定初始化
  5. jQuery.fn.ready = function( fn ) {
  6.     // 未初始化过的才进行初始化绑定
  7.     jQuery.ready.promise().done( fn );
  8.     return this;
  9. };

  10. jQuery.extend({
  11.     // DOM ready 是否触发过标签
  12.     isReady: false,
  13.     readyWait: 1,

  14.     holdReady: function( hold ) {
  15.         if ( hold ) {
  16.             jQuery.readyWait++;
  17.         } else {
  18.             jQuery.ready( true );
  19.         }
  20.     },

  21.     // DOM ready 时刻的事件句柄
  22.     ready: function( wait ) {

  23.         if ( wait === true ? --jQuery.readyWait : jQuery.isReady ) {
  24.             return;
  25.         }

  26.         // IE的小BUG 确保 body 已经存在
  27.         if ( !document.body ) {
  28.             return setTimeout( jQuery.ready );
  29.         }

  30.         // 切换标签状态
  31.         jQuery.isReady = true;

  32.         // 是否需要等待的标签
  33.         if ( wait !== true && --jQuery.readyWait > 0 ) {
  34.             return;
  35.         }

  36.         // 执行以 jquery 形式的 ready 绑定
  37.         readyList.resolveWith( document, [ jQuery ] );

  38.         // 在次触发其他形式的绑定,并且及时注销
  39.         if ( jQuery.fn.triggerHandler ) {
  40.             jQuery( document ).triggerHandler( "ready" );
  41.             jQuery( document ).off( "ready" );
  42.         }
  43.     }
  44. });
 
    扩展的 isReady 是用来控制 ready 的执行次数的,readyWait 和 holdReady 在此不在此文解释范围,其中的 ready 方法 就是核心了,为 jQuery 判定 domReady 时所触发的方法,又结合了 defferred 的 resolveWith 逐一执行存储在 cache 中事件句柄数组中的事件句柄。那么接下来就是 domReady 的重头戏,判定 domReady 时刻。

  1. // 移除所有有关事件句柄 compeleted 的绑定事件
  2. function detach() {
  3.     if ( document.addEventListener ) {
  4.         document.removeEventListener( "DOMContentLoaded", completed, false );
  5.         window.removeEventListener( "load", completed, false );
  6.     } else {
  7.         document.detachEvent( "onreadystatechange", completed );
  8.         window.detachEvent( "onload", completed );
  9.     }
  10. }

  11. // 对于已经过了 domReady 时间点
  12. function completed() {
  13.     // 标准浏览器 或者 为 IE下的load事件 或者 ready 状态为 complete(IE)
  14.     if ( document.addEventListener || event.type === "load" || document.readyState === "complete" ) {
  15.         detach();
  16.         jQuery.ready();
  17.     }
  18. }

  19. jQuery.ready.promise = function( obj ) {
  20.     if ( !readyList ) {
  21.         // 初始化 readyList
  22.         readyList = jQuery.Deferred();

  23.         // 当 $(document).ready() 早在 ready 事件过后被调用的时候,直接触发。
  24.         if ( document.readyState === "complete" ) {
  25.             // 异步方式执行 类似的模拟事件触发形式
  26.             setTimeout( jQuery.ready ); 

  27.             // DOMContentLoaded 事件绑定
  28.         } else if ( document.addEventListener ) { 
  29.             document.addEventListener( "DOMContentLoaded", completed, false );
  30.             window.addEventListener( "load", completed, false );

  31.         // 这边则是低版本IE形式
  32.         } else { 
  33.             document.attachEvent( "onreadystatechange", completed );
  34.             window.attachEvent( "onload", completed );

  35.             // IE的 doScroll 方式检测
  36.             var top = false;

  37.             try {
  38.                 top = window.frameElement == null && document.documentElement;
  39.             } catch(e) {} 

  40.             if ( top && top.doScroll ) {
  41.                 (function doScrollCheck() {
  42.                     if ( !jQuery.isReady ) { 
  43.                         try {
  44.                             top.doScroll("left");
  45.                         } catch(e) {
  46.                             // 当try中有错误 直接下次延迟循环检测
  47.                             return setTimeout( doScrollCheck, 50 );
  48.                         }

  49.                         detach();
  50.                         jQuery.ready();
  51.                     }
  52.                 })();
  53.             }
  54.         }
  55.     }
  56.     return readyList.promise( obj );
  57. };

    其实对于 jQuery 这种形式来说,有点类似于 宁可错杀一千,也不放过一个,在任何状态下尽可能的多监听些事件进行判断,在 DOMContentLoaded,load,readystatechange 以及 doScroll 循环等, 反正有 jQuery.isReady 进行把关么,怕什么。对于该流程进一步了解还需要去了解一下 jquery 的 promise。关于 jQuery 的 callback, defferred的作用和源码。为什么要返回  readyList.promise( obj ),自己思考下吧!






阅读(6728) | 评论(0) | 转发(2) |
给主人留下些什么吧!~~