【第21期】观点:人工智能到底用 GPU?还是用 FPGA?

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-事件-on源码

谈一下Jquery中的bind(),live(),delegate(),on()的区别?1.bind().bind()直接绑定在相应的DOM元素上,可以解决跨浏览器的问题。 但是对于动态添加的属于匹...

jquery的$(document).ready()和onload的加载顺序

简介:这是jquery的$(document).ready()和onload的加载顺序的详细页面,介绍了和javascript有关的知识 最近在改一个嵌入在frame中的页面的时候,使用了jquery做效果,而页面本身也绑定了onload事件。改完后,Firefox下测试正常流畅,IE下就要等个十几秒jquery的效果才出现,黄花菜都凉了。   起初以为是和本身onload加载的方法冲突。网上普遍的说法是$(document).ready()是在页面DOM解析完成后执行,而onload事件是在所有资源都准备完

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

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

jquery $(document).ready() 与window.onload的区别

Jquery中$(document).ready()的作用类似于传统JavaScript中的window.onload方法,不过与window.onload方法还是有区别的。 1.执行时间 window.onload必须等到页面内包括图片的所有元素加载完毕后才能执行。 $(document).ready()是DOM结构绘制完毕后就执行,不必等到加载完毕。 <strong

jQuery源码解析(3)—— ready加载、queue队列

ready、queue放在一块写,没有特殊的意思,只是相对来说它俩可能源码是最简单的了。ready是在dom加载完成后,以最快速度触发,很实用。queue是队列,比如动画的顺序触发就是通过默认队列’f...
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

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