IT狗

jquery源码 DOM加载

jQuery版本:2.0.3

DOM加载有关的扩大

  • isReady:DOM是不是加载完(里边运用) 
  • readyWait:等候几多文件的计数器(里边运用)
  • holdReady():推延DOM触发
  • ready():预备DOM触发。
  • jQuery.ready.promise=function(){};  监听DOM的异步操纵(里边运用)

一、$(function(){})和原生window.onload的干系

这个在口试中也是经常会被问到的。从上面几个角度来阐发一下它们的区分

1、履行机会

页面加载,先加载节点,再加载文件,比方img文件,flash等。

$(function(){})DOM加载完履行。大概DOM元素联系关系的东西并没有加载完。

window.onload等节点和文件都加载完履行。

对应的事件监听

jQuery用的是DOMContentLoaded事件。

DOMDContentLoaded:原生DOM加载事件,这个事件触发表示DOM加载完了。

我之前写过一篇美文的页面加载工夫阐发里也有说到。

onload对应的是load事件。

2、个数

window.onload不能够写多个,后面的会掩盖后面的。

$(function(){})可以写多个。都会履行 。

3、简化写法

$(function(){})是$(document) .ready(function(){});的简化写法。

window.onload没有简化写法。

二、jQurey怎样完成DOM ready的

jQuery间接挪用DOMContentLoaded来完成DOM的ready。可是DOMContentLoaded和onLoad一样,浏览器只履行一次,jQuery用甚么断定是不是曾经履行过呢?document.readyState就是断定这个的根据。

readyState是document的属性,统共有3个值:

  • loading:文档正在加载中
  • interactive:文档曾经加载完成,正在进行css和图画等资本的加载
  • complete:文档的以是资本加载完成

断定完以后怎样回调呢?就是用Promise。jQuery经过new一个$.Deferred(promise)对象来完成对DOM的ready的回调,在DOMContentLoaded中将这个promise给resolve掉,这样就履行了之前注册的回调函数,同时后面新注册的回调也会马上履行。

可是在挪用promise之前,jQuery履行了一次setTimeout,由于jQuery.Promise是不会发生异步的,这和尺度的promise范例是不一样的,一切jQuery本身又手动做了一次setTimeout来完成异步。这样使得不论运用在DOM的ready之前注册的回调仍是以后注册的回调都会在异步中履行。

三、源码团体完成逻辑

$(fn)==>new一个 jQuery.fn.init(fn)==>前往$(document).ready( fn)。也就是说

  • $(function(){}) =》
  • 挪用$(document).ready(function(){})=》
  • 相当于$().ready(fn)实例要领=》
  • 挪用的jQuery.ready.promise().done(fn)=》
  • jQuery.ready.promise中不论if仍是else终极都是挪用jQuery.ready(),并前往promise=》
  • jQuery.ready()内里重点是readyList.resolveWith( document, [ jQuery ] );已完成。至此DOM加载终了就可以挪用fn了。

 

 

 

四、完成细节

1、重点是:jQuery.ready.promise()要领【灵巧

假如DOM曾经加载完成了,挪用jQuery.ready()这个东西要领;

假如DOM没加载完,监听DOMContentLoaded事件和load事件,等事件发生时回调completed(),终极也是挪用jQuery.ready()这个东西要领;

var    // A central reference to the root jQuery(document)    rootjQuery,    // The deferred used on DOM ready    readyList;jQuery.ready.promise = function( obj ) {    if ( !readyList ) { //第一次readyList为空可以出去,后续就进不来if了,只履行一次        readyList = jQuery.Deferred(); //第一步,创立耽误对象        if ( document.readyState === "complete" ) { //DOM加载完成的标记就是document.readyState为complete,假如DOM曾经加载好了就间接调东西要领jQuery.ready。            setTimeout( jQuery.ready );//加定时器是为了兼容IE        } else {//DOM没有加载完检测,即检测了DOMContentLoaded事件,也检测了load事件;终极走回调completed函数            // Use the handy event callback            document.addEventListener( "DOMContentLoaded", completed, false );            // A fallback to window.onload, that will always work            window.addEventListener( "load", completed, false ); //由于火狐浏览器会缓存load事件,为了第一工夫响应以是对load也监听了        }    }    return readyList.promise( obj );};

此文由 IT狗 编辑,本网站所发布展示的作品/文章版权归原作者所有,任何商业用途均须联系作者!

相关推荐

评论 暂无评论