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中的ready和load事件(源码解析)

1. jQuery有3种针对文档加载的方法,分别是: $(document).ready(function() { //你的代码 }) //document ready的简写 $(fun...

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

转自:http://nuysoft.iteye.com/blog/1202422 作者:nuysoft/JS攻城师/高云 QQ:47214707 EMail:nuysoft@gmail.com ...

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

Js代码   作者:nuysoft/JS攻城师/高云 QQ:47214707 EMail:nuysoft@gmail.com     声明:本文为原创文章,如需转载,请注明来源并保留原...

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和load事件的区别?

概述: 大家在工作中用jQuery的时候一定会在使用之前这样: 1 2 3 4 5 6 7 8 //document ready $(document).r...

jquery的ready事件的实现机制浅析

页面初始化中,用的较多的就是$(document).ready(function(){//代码}); 或 $(window).load(function(){//代码}); 他们的区别就是,read...

jQuery 事件 - ready() 方法

页面加载完成后开始运行do stuff when DOM isready 中的语句!    $(document).ready(function() {       // do stuff whe...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

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