jQuery中dom加載的代碼實例

jQuery中的加載：

$(function(){
    alert(1);
});

調用的是rootjQuery.ready( selector );其中rootjQuery = jQuery(document);所以上述代碼可以寫成：

$(document).ready(function(){
	alert(1);
});

$().ready()中的ready()是實例方法：

ready: function( fn ) {
		// Add the callback
		jQuery.ready.promise().done( fn );

		return this;
	},

fn就是function(){alert(1)},被添加到延遲對象中，等待被觸發。

jQuery.ready.promise = function( obj ) {
	if ( !readyList ) {

		readyList = jQuery.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: https://bugs.jquery.com/ticket/12282#comment:15
		if ( document.readyState === "complete" ) {//DOM加載已經完成，直接調用
			// Handle it asynchronously to allow scripts the opportunity to delay ready
			setTimeout( jQuery.ready );//加延遲是針對IE

		} else {//dom加載未完成，進行監聽

			// Use the handy event callback
			document.addEventListener( "DOMContentLoaded", completed, false );

			//有緩存時，先出發load，在觸發DOMContentloaded
			window.addEventListener( "load", completed, false );
		}
	}
	return readyList.promise( obj );
};

等DOM加載完成後，會調用computed函數：最後直線工具方法jQuery.ready()

completed = function() {//保證jQuery.ready()隻觸發一次
		document.removeEventListener( "DOMContentLoaded", completed, false );
		window.removeEventListener( "load", completed, false );
		jQuery.ready();
	};

工具方法jQuery.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 ] );

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

其中readyList.resolveWith( document, [ jQuery ] );會執行前面的fn函數，function(){alert(1)}

$(function(arg){
	console.log(this);//document對象
	console.log(arg);//jQuery函數
});

工具方法holdReady()

$.holdReady(true);
$(function(){
	alert(1);
});

上述代碼不會彈出 1。

這個工具方法的用途：等a.js加載執行完後，在執行$(function(){alert(1);});

$.holdReady(true);
$.getScript("a.js",function(){
	$.holdReady(false)
})
$(function(){
   alert(1);
});

holdReady: function( hold ) {
		if ( hold ) {
			jQuery.readyWait++;
		} else {
			jQuery.ready( true );
		}
	}