当前位置: 首页 > 编程笔记 >

Jquery1.9.1源码分析系列(六)延时对象应用之jQuery.ready

湛财
2023-03-14
本文向大家介绍Jquery1.9.1源码分析系列(六)延时对象应用之jQuery.ready,包括了Jquery1.9.1源码分析系列(六)延时对象应用之jQuery.ready的使用技巧和注意事项,需要的朋友参考一下

还记不记得jQuery初始化函数jQuery.fn.init中有这样是一个分支

//document ready简便写法$(function(){…})
} else if ( jQuery.isFunction( selector ) ) {
 return rootjQuery.ready( selector );
}
  所以$(fn)===$(document).ready(fn)。
  来看一下jQuery.fn.ready的源码
ready: function( fn ) {
 // Add the callback
 jQuery.ready.promise().done( fn );
 return this;
}

  很明显在jQuery.ready.promise函数中设置了延时,当延时对象解决的时候执行fn函数。

  主要的处理流程:

  创建一个延时对象,并将文档准备好后的处理事件添加到该延时对象成功事件列表上。

jQuery.ready.promise = function( obj ) {
  if ( !readyList ) {
    readyList = jQuery.Deferred();
    ...
  }
 return readyList.promise( obj );
}

  添加文档准备状态的监听函数(jQuery.ready.promise函数片段)

 //标准浏览器支持DOMContentLoaded事件
 } else if ( document.addEventListener ) {
   //绑定DOMContentLoaded事件和响应函数,响应函数会解决延时
   document.addEventListener( "DOMContentLoaded", completed, false );
   //回退到window.onload事件绑定,所有的浏览器都支持
   window.addEventListener( "load", completed, false );
 //如果是IE事件模型
 } else {
   //确保在onload之前执行延时,可能时间比较迟,但是对于iframes来说比较安全
   document.attachEvent( "onreadystatechange", completed );
   //回退到window.onload事件绑定,所有的浏览器都支持
   window.attachEvent( "onload", completed );
   //如果IE并且不是一个frame
   //不断地检查,看是否该文件已准备就绪
   var top = false;
   try {
    top = window.frameElement == null && document.documentElement;
   } catch(e) {}
   if ( top && top.doScroll ) {
    (function doScrollCheck() {
     if ( !jQuery.isReady ) {
      try {
       // Use the trick by Diego Perini
       // http://javascript.nwbox.com/IEContentLoaded/
       top.doScroll("left");
      } catch(e) {
       return setTimeout( doScrollCheck, 50 );
      }
      //移除之前绑定的事件
      detach();
      //执行延迟
      jQuery.ready();
     }
    })();
   }
  }

  一旦监听到文档准备完成,则调用jQuery.ready执行延时对象的成功回调列表:即所有通过jQuery.ready(fn)【或jQuery(fn)】方式添加的函数fn。

//ready事件处理函数
completed = function( event ) {
 // readyState === "complete"在老版本IE上适用
 if ( document.addEventListener || event.type === "load" || document.readyState === "complete" ) {
  detach();
  jQuery.ready();
 }
},
//清除ready事件绑定
detach = function() {
 if ( document.addEventListener ) {
  document.removeEventListener( "DOMContentLoaded", completed, false );
  window.removeEventListener( "load", completed, false );
 } else {
  document.detachEvent( "onreadystatechange", completed );
  window.detachEvent( "onload", completed );
 }
};

//处理当DOM准备完成
jQuery.ready: function( wait ) {      
 ...        
 //设置DOM已经准备好的标志      
 jQuery.isReady = true;   
 ...   
 //执行绑定的延时事件   
 readyList.resolveWith( document, [ jQuery ] );   
 //触发任何绑定的就绪事件   
 if ( jQuery.fn.trigger ) {     
  jQuery( document ).trigger("ready").off("ready");   
 } 
}

   整个过程就是如此。其中有一些小的知识点整理一下。

a. 文档加载状态document.readyState

  document.readyState用来判断文档加载状态,是一个只读属性,可能的值有:

  0-uninitialized:XML 对象被产生,但没有任何文件被加载。
  1-loading:加载程序进行中,但文件尚未开始解析。
  2-loaded:部分的文件已经加载且进行解析,但对象模型尚未生效。
  3-interactive:仅对已加载的部分文件有效,在此情况下,对象模型是有效但只读的。
  4-complete:文件已完全加载,代表加载成功。

  实例:

document.onreadystatechange = stateChange;//当页面加载状态改变的时候执行这个方法.
function stateChange() {   
  if(document.readyState == "complete"){ //当页面加载状态为完全结束时进入     
    alert("文档加载成功")   
  } 
}

  但是,老版本的Firefox并不支持document.readyState【最新的Firefox已经支持了】。所以想要兼容所有浏览器监听文档准备完成分两种情况来处理:

  - 标准浏览器使用addEventListener添加DOMContentLoaded和load监听,任何一个事件被触发即可

  - 老版本IE浏览器使用attachEvent添加onreadystatechange和onload来监听,任何一个被触发,并且onreadystatechange时document.readyState === "complete"即可。

  jQuery的处理也就是如此了

