jQuery源码之ready()事件

原创 2015年07月10日 22:56:22

          jquery中,等待DOM加载完成再执行的方法ready事件,相信大家经常使用该事件,今天,我们来看下jquery源码中是如何实现该功能的。

一、实例

        首先看下,如何使用ready事件:

$(document).ready(function(){
     console.log(1);
  });

等DOM加载完成后,执行匿名函数,在控制台中打印1。

首先了解一下DOMContentLoaded与window.load()。

DOMContentLoaded是DOM构建完成后触发,window.onload()是等所有的内容加载完成,例如图片等等。DOMContentLoaded事件先触发,后触发window.onload()事件。


二、源码解析:


  1.函数及变量初始化


jQuery.extend({

   isReady: false,   //DOM是否加载完毕,初始化为false

   readyWait: 1,   //需要等待的事件,初始化为1 

	// Hold (or release) the ready event
	holdReady: function( hold ) {  //是否要hold住ready事件。
		
	},

	// Handle when the DOM is ready
	ready: function( wait ) {  //ready函数,执行ready事件是调用

	}
});

/**
 * The ready event handler and self cleanup method
 */
function completed() {   //DOM完成后触发

}

jQuery.ready.promise = function( obj ) {   //ready事件调用的函数
	}


完成工具方法的扩展后,后面代码立即执行了:

2.执行 jQuery.ready.promise()

jQuery.ready.promise();

然我们看下该函数内部代码

jQuery.ready.promise = function( obj ) {
	if ( !readyList ) {     //第一次执行时readylist为undefined,进入if

		readyList = jQuery.Deferred();   //readyList为Deferred对象

		// Catch cases where $(document).ready() is called after the browser event has already occurred.
		// We once tried to use readyState "interactive" here, but it caused issues like the one
		// discovered by ChrisS here: http://bugs.jquery.com/ticket/12282#comment:15
		if ( document.readyState === "complete" ) {  //如果DOM已经加载完了,我们不再触发complete事件,直接走ready
			// Handle it asynchronously to allow scripts the opportunity to delay ready
			setTimeout( jQuery.ready );

		} else {      

			// Use the handy event callback
			document.addEventListener( "DOMContentLoaded", completed, false );  //给文档添加DOMContentLoaded事件

			// A fallback to window.onload, that will always work
			window.addEventListener( "load", completed, false );   //如果DOMContentLoade不执行,以此为备用,总是执行
		}
	}
	return readyList.promise( obj );  //返回状态不可改的Deferred对象
};


3.执行jquery实例ready事件

当工具方法都初始化完之后,开始执行$(document).ready()中的ready().

jQuery.fn.ready = function( fn ) {
	// Add the callback
	jQuery.ready.promise().done( fn );   //jQuery.ready.promise()函数,由于初始化工具方法时,已经执行过一遍,代码会直接返回Deferred对象。
	return this;                          //把入参添加到done中
};

4.DOM树构造完成

触发complete事件

function completed() {
	document.removeEventListener( "DOMContentLoaded", completed, false ); //去除绑定的函数
	window.removeEventListener( "load", completed, false );
	jQuery.ready();   //执行工具方法的ready
}

5.执行工具方法的ready方法

ready: function( wait ) {

		// Abort if there are pending holds or we're already ready
		if ( wait === true ? --jQuery.readyWait : jQuery.isReady ) {  //如果等待或者已经等待后了,跳过
			return;
		}

		// Remember that the DOM is ready
		jQuery.isReady = true;

		// If a normal DOM Ready event fired, decrement, and wait if need be
		if ( wait !== true && --jQuery.readyWait > 0 ) {
			return;
		}

		// If there are functions bound, to execute
		readyList.resolveWith( document, [ jQuery ] );   //触发resolveWith执行done中添加的函数

		// Trigger any bound ready events
		if ( jQuery.fn.triggerHandler ) {
			jQuery( document ).triggerHandler( "ready" );
			jQuery( document ).off( "ready" );
		}
	}
});





版权声明:本文为博主原创文章,未经博主允许不得转载。

jQuery源码分析之ready方法

首先阅读Deferred相关知识: 测试1; $(document).ready(function(){ alert("ready"); }); //这种方式调用以后,还要通过triggerHand...

jQuery中$(function(){})与(function($){})(jQuery)、$(document).ready(function(){})等的区别详细讲解

1、(function($) {…})(jQuery); 1)、原理: 这实际上是匿名函数,如下: function(arg){…} 这就定义了一个匿名函数,参数为arg 而...
  • szwangdf
  • szwangdf
  • 2015年01月26日 15:42
  • 89382

【jQuery源码浅析】(五)--文档加载--$.ready

我们经常会用到\$(document).ready(fn)或者\$(fn),可是,我们只是用这个函数来代替window.onload么?其实不是的,文档的加载除了DOM结构树的加载之外还包括其他外部资...

jquery ready方法实现原理 内部原理

今天闲来无事研究研究jquery.ready()的内部实现,看JQ的源码一头雾水,由于自己很菜了,于是翻了翻牛人的播客,讲述详细,收获颇多。 先普及一下jquery.ready()和window.o...

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

转自:http://nuysoft.iteye.com/blog/1202422 作者:nuysoft/JS攻城师/高云 QQ:47214707 EMail:nuysoft@gmail.com ...
  • jqrsdsy
  • jqrsdsy
  • 2012年09月05日 20:46
  • 607

jQuery中的ready和load事件(源码解析)

1. jQuery有3种针对文档加载的方法,分别是: $(document).ready(function() { //你的代码 }) //document ready的简写 $(fun...
  • zjuwwj
  • zjuwwj
  • 2016年12月08日 09:44
  • 191

jQuery源码学习 之 ready与load事件 ---- day4

jQuery中ready与load事件 1. jQuery中有3种针对文档加载的方法 $(document).ready(function() { // ...code... }); //...

jQuery源码阅读(九)---ready函数理解

在jQuery对象创建的时候,即init函数中,有处理这么一种参数情况,当selector为函数时,$(function(){ })表示跟$(document).ready(function(){ ...

jQuery的document ready与 onload事件——你真的思考过吗?

jQuery的document ready与 onload事件——你真的思考过吗?
  • ww0908
  • ww0908
  • 2017年05月19日 14:16
  • 151
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:jQuery源码之ready()事件
举报原因:
原因补充:

(最多只允许输入30个字)