献给和我合作的过得前端童靴们:jquery源码分析--序3
来源:互联网 发布:南风捏脸数据2017 编辑:程序博客网 时间:2024/05/17 17:15
jquery 源码分析
jquery 版本 1.12.2
浏览器: ie, 谷歌,火狐, 360
编辑器:Notepad++
接着上一篇。这次我们分析jQuery加载的时候 执行了5次构造函数,说明在加载过程中,创建了5个jQuery对象。
在此之前我们先来了解一下jQuery.fn.init究竟做了哪些事情?
还是为了方便阅读,我还是精简了代码。
jQuery.fn.init = function( selector, context, root ) { if ( !selector ) { return this; } if ( typeof selector === "string" ) { if ( match && ( match[ 1 ] || !context ) ) { do something... return this; } else if ( !context || context.jquery ) { return ( context || root ).find( selector ); } else { return this.constructor( context ).find( selector ); } }else if ( selector.nodeType ) { do something... return this; } else if ( jQuery.isFunction( selector ) ) { return typeof root.ready !== "undefined" ? root.ready( selector ) : selector( jQuery ); } if ( selector.selector !== undefined ) { do something... } return jQuery.makeArray( selector, this );}
1.如果参数“selector”为flase,直接返回自己。
2.如果参数“selector”是字符串,根据正则匹配,返回自己。如果匹配失败: 根据context 是不是 jQuery对象,是则使用jQuery的find方法查找“selector”,如果不是则先创建jQuery对象后,然后再调用find()方法。
3.如果参数“selector”是document元素,则返回自己。
4.如果参数“selector”是函数,root是否具有ready方法,有则调用ready方法,无则直接执行selector( jQuery )。
5.如果都不是, 则调用jQuery.makeArray创建一个数组并返回自己。
第一个:
jQuery( document )传递的是一个document元素, 那么符合条件的第三条规则。如果参数“selector”是document元素。
精简一下代码得到:
jQuery.fn.init = function( selector, context, root ) { this.context = this[ 0 ] = selector; this.length = 1; return this;}
好了。。简单的我都不知道怎么解释了。以后碰到什么 $(document.getElementById(‘xxx’));应该知道里面装着什么东西了吧。
rootjQuery这个变量的作用可以在 jQuery.fn.init 分析出:
1.创建了一个根节点,提供 find方法调用;
2.包装一个ready方法;
第二个:
符合条件的第五条规则。
var support = {};jQuery.fn.init = function( selector, context, root ) { if ( selector.selector !== undefined ) { this.selector = selector.selector; this.context = selector.context; } return jQuery.makeArray( selector, this );}
jQuery.makeArray: 将类数组对象转换为数组对象。
api手册:http://jquery.cuishifeng.cn/jQuery.makeArray.html
这段代码的意思就是 遍历 jQuery( support ) 对象到最后一个属性名称 === “0”, 由于 support = {}, support.ownFirst=true;(分析了大半天,jQuery加载的时候并没有对“support”进行更新。。很奇怪为啥这么写,不直接写成“support.ownFirst=true”)
注意:support 其实就是“jQuery.support”具体可以参考:
jQuery.extend( { // jQuery.support is not used in Core but other projects attach their // properties to it so it needs to exist. support: support } );`
jQuery.support: 一组用于展示不同浏览器各自特性和bug的属性集合。
aip手册:http://jquery.cuishifeng.cn/jQuery.support.html
第三个:
符合条件的第四条规则。
精简代码后得到:
function( selector, context, root ) { root = root || rootjQuery; if ( jQuery.isFunction( selector ) ) { return typeof root.ready !== "undefined" ? root.ready( selector ) : selector( jQuery ); }}
$(document).ready: 当DOM载入就绪可以查询及操纵时绑定一个要执行的函数。
api手册:http://jquery.cuishifeng.cn/ready.html
所以这个的作用就是:当页面加载完成以后,如果是ie<8的版本会为body.style.zoom = 1的css属性。
第四,五个:
作用:当页面加载完成以后,触发“ready”事件并移除。(以后讨论事件的内部机制)。
那么jQuery.ready方法是怎么被执行的呢?
请看这段代码:
精简一下代码后:
jQuery.ready.promise = function( obj ) { if ( !readyList ) { if ( document.readyState === "complete" || ...){ window.setTimeout( jQuery.ready ); }else if ( document.addEventListener ) { document.addEventListener( "DOMContentLoaded", completed ); window.addEventListener( "load", completed ); }else { do something.... } } return readyList.promise( obj );};
这是实现onload事件绑定的兼容函数。“window.setTimeout( jQuery.ready );”
看到这里就明白了吧。
总结一下:
jQuery加载的时候创建了5个jQuery对象:
1.把document元素缓存起来。
2.定义了一个浏览器兼容的属性。
3.:当页面加载完成以后,如果是ie<8的版本会为body.style.zoom = 1的css属性。
4.触发“ready”事件
5.移除“ready”事件
下一篇总体简略预览一下jQuery加载的时候还做了哪些事情。
- 献给和我合作的过得前端童靴们:jquery源码分析--序3
- 献给和我合作的过得前端童靴们:jquery源码分析--序
- 献给和我合作的过得前端童靴们:jquery源码分析--序2
- 献给和我合作的过得前端童靴们:jquery源码分析--序4
- 献给和我合作的过得前端童靴们:jquery源码分析--核心函数(创建jquery空对象)
- 献给和我合作的过得前端童靴们:jquery源码分析--核心函数(包装对象和holdReady方法)
- 献给和我合作的过得前端童靴们:jquery源码分析--核心函数(动态创建document元素)
- 献给和我合作的过得前端童靴们:jquery源码分析--核心函数(创建选择器筛选document元素)
- 献给和我合作的过得前端童靴们:jquery源码分析--核心函数(使用函数作为参数创建jQuery对象)
- 献给和我同样学习前端脚本时,先学jQuery,而之前没有接触过JS的同学
- 我过得好不好???
- 献给和我一样的单身程序员
- 献给被爱伤过的人
- 献给我的妻子
- 献给我的父亲!
- 纸上得来终觉浅 ,连队4月破茧出 - 献给我的2012
- 前端 jquery-ajax 的简单案例分析和总结
- 前端 jquery-ajax 的简单案例分析和总结
- 判断是否为数字Util--笔记
- 3月25日问题解决<jQuery>
- 求最大公约数
- GDOI2012 AB棋(chess)解题报告
- JSON 和 XML 优缺点的比较 (2012-08-23 18:08:15)
- 献给和我合作的过得前端童靴们:jquery源码分析--序3
- CentOS的文件权限与目录配置
- 二维码篇【一】【JS】使用jquery.qrcode生成二维码
- linux下通过yum安装svn及配置
- netty
- iOS开发如何实现版本更新
- xcode7编译错误之缺少libc++.dylib
- SQLServer删除复制作业
- iOS自适应布局之Masonry(一)