jquery dom ready, jqery2.1.1实现-源码分析

本文链接http://www.cnblogs.com/Bond/p/4178311.html

jquery document  ready的实现其很很简,虽说简单,其很很多人还是没去关注过它的实现。我现在闲来无事就闲扯一下jquery document  ready的实现。在低版本1.XX的实现和2.XX的略有不同,这里以2.1.1为准

平时一般都会这样写,一般就这两种方式

$(document).ready(function(){
    //do something
})
$(function(){
    //do something
})

分析源码发现其实以上两种写法是一样的效果,所以推荐使用第二组写法,更为简洁。

发现最后都是$(document).ready(),为了找到实现,我们就要找到JQuery.fn.ready的实现,于是我们找到了这小段

不难发现最后都是调用了jQuery.ready.promise().done( fn );

显然这里得找到jQuery.ready.promise,其实jQuery.ready.promise()返回了一个promise对象然后done(fn) 其实就是向里面添加回调函数,最终也是调用的Callback的add,

根据上面的推测我们找到了一下这段代码实现

调用jQuery.ready.promise(),进入函数判断readyList是否已经存在,不存在就创建一个deferred对象赋给readyList,此时readyList就是一个Deferred实例对象

往下判断document.readyState === "complete"  如果未true 就执行setTimeout( jQuery.ready ); 稍后分析jQuery.ready这个挂在到JQuery上的静态方法

下面就是给document 和window分别添加相应的事件和回调,由于这里只支持高级浏览器,所以简化了很多只有两句话

document.addEventListener( "DOMContentLoaded", completed, false );

window.addEventListener( "load", completed, false );

最终返回return readyList.promise( obj ),所有的DOM ready 的回调都添加到了readyList上面; 这里依赖了JQuery Deferred模块,JQuery Deferred又依赖于Callback. 有兴趣可以去看看它们的实现,还是很有技巧性的,值得一看,这里就不扯那个,一扯就停不下来了。

其实就是返回deferred.promise(obj) ,通过 deferred.promise() 方法返回的 deferred promise 对象,是没有 resolve ,reject, progress , resolveWith, rejectWith , progressWith 这些可以改变状态的方法,你只能使用 done, then ,fail 等方法添加 handler 或者判断状态。

这里我们发现最终当DOMContentLoaded 会执行completed 其实completed 最后也是执行jQuery.ready();

最后我们只需要扒开jQuery.ready神秘的面纱,dom ready的最后的实现就迎刃而解了。

于是我们又找到了这段代码

以下简单分析一下它的实现

前面直接调用jQuery.ready(),进入这个函数后第一个判断为false,往下走jQuery.isReady = true; 标记isReady =true, 第二个if也直接跳过,最后执行readyList.resolveWith( document, [ jQuery ] );

这句话是最后的核心,readyList之前被赋值为了Deferred对象的一个实例,这里执行resolveWith() 这里简单说下,resolveWith内部其实就是 jQuery.Callbacks("once memory"),然后resolveWith就是fireWith

知道最后调用的上下文和参数,最终执行之前添加到readyList里面的所有回调。

readyList内部的

[ "resolve", "done", jQuery.Callbacks("once memory"), "resolved" ],
[ "reject", "fail", jQuery.Callbacks("once memory"), "rejected" ],

[ "notify", "progress", jQuery.Callbacks("memory") ]

其它的都忽略 只关注这个jQuery.Callbacks("once memory")

我们所有的$(fn) fn都是加到了 jQuery.Callbacks("once memory") 里面,一旦执行过一次fire第二次调用fire就不会有作用,如果调用过fire在add(fn) 这个fn会立即执行。

所以:document ready只会执行一次,一旦执行过在再次$(fn)此时 fn会立即执行。

一个简单的document ready jqeury的实现还是比较绕的,内部依赖了Deferred, 不清楚Deferred的人看来会感觉晕晕的,其实我们可以抛开Deferred 再来看就会觉得简单许多。

时间: 2024-11-05 15:54:18

jquery dom ready, jqery2.1.1实现-源码分析的相关文章

jQuery原型方法first,last,eq,slice源码分析

这4个方法中前3个方法很常用大家都见过,但是slice方法可能会以为是数组方法,其实slice也是jQuery的一个原型方法,只不过是底层方法是为其他方法服务的(更具体点是为eq方法服务的),首先还是看下这几个方法前台是怎么使用的: eq 概述  获取第N个元素 参数 一个整数,指示元素的位置,从集合中的最后一个元素开始倒数.(1算起) 示例 参数index描述: //获取匹配的第二个元素 //HTML 代码: <p> This is just a test.</p> <p&

