jQuery源码dom ready分析
一、前言
在平时开发web项目时,我们使用jquery框架时,可能经常这样来使用$(document).ready(fn),$(function(){}),这样使用的原因是在浏览器把DOM树渲染好之前,javascript是无法操作没渲染好的DOM节点。
其实除了$(document).ready(fn),$(function(){})写法外,还有两种让dom渲染完之后执行js的写法:
$(document).on('ready', fn2) //通过on事件绑定函数,通过trigger触发也可以达到 jQuery.ready.promise().done(fn); //通过这种方式也可以实现,jQuery.ready.promise()返回一个deferred对象,done(fn)添加回调方法
其中具体流程图如下(自己简单画了一下,有错请大家指正)
二、源码部分(建议看这部分是,先理解清楚deferred,promise)
①$(function(){}) =>到rootjQuery.ready(selector);
我们知道,jQuery是由new jQuery.fn.init(selector, context, rootjQuery)实例出来的,对接了两个参数,selector,context
// 构造函数,定义一个局部变量的jQuery
jQuery = function (selector, context) {
// jQuery对象实际上是init的构造函数的引用
return new jQuery.fn.init(selector, context, rootjQuery);
}
当我们使用$(function(){}),则选择器selector参数就变成了funciton,jQuery.fn.init函数判断selector为Funtion时,又指向了rootjQuery.ready(selector),就是$(document).ready(fn);
rootjQuery = $(document)
jQuery.fn = jquery.prototype = {
init:function(selector,context,rootjQuery){
if (jQuery.isFunction(selector)) {
// 引用非静态成员ready方法,等价于$(document).ready(selector)
return rootjQuery.ready(selector);
}
}
}
②$(document).on("ready",fn) => 到jQuery(document).trigger("ready").off("ready");
要理解$(document).on("ready",fn),我们要看ready部分
//扩展方法到jquery****************************************
jQuery.extend({
/**
记录监听DOMContentLoaded事件(DOM是否加载完成),加载完成设置为true(类似一个开关)
* type {Boolean} 默认为false,表示页面未加载完。当页面DOM加载完成,设置为true
*/
isReady: false, /**
需要预加载的观察者数量
* type {Number} 观察者数量
*/
readyWait: , /**
DOM加载完成,执行预加载
* @param {Boolean} wait 为true表示锁定委托人,为false表示释放委托人
*/
ready: function (wait) { if (wait === true ? --jQuery.readyWait : jQuery.isReady) {
return;
} // 检测body是否存在(IE的一个bug),存在继续向下执行,不存在进入语句,执行setTimeout定时器,直到body存在
if (!document.body) {
return setTimeout(jQuery.ready);
} // 开关,记录DOM加载完成
jQuery.isReady = true; // 检测所有的观察者是否执行完成
if (wait !== true && --jQuery.readyWait > ) {
return;
} // 委托人readyList通知观察者,开始执行回调函数,并将document作为这些函数的上下文环境
readyList.resolveWith(document, [jQuery]); // 检测trigger方法是否存在,触发绑定在document上的事件,执行完成之后并解绑
// $(document).on('ready', fn2);
// $(document).ready(fn1);
//这里的fn1会先执行,自己的ready事件绑定的fn2回调后执行
if (jQuery.fn.trigger) {
jQuery(document).trigger("ready").off("ready");
}
}
})
③$(document).ready(fn)
jQuery.fn = jquery.prototype = {
if (jQuery.isFunction(selector)) {
// 引用非静态成员ready方法
return rootjQuery.ready(selector);
},
ready: function (fn) {
// Add the callback
// promise类似一种事件委托,相当于一个创建委托人(已创建则无需创建,通过readyList判断是否已创建),在DOM加载完成之后,委托人会通知观察者done去执行回调函数fn
//调委托函数,返回deferred对象,添加done(fn)回调函数
jQuery.ready.promise().done(fn); return this;
}
}
最后dom ready相关部分源码详细如下:
// 构造函数,定义一个局部变量的jQuery
jQuery = function (selector, context) {
// jQuery对象实际上是init的构造函数的引用
return new jQuery.fn.init(selector, context, rootjQuery);
} // 就绪事件处理程序
completed = function (event) { // document.readyState 判断文档加载状态,'complete'代表文档已经完全加载 if (document.addEventListener || event.type === "load" || document.readyState === "complete") { detach(); //清理方法 jQuery.ready();//执行延迟加载方法
}
} // 清理DOMContentLoaded事件处理程序,为DOM事件做好准备,触发jQuery.ready方法
detach = function () {
// 标准的W3C监听事件
if (document.addEventListener) {
//删除DOMContentLoaded监听事件
document.removeEventListener("DOMContentLoaded", completed, false);
window.removeEventListener("load", completed, false);
} else {
// 针对IE,非标准的浏览器
// 删除onreadystatechange监听事件
document.detachEvent("onreadystatechange", completed);
window.detachEvent("onload", completed);
}
};
var readyList,rootjQuery=$(document);
jQuery.fn = jquery.prototype = {
if (jQuery.isFunction(selector)) {
// 引用非静态成员ready方法
return rootjQuery.ready(selector);
},
ready: function (fn) {
// Add the callback
// promise类似一种事件委托,相当于一个创建委托人(已创建则无需创建,通过readyList判断是否已创建),在DOM加载完成之后,委托人会通知观察者done去执行回调函数fn
//调委托函数,返回deferred对象,添加done(fn)回调函数
jQuery.ready.promise().done(fn); return this;
}
} //扩展方法到jquery****************************************
jQuery.extend({
/**
记录监听DOMContentLoaded事件(DOM是否加载完成),加载完成设置为true(类似一个开关)
* type {Boolean} 默认为false,表示页面未加载完。当页面DOM加载完成,设置为true
*/
isReady: false, /**
需要预加载的观察者数量
* type {Number} 观察者数量
*/
readyWait: , /**
锁定或释放预加载委托人
* @param {Boolean} hold 为true表示锁定预加载委托人,为false表示释放委托人
*/
holdReady: function (hold) {
if (hold) {
jQuery.readyWait++;
} else {
jQuery.ready(true);
}
}, /**
DOM加载完成,执行预加载
* @param {Boolean} wait 为true表示锁定委托人,为false表示释放委托人
*/
ready: function (wait) { // Abort if there are pending holds or we're already ready
if (wait === true ? --jQuery.readyWait : jQuery.isReady) {
return;
} // 检测body是否存在(IE的一个bug),存在继续向下执行,不存在进入语句,执行setTimeout定时器,直到body存在
if (!document.body) {
return setTimeout(jQuery.ready);
} // 开关,记录DOM加载完成
jQuery.isReady = true; // 检测所有的观察者是否执行完成
if (wait !== true && --jQuery.readyWait > ) {
return;
} // 委托人readyList通知观察者,开始执行回调函数,并将document作为这些函数的上下文环境
readyList.resolveWith(document, [jQuery]); // 检测trigger方法是否存在,触发绑定在document上的事件,执行完成之后并解绑
// $(document).on('ready', fn2);
// $(document).ready(fn1);
//这里的fn1会先执行,自己的ready事件绑定的fn2回调后执行
if (jQuery.fn.trigger) {
jQuery(document).trigger("ready").off("ready");
}
}
}) // 预加载委托函数
jQuery.ready.promise = function (obj) {
// 判断预加载委托人是否存在
if (!readyList) {
// 创建一个预加载委托人
readyList = jQuery.Deferred();
/**
W3C标准DOM浏览器
* 0-uninitialized:XML 对象被产生,但没有任何文件被加载。
* 1-loading:加载程序进行中,但文件尚未开始解析。
* 2-loaded:部分的文件已经加载且进行解析,但对象模型尚未生效。
* 3-interactive:仅对已加载的部分文件有效,在此情况下,对象模型是有效但只读的。
* 4-complete:文件已完全加载,代表加载成功。
*/ // 检测document内容是否加载完成,加载完成返回true,否者返回false
if (document.readyState === "complete") { /**
* 函数延迟0毫秒执行并不是立即执行, 而是等浏览器运行完挂起的事件句柄和已经更新完文档状态之后才
* 运行这个函数.详情见《JavaScript Definition Guide 5th Edition(JavaScript权威指南第5版)》
* 函数延迟1毫秒或者为空代表立即执行
*/
// 立即调用jQuery.ready方法,执行预加载内容
setTimeout(jQuery.ready); // 检测是否符合W3C标准事件模型(IE不支持)
} else if (document.addEventListener) {
// 监听DOMContentLoaded事件,当DOM加载完成,触发completed方法
// DOMContentLoaded事件在DOM加载完成时触发
// completed方法,目的是先删除监听DOMContentLoaded事件,然后执行jQuery.ready()方法。(删除事件,清除内存)
document.addEventListener("DOMContentLoaded", completed, false); // 若失败,给window.onload注册一个jQuery.ready方法,并在页面加载完成之后执行,目的是兼容低版本浏览器,防止出现预加载失败
window.addEventListener("load", completed, false); // IE事件模型
} else {
// 监听onreadystatechange事件,当DOM加载完成,触发DOMContentLoaded方法
document.attachEvent("onreadystatechange", completed); // 同理,若失败,兼容操作.
window.attachEvent("onload", completed); // 声明一个变量top, 目的:如果在IE下,文档不是嵌套在框架中, 就不断地检测文档是否准备就绪.
var top = false; try {
//检测是否嵌套在框架中,嵌套在框架中返回false,不嵌套返回document.documentElement
//返回嵌入当前window对象的元素(比如 <iframe> 或者 <object>),如果当前window对象已经是顶层窗口,则返回null,如果有框架则document.documentElement返回为null.
top = window.frameElement == null && document.documentElement;
} catch (e) { } // 检测是否存在doScroll方法
// IE支持doScroll,doScroll捕捉页面垂直和水平的滚动,他在ondocumentready 事件触发之后,onload事件触发之前触发
if (top && top.doScroll) {
(function doScrollCheck() {
if (!jQuery.isReady) { try {
top.doScroll("left");
} catch (e) {
return setTimeout(doScrollCheck, );
} detach(); // 执行jQuery.ready方法,说明页面DOM加载完成,其实就是改变deffered对象的状态,resolvewith完成,触发完成回调done(fn)
jQuery.ready();
}
})();
}
}
}
// 返回一个被限制的委托人(只能执行,不能改变的状态的委托人)
return readyList.promise(obj);
};
jQuery源码dom ready分析的更多相关文章
- jQuery源码-dom操作之jQuery.fn.html
写在前面 前面陆陆续续写了jQuery源码的一些分析,尽可能地想要cover里面的源码细节,结果导致进度有些缓慢.jQuery的源码本来就比较晦涩,里面还有很多为了解决兼容问题很引入的神代码,如果不g ...
- jquery源码 DOM加载
jQuery版本:2.0.3 DOM加载有关的扩展 isReady:DOM是否加载完(内部使用) readyWait:等待多少文件的计数器(内部使用) holdReady():推迟DOM触发 read ...
- jQuery源码 Ajax模块分析
写在前面: 先讲讲ajax中的相关函数,然后结合函数功能来具体分析源代码. 相关函数: >>ajax全局事件处理程序 .ajaxStart(handler) 注册一个ajaxStart事件 ...
- jQuery源码解读-事件分析
最原始的事件注册 addEventListener方法大家应该都很熟悉,它是Html元素注册事件最原始的方法.先看下addEventListener方法签名: element.addEventList ...
- jQuery源码-dom操作之jQuery.fn.text
写在前面 jQuery.fn.text在jQuery是个使用频率比较高的接口,它的作用无非是设置/获取dom节点的内容文本,下文会通过几个简单的例子来说明.text()接口的使用,以及最后会对源码进行 ...
- jQuery源码分析学习--资料收集--更新中
1.逐行分析jQuery源码的奥秘 - 网易云课堂 http://study.163.com/course/courseMain.htm?courseId=465001#/courseDetail? ...
- jQuery源码解析资源便签
最近开始解读jQuery源码,下面的链接都是搜过来的,当然妙味课堂 有相关的一系列视频,长达100多期,就像一只蜗牛慢慢爬, 至少品读三个框架,以后可以打打怪,自己造造轮子. 完全理解jQuery源代 ...
- jquery源码分析(二)——架构设计
要学习一个库首先的理清它整体架构: 1.jQuery源码大致架构如下:(基于 jQuery 1.11 版本,共计8829行源码)(21,94) 定义了一些变量和函数jQu ...
- jQuery源码分析系列
声明:本文为原创文章,如需转载,请注明来源并保留原文链接Aaron,谢谢! 版本截止到2013.8.24 jQuery官方发布最新的的2.0.3为准 附上每一章的源码注释分析 :https://git ...
随机推荐
- Android系统默认设置
修改Settings源码,可修改系统设置项,Settings数据被存放于com.android.providers.settings/databases/settings.db中,如果想修改系统启动后 ...
- C和设计原则
---DO NOT REPEAT YOURSELF--- 建设性的懒惰,是程序员的第一美德.最简单的懒惰就是不要重复自己,简单到一个命名规则,例如C语言中: int osip_list_init (o ...
- ADO与ADO.NET的区别
ADO是使用ole db接口并基于微软的COM技术,ADO.NET使用自己的ADO.NET接口并基于微软的.NET体系架构,所以ADO.NET与ADO是两种数据访问方式. ADO以recordset存 ...
- (5)html表单
本节解说: html的表单. form * <form> 标签用于为用户输入创建 HTML 表单. 表单能够包含 input 元素,比如文本字段.复选框.单选框.提交按钮等等. * < ...
- JS瀑布流布局模式(1)
在实际的项目中,偶尔会用到一种布局——瀑布流布局.瀑布流布局的特点是,在多列布局时,可以保证内容区块在水平方向上不产生大的空隙,类似瀑布的效果.简单的说,在垂直列表里,内容区块是一个挨着一个的.当内容 ...
- :app:transformResourcesWithMergeJavaResForDebug FAILED
资源xml有错误,应该排查每一处xml. 如果提示gradle相关错误,需要修改系统级的build.gradle和程序级的build.gradle,比如后者不能缺少:dependencies { ...
- Simple Worker Thread Class
http://www.codeproject.com/Articles/36184/Simple-Worker-Thread-Class Introduction Many times we need ...
- Java数据结构之线性表
从这里开始将要进行Java数据结构的相关讲解,Are you ready?Let's go~~ java中的数据结构模型可以分为一下几部分: 1.线性结构 2.树形结构 3.图形或者网状结构 接下来的 ...
- jQuery进行DOM操作记录
1.在元素内部插入DOM元素 ①插入到元素内部原有元素之后 append(content) 返回值:jQuery 参数-content:要插入的元素String,Element,jQuer ...
- 如何从iTunes Connect中提款呢?
最近在AppStore有点小小小收入,但如何从iTunes Connect中提款呢? (Payments and Financial Reports) 网上查了下,发现有种说法:“只要账号余额达到15 ...