与jQuery事件模块的其他事件不同,其他事件是通过数据缓存实现的,而初始化事件,jQuery.ready则是通过回调函数列表实现的。$()的参数如果是函数就向回调函数列表中添加回调函数,同时为DOMContentLoaded注册事件,在注册的事件处理函数中,触发resolve事件。
以下是对jQuery源代码中的ready事件进行了简化的代码。具体如下:
1.定义了jQuery.ready.promise.功能及代码实现如下:
//jQuer的DOM页面加载通过回调函数列表完成 //下面的函数:1)初始化一个回调函数列表 //2)向DomContentLoaded注册监听事件 jQuery.ready.promise=function(obj){ if(!readyList){ readyList=jQuery.Defered(); document.addEventListener('DOMContentLoaded',compeleted,false); } return readyList.promise(obj); };
2.向document的DOMContentLoaded注册的监听函数compeleted代码如下:
compeleted=function(){ document.removeEventListener('DOMContentListener',compeleted,false); jQuery.ready(); };
3.上述代码中的jQuery.ready()实际上完成了回调函数列表的触发操作,具体如下:
jQuery.extend({ // Handle when the DOM is ready ready: function( wait ) { // 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"); // } },});
4.在初始化函数中,为回调函数列表添加加载成功的触发函数,如下所示:(实际上源代码调用了.ready方法,不过实际上就是封装了以下代码)
jQuery.fn.extend({ init: function( selector, context, rootjQuery ) { // Handle HTML strings if ( typeof selector === "string" ) { } else if ( jQuery.isFunction( selector ) ) { jQuery.ready.promise().done(selector); return this; } },
如此就能够保证,当页面加载完成时间DOMContentLoaded事件触发的时候,回调函数能够依次执行。