jQuery.access源码分析

基本理解 jQuery.attr是jQuery.attr,jQuery.prop,jQuery.css提供底层支持,jQuery里一个比较有特色的地方就是函数的重载, 比如attr,有如下几种重载 $('#box').attr('title') $('#box').attr('title','标题') $('#box').attr({title:'标题',data-menu-toggle:'dropdown'}) $('#box').attr('title',function () {....}

jQuery-1.9.1源码分析系列完毕目录整理

jQuery 1.9.1源码分析已经完毕.目录如下 jQuery-1.9.1源码分析系列(一)整体架构 jQuery-1.9.1源码分析系列(一)整体架构续 jQuery-1.9.1源码分析系列(二)jQuery选择器 jQuery-1.9.1源码分析系列(二)jQuery选择器续1 jQuery-1.9.1源码分析系列(二)jQuery选择器续2——筛选 jQuery-1.9.1源码分析系列(三) Sizzle选择器引擎——词法解析 jQuery-1.9.1源码分析系列(三) Sizzle选择

jQuery1.9.1源码分析--数据缓存Data模块

阅读目录 jQuery API中Data的基本使用方法介绍 jQuery.acceptData(elem)源码分析 jQuery.data(elem, name, data)源码分析 internalRemoveData方法源码分析 internalData方法的源码分析 jQuery.fn.extend({data: function( key, value ) {}})源码分析 jQuery.extend({removeData: function( elem, name ) {}})源码分

jQuery1.6源码分析系列

原文地址:http://www.cnblogs.com/nuysoft/archive/2011/11/14/2248023.html jQuery源码分析(版本1.6.1) 目录 00 前言开光 01 总体架构 02 正则表达式-RegExp-常用正则表达式 03 构造jQuery对象-源码结构和核心函数 03 构造jQuery对象-工具函数 04 选择器 Sizzle-工作原理 04 选择器 Sizzle-设计思路 04 选择器 Sizzle-从左向右的余热 04 选择器 Sizzle-块分

jQuery实现DOM加载方法源码分析

传统的判断dom加载的方法 使用 dom0级 onload事件来进行触发所有浏览器都支持在最初是很流行的写法 我们都熟悉这种写法: window.onload=function(){ ... }  但是onload事件触发过于缓慢,尤其是在存在很多外部图片或者视频文件的时候,为了更好的了解这一点有必要知道一个html文档是如何进行加载的,这里引用一个园友的表述: 1.用户输入网址(假设是个html页面,并且是第一次访问),浏览器向服务器发出请求,服务器返回html文件: 2.浏览器开始载入htm

jQuery 源码分析(十八) ready事件详解

ready事件是当DOM文档树加载完成后执行一个函数(不包含图片,css等),因此它的触发要早于load事件.用法: $(document).ready(fun) ;fun是一个函数,这样当DOM树加载完毕后就会执行该匿名函数了 ready有一个简写,可以直接传入$(fun)即可,这是因为在jQuey内部也定义了一个$(document)的jQuery对象,和我们在上面的写法是一样的 ready事件和window的onload区别: ready事件 ;等dom树载完毕后就可以执行 onload事

[转]jQuery DOM Ready

一直以来,各种JS最佳实践都会告诉我们,将JS放在HTML的最后,即</body>之前,理由就是:JS会阻塞下载,而且,在JS中很有可能有对DOM的操作,放在HTML的最后,可以尽可能的保证JS的执行在DOM加载完成之后.而如果放在onload事件中执行,如果页面有很多图像,那么页面的onload事件要过很久才会触发,因此DOM Ready事件就是最好的执行JS的时间了. 所以,如果有个DOM Ready事件就好了,虽然现代浏览器已经支持DOMContentLoaded事件,但是我们还是得处理

jQuery 源码分析(十三) 数据操作模块 DOM属性 详解

jQuery的属性操作模块总共有4个部分,本篇说一下第2个部分:DOM属性部分,用于修改DOM元素的属性的(属性和特性是不一样的,一般将property翻译为属性,attribute翻译为特性) DOM属性的静态方法接口如下: prop(elem, name, value)    ;设置或读取DOM属性,有两种用法,如下 ·$.prop(elem,name,value)      ;传入第三个参数表示设置elem元素的name属性值为value ·$.prop(elem,name,)