jQuery的ready方法实现原理分析

jQuery中的ready方法实现了当页面加载完成后才执行的效果，但他并不是window.onload或者doucment.onload的封装，而是使用 标准W3C浏览器DOM隐藏api和IE浏览器缺陷来完成的，首先，我们来看jQuery的代码

DOMContentLoaded = function()
 {
  //取消事件监听，执行ready方法
 if ( document.addEventListener )
 {
  document.removeEventListener( "DOMContentLoaded", DOMContentLoaded, false );
  jQuery.ready();
 }
  else if ( document.readyState === "complete" )
 {
  document.detachEvent( "onreadystatechange", DOMContentLoaded );
  jQuery.ready();
 }
};

jQuery.ready.promise = function( obj ) {
 if ( !readyList ) {

  readyList = jQuery.Deferred();
   //表示页面已经加载完成，直接调用 ready方法
  if ( document.readyState === "complete" ) {
   //将 jQuery.ready压入异步消息队列，设置延迟时间1毫秒（注意，有些浏览器延迟不能小于4毫秒）
   setTimeout( jQuery.ready);
  }
  else if ( document.addEventListener ) //
  {
    //监听DOM加载完成
   document.addEventListener( "DOMContentLoaded", DOMContentLoaded, false );
    //这里是为了确保所有ready执行结束，如果DOMContentLoaded方法执行了，将有一个状态值 isReady被设置为true,因此，
    //ready方法一旦执行，那么将只执行一次，window.addEventListener中的ready 将被 return 中断
   window.addEventListener( "load", jQuery.ready, false );

  } else {
   //低版本的IE浏览器
   document.attachEvent( "onreadystatechange", DOMContentLoaded );
   window.attachEvent( "onload", jQuery.ready );

   var top = false;

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

   if ( top && top.doScroll ) //剔除iframe的成分
   {
    (function doScrollCheck() {
     if ( !jQuery.isReady ) {

      try {
       //根据bug来兼容低版本的IE http://javascript.nwbox.com/IEContentLoaded/
       top.doScroll("left");
      } catch(e) {
       //由于低版本的IE 浏览器，onreadystatechange事件不可靠，因此需要根据各个bug来判断页面是否已加载完成
       return setTimeout( doScrollCheck, 50 );
      }

      jQuery.ready();
     }
    })();
   }
  }
 }
 return readyList.promise( obj );
};

ready: function( wait )
 {

 if ( wait === true ? --jQuery.readyWait : jQuery.isReady ) {
  //判断页面是否已完成加载并且是否已经执行ready方法
  return;
 }

 if ( !document.body ) {
  return setTimeout( jQuery.ready );
 }

 jQuery.isReady = true; //指示ready方法已被执行

 if ( wait !== true && --jQuery.readyWait > 0 ) {
  return;
 }

 readyList.resolveWith( document, [ jQuery ] );

 if ( jQuery.fn.trigger ) {
  jQuery( document ).trigger("ready").off("ready");
 }
},

感谢阅读，希望能帮助到大家，谢谢大家对本站的支持！

赞 (0)