jQuery.ready.promise = function(){
  ...
  //标准浏览器支持DOMContentLoaded事件
  else if ( document.addEventListener ) {
   //绑定DOMContentLoaded事件和响应函数,响应函数会解决延时
   document.addEventListener( "DOMContentLoaded", completed, false );
   //回退到window.onload事件绑定,所有的浏览器都支持
   window.addEventListener( "load", completed, false );
 //如果是IE事件模型
 } else {
   //确保在onload之前执行延时,可能时间比较迟,但是对于iframes来说比较安全
   document.attachEvent( "onreadystatechange", completed );
   //回退到window.onload事件绑定,所有的浏览器都支持
   window.attachEvent( "onload", completed );
       ...
  }
}
//ready事件处理函数
completed = function( event ) {
 // readyState === "complete"在老版本IE上适用
 if ( document.addEventListener || event.type === "load" || document.readyState === "complete" ) {
  detach();
  jQuery.ready();
 }
}

  b.doScroll检测文档加载完成

  这是Diego Perini 发现的一种检测IE是否加载完成的方式。详细链接

  原理是当页面 DOM 未加载完成时调用 doScroll 方法时会产生异常。那么不断的取检测异常是否发生就可以知道文档有没有加载完成。当没有发生异常,表明文档加载完成了。          

 (function doScrollCheck() {
     if ( !jQuery.isReady ) {
      try {
       // Use the trick by Diego Perini
       // http://javascript.nwbox.com/IEContentLoaded/
       top.doScroll("left");
      } catch(e) {
       return setTimeout( doScrollCheck, 50 );
      }
      //移除之前绑定的事件
      detach();
      //执行延迟
      jQuery.ready();
     }
    })();

以上所述是小牛知识库小编给大家介绍的Jquery1.9.1源码分析系列(六)延时对象应用之jQuery.ready的全部内容,希望大家喜欢。

 类似资料:
  • 本文向大家介绍jQuery1.9.1源码分析系列(十六)ajax之ajax框架,包括了jQuery1.9.1源码分析系列(十六)ajax之ajax框架的使用技巧和注意事项,需要的朋友参考一下 AJAX 简介 AJAX 是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术。 您应当具备的基础知识 在继续学习之前,您需要对下面的知识有基本的了解: HTML / XHTML CSS JavaSc

  • 本文向大家介绍Java并发系列之CountDownLatch源码分析,包括了Java并发系列之CountDownLatch源码分析的使用技巧和注意事项,需要的朋友参考一下 CountDownLatch(闭锁)是一个很有用的工具类,利用它我们可以拦截一个或多个线程使其在某个条件成熟后再执行。它的内部提供了一个计数器,在构造闭锁时必须指定计数器的初始值,且计数器的初始值必须大于0。另外它还提供了一个c

  • 本文向大家介绍Java并发系列之CyclicBarrier源码分析,包括了Java并发系列之CyclicBarrier源码分析的使用技巧和注意事项,需要的朋友参考一下 现实生活中我们经常会遇到这样的情景,在进行某个活动前需要等待人全部都齐了才开始。例如吃饭时要等全家人都上座了才动筷子,旅游时要等全部人都到齐了才出发,比赛时要等运动员都上场后才开始。在JUC包中为我们提供了一个同步工具类能够很好的模

  • 本文向大家介绍Java并发系列之ConcurrentHashMap源码分析,包括了Java并发系列之ConcurrentHashMap源码分析的使用技巧和注意事项,需要的朋友参考一下 我们知道哈希表是一种非常高效的数据结构,设计优良的哈希函数可以使其上的增删改查操作达到O(1)级别。Java为我们提供了一个现成的哈希结构,那就是HashMap类,在前面的文章中我曾经介绍过HashMap类,知道它的

  • 本文向大家介绍jQuery 1.9.1源码分析系列(十四)之常用jQuery工具,包括了jQuery 1.9.1源码分析系列(十四)之常用jQuery工具的使用技巧和注意事项,需要的朋友参考一下 为了给下一章分析动画处理做准备,先来看一下一些工具。其中队列工具在动画处理中被经常使用。 jQuery.fn. queue(([ queueName ] [, newQueue ]) || ([ queu

  • ethereum的虚拟机源码所有部分在core/vm下。 去除测试总共有24个源码文件。 整个vm调用的入口在go-ethereum/core/state_transaction.go中。 我们主要是为了分析虚拟机源码,所以关于以太坊是如何进行交易转账忽略过去。 从上面的截图我们可以看出, 当以太坊的交易中to地址为nil时, 意味着部署合约, 那么就会调用evm.Create方法。 否则调用了e