jQuery->$(fn)

已知$(fn)使用Deferred对象实现,你觉得实现$(fn)的步骤是什么呢?

1.给DOM加载绑定事件回调函数
2.将fn添加到延迟对象Deferred中
3.DOM加载完毕,回调函数调用Deferred.resolveWith(),执行回调函数fn

有点事后诸葛亮的意思哎!不过想想还能怎么做呢!

init 函数中 rootjQuery.ready( selector );
ready: function( fn ) {
	jQuery.ready.promise().done( fn );//给DOM加载绑定回调函数,将fn注册进Deferred对象中,在这一句代码完成了。
	return this;
}

  

//给DOM的加载绑定回调函数completed,详细的分析可以看看这篇文字http://www.nowamagic.net/javascript/js_OnDomReady.php

jQuery.ready.promise = function( obj ) {
	if ( !readyList ) {
		readyList = jQuery.Deferred(); 
		if ( document.readyState === "complete" ) {
			setTimeout( jQuery.ready );
		} else if ( document.addEventListener ) {
			document.addEventListener( "DOMContentLoaded", completed, false );
			window.addEventListener( "load", completed, false );
		} else {
			document.attachEvent( "onreadystatechange", completed );
			window.attachEvent( "onload", completed );
			var top = false;
			try {
				top = window.frameElement == null && document.documentElement;
			} catch(e) {}

			if ( top && top.doScroll ) {
				(function doScrollCheck() {
					if ( !jQuery.isReady ) {
						try {
							top.doScroll("left");
						} catch(e) {
							return setTimeout( doScrollCheck, 50 );
						}
						detach();
						jQuery.ready();
					}
				})();
			}
		}
	}
	return readyList.promise( obj );
}

  

function completed( event ) {
	if ( document.addEventListener || event.type === "load" || document.readyState === "complete" ) {
		detach();
		jQuery.ready();
	}
}

// ready函数实现了最后一步,调用resolveWith,触发延迟对象的回调功能
//对于这个函数比较好奇的,可以看看holdReady函数的功能
ready: function( wait ) {
		if ( wait === true ? --jQuery.readyWait : jQuery.isReady ) {
			return;
		}
		if ( !document.body ) {
			return setTimeout( jQuery.ready );
		}
		
		jQuery.isReady = true;
		if ( wait !== true && --jQuery.readyWait > 0 ) {
			return;
		}
		readyList.resolveWith( document, [ jQuery ] );

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

  

我们监听DOM加载,DOM加载完毕后进行回调,页面中散落各处的js脚本的执行时机是什么?

这个问题可以参考Html Dom加载 ,下面是我自己测试使用的页面,大家可以想想最终浏览器console打印的顺序是什么。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" dir="ltr" id="html">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>Sizzle Test Suite</title>
	<script type="text/javascript" src="js/jquery-1.10.2.js"></script>
</head>

<body>
</body>
<script type="text/javascript" >

	window.onload = function (){
		console.log(1);
	}
	
	$(function(){
		console.log(2);
	});	
	</script>
</html>
原文地址:https://www.cnblogs.com/sudo/p/3567733.html