相关推荐

  • jQuery ready方法实现原理详解

    今天闲来无事研究研究jQuery.ready()的内部实现,看JQ的源码一头雾水,由于自己很菜了,于是翻了翻牛人的播客,讲述详细,收获颇多. 先普及一下jquery.ready()和window.onload,window.onload事件是在页面所有的资源都加载完毕后触发的. 如果页面上有大图片等资源响应缓慢, 会导致window.onload事件迟迟无法触发.所以出现了DOM Ready事件. 此事件在DOM文档结构准备完毕后触发, 即在资源加载前触发. jQuery中的ready方法实现了

  • 模拟jQuery中的ready方法及实现按需加载css,js实例代码

    一.ready函数的实现经常用jQuery类库或其他类库中的ready方法,有时候想想它们到底是怎么实现的,但是看了一下jQuery中的源码,涉及到的模块比较多,(水平有限)代码比较难看懂:自己结合了一些书籍内容,总结一下.先说一下ready函数的实现思路:变量ready通过表达式赋值,右侧为一个自执行匿名函数,在这个匿名函数中,首先为各个浏览器的事件绑定处理函数,并为isReady赋值(根据事件异步处理程序来确定),然后返回一个传参闭包,在闭包中,主要判断isReady值来执行操作,如果dom

  • jQuery的ready方法详解

    jQuery中的ready方法实现了当页面加载完成后才执行的效果,但他并不是window.onload或者doucment.onload的封装,而是使用 标准W3C浏览器DOM隐藏api和IE浏览器缺陷来完成的,首先,我们来看jQuery的代码 复制代码 代码如下: DOMContentLoaded = function()  {          //取消事件监听,执行ready方法     if ( document.addEventListener )     {             

  • javascript 模拟JQuery的Ready方法实现并出现的问题

    dom加载完后执行,一直不了解,基于对网上的一些方法逻辑不了解,所以去看了<jquery源代码研究(ready函数) >这篇文章后自己写入如下代码(已有详细说明) 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html

  • JavaScript的jQuery库中ready方法的学习教程

    学习 jQuery 有许多途径,我们今天从 jQuery 的 ready 函数开始.本例中的代码都来自于 jQuery 脚本库. 如果你使用过 jQuery , 就必然使用过 ready 函数,它用来注册当页面准备好之后可以执行的函数. 问题来啦,我们的页面什么时候准备好了呢? onload 事件 最基本的处理方式就是页面的 onload 事件,我们在处理这个事件的时候,可以有多种方式,即可以通过 HTML 方式,直接写在 body 元素的开始标记中,也可以使用事件注册的方式来使用,这又可以分为

  • jQuery的ready方法实现原理分析

    jQuery中的ready方法实现了当页面加载完成后才执行的效果,但他并不是window.onload或者doucment.onload的封装,而是使用 标准W3C浏览器DOM隐藏api和IE浏览器缺陷来完成的,首先,我们来看jQuery的代码 DOMContentLoaded = function() { //取消事件监听,执行ready方法 if ( document.addEventListener ) { document.removeEventListener( "DOMContent

  • React this.setState方法使用原理分析介绍

    React this.setState方法使用原理分析介绍

    目录 摘要 1.异步的setState 2.多个setState方法 3.手动实现mySetState 摘要 这一篇文章,主要是简单的实现一下this.setState方法,为了实现该方法,就要知道this.setState方法具有什么特点. 首先在React组件中,我们先定义一个state和setState方法: myState = { value: 0 } mySetState = ( changeState ) =>{ this.setState( this.myState ) } 这里可

  • React createElement方法使用原理分析介绍

    React createElement方法使用原理分析介绍

    目录 摘要 1.创建方法 2.处理type 3.处理config 4.处理children 5.对比真正的React.createElement源码 摘要 在上一篇说过,React创建元素有两种方式: 第一种是通过JSX方式创建,第二种是通过React.createElement方法创建.但是通过JSX创建React元素的方式,最终也会经过babel进行转换,再用React.createElement进行元素创建. 而这一篇文章,主要是讲一下React.createElement是如何创建Rea

  • jQuery  ready方法实现原理详解

    今天闲来无事研究研究jQuery.ready()的内部实现,看JQ的源码一头雾水,由于自己很菜了,于是翻了翻牛人的播客,讲述详细,收获颇多. 先普及一下jquery.ready()和window.onload,window.onload事件是在页面所有的资源都加载完毕后触发的. 如果页面上有大图片等资源响应缓慢, 会导致window.onload事件迟迟无法触发.所以出现了DOM Ready事件. 此事件在DOM文档结构准备完毕后触发, 即在资源加载前触发. jQuery中的ready方法实现了

  • js中数组排序sort方法的原理分析

    本文实例分析了js中数组排序sort方法的原理.分享给大家供大家参考.具体分析如下: 最近在百度的项目中要用到对数组进行排序,当然一开始自然想到了数组的sort方法,这方法应用非常简单,大致如下: 复制代码 代码如下: window.onload=function(){         var arr=[2,55,55,1,75,3,9,35,70,166,432,678,32,98];         var arr2=["George","John","

  • jquery中filter方法用法实例分析

    本文实例讲述了jquery中filter方法用法.分享给大家供大家参考.具体分析如下: filter()方法将匹配元素集合缩减为匹配指定选择器的元素. filter方法中的参数可以为字符串值,包含供匹配当前元素集合的选择器表达式.   一.filter的参数类型可分为两种   1.传递选择器 $('a').filter('.external')   2.传递过滤函数 复制代码 代码如下: $('a').filter(function(index) {         return $(this)

  • jQuery.clean使用方法及思路分析

    一.jQuery.clean使用方法jQuery.clean( elems, context, fragment, scripts );二.思路分析1.处理参数context,确保其为文档根节点document2.处理参数elems数组(循环遍历数组) 2.1.elem为数字,转换为字符串 2.2.elem为非法值,跳出本次循环 2.3.elem为字符串 2.4.字符串不存在实体编号或html标签,则创建文本节点 2.5.字符串为实体编号或html标签 复制代码 代码如下: 创建一个div元素并

  • jQuery.buildFragment使用方法及思路分析

    一.jQuery.buildFragment使用方法 1.参数 jQuery.buildFragment( args, context, scripts );2.返回值 return { fragment: fragment, cacheable: cacheable }; 二.思路分析 1.处理context参数 根据传入到context参数值的不同,确保context为文档根节点document 2.限制可缓存条件 2.1.字符串小于512字节 2.2.字符串不存在option标签(克隆op

随机推荐