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>

你可能感兴趣的:(jquery)