jQuery之ready实现

ready用来实现延迟加载的方法，最主要的功能就是$(document).ready(function(){......}),当整个document加载完成后再执行其中的方法。让我们看一下jQuery里具体的实现方式。

首先看一下源码:

1. .ready()方法

ready: function( fn ) { // Attach the listeners jQuery.bindReady(); // Add the callback readyList.done( fn ); return this; },

2. jQuery.bindReady()方法

 

bindReady: function() { if ( readyList ) { return; } readyList = jQuery._Deferred(); // Catch cases where $(document).ready() is called after the // browser event has already occurred. if ( document.readyState === "complete" ) { // Handle it asynchronously to allow scripts the opportunity to delay ready return setTimeout( jQuery.ready, 1 ); } // Mozilla, Opera and webkit nightlies currently support this event if ( document.addEventListener ) { // Use the handy event callback document.addEventListener( "DOMContentLoaded", DOMContentLoaded, false ); // A fallback to window.onload, that will always work window.addEventListener( "load", jQuery.ready, false ); // If IE event model is used } else if ( document.attachEvent ) { // ensure firing before onload, // maybe late but safe also for iframes document.attachEvent( "onreadystatechange", DOMContentLoaded ); // A fallback to window.onload, that will always work window.attachEvent( "onload", jQuery.ready ); // If IE and not a frame // continually check to see if the document is ready var toplevel = false; try { toplevel = window.frameElement == null; } catch(e) {} if ( document.documentElement.doScroll && toplevel ) { doScrollCheck(); } } },

3. Deferred方法——个人认为可以当做一个js闭包的很好的例子

 

_Deferred: function() { var // callbacks list callbacks = [], // stored [ context , args ] fired, // to avoid firing when already doing so firing, // flag to know if the deferred has been cancelled cancelled, // the deferred itself deferred = { // done( f1, f2, ...) done: function() { if ( !cancelled ) { var args = arguments, i, length, elem, type, _fired; if ( fired ) { _fired = fired; fired = 0; } for ( i = 0, length = args.length; i < length; i++ ) { elem = args[ i ]; type = jQuery.type( elem ); if ( type === "array" ) { deferred.done.apply( deferred, elem ); } else if ( type === "function" ) { callbacks.push( elem ); } } if ( _fired ) { deferred.resolveWith( _fired[ 0 ], _fired[ 1 ] ); } } return this; }, // resolve with given context and args resolveWith: function( context, args ) { if ( !cancelled && !fired && !firing ) { // make sure args are available (#8421) args = args || []; firing = 1; try { while( callbacks[ 0 ] ) { callbacks.shift().apply( context, args ); } } finally { fired = [ context, args ]; firing = 0; } } return this; }, // resolve with this as context and given arguments resolve: function() { deferred.resolveWith( this, arguments ); return this; }, // Has this deferred been resolved? isResolved: function() { return !!( firing || fired ); }, // Cancel cancel: function() { cancelled = 1; callbacks = []; return this; } }; return deferred; },  

$(document).ready(function() { var s = $("<div>", { "class" : "test", text : "Click me!", css : "true", click : function() { jQuery(function() { alert(123) }); } }).appendTo("body");  

4.jQuery.ready()

ready: function( wait ) { //some function ¡­¡­ ¡­¡­ readyList.resolveWith( document, [ jQuery ] ); // Trigger any bound ready events if ( jQuery.fn.trigger ) { jQuery( document ).trigger( "ready" ).unbind( "ready" ); } } },  

 

当执行.ready()方法时，则会触发jQuery.bindReady(),然后创建readyList = jQuery._Deferred();返回的deferred对象是一个闭包，它封装了一些方法，主要是done,resolveWith,  done用来push function to callbacklist   resolveWith则是执行callbacklist里的function.在bindReady中还有个重要功能就是绑定原生事件，当dom加载完成以后，触发jQuery.ready()方法。该方法做一些已经ready过的标记，并且触发readyList.resolveWith。

值得学习的地方

1.不同浏览器内核绑定onload方法

2.deferred闭包的使用

3.队列处理的技巧