jQuery源码分析-01总体架构分析


Posted in Javascript onNovember 14, 2011

1. 总体架构

1.1 自调用匿名函数 self-invoking anonymous function
打开jQuery源码,首先你会看到这样的代码结构:

(function( window, undefined ) { 
// jquery code 
})(window);

1. 这是一个自调用匿名函数。什么东东呢?在第一个括号内,创建一个匿名函数;第二个括号,立即执行
2. 为什么要创建这样一个“自调用匿名函数”呢?
通过定义一个匿名函数,创建了一个“私有”的命名空间,该命名空间的变量和方法,不会破坏全局的命名空间。这点非常有用也是一个JS框架必须支持的功能,jQuery被应用在成千上万的JavaScript程序中,必须确保jQuery创建的变量不能和导入他的程序所使用的变量发生冲突。
3. 匿名函数从语法上叫函数直接量,JavaScript语法需要包围匿名函数的括号,事实上自调用匿名函数有两种写法(注意标红了的右括号):
(function() { 
console.info( this ); 
console.info( arguments ); 
}( window ) ); 
(function() { 
console.info( this ); 
console.info( arguments ); 
})( window );

4. 为什么要传入window呢?
通过传入window变量,使得window由全局变量变为局部变量,当在jQuery代码块中访问window时,不需要将作用域链回退到顶层作用域,这样可以更快的访问window;这还不是关键所在,更重要的是,将window作为参数传入,可以在压缩代码时进行优化,看看jquery-1.6.1.min.js:
(function(a,b){})(window); // window 被优化为 a

5. 为什么要在在参数列表中增加undefined呢?
在 自调用匿名函数 的作用域内,确保undefined是真的未定义。因为undefined能够被重写,赋予新的值。
undefined = "now it's defined";
alert( undefined );

浏览器测试结果:
浏览器
测试结果
结论
ie
now it's defined
可以改变
firefox
undefined
不能改变
chrome
now it's defined
可以改变
opera
now it's defined
可以改变

6. 注意到源码最后的分号了吗?
分号是可选的,但省略分号并不是一个好的编程习惯;为了更好的兼容性和健壮性,请在每行代码后加上分号并养成习惯。
1.2 总体架构
接下来看看在 自调用匿名函数 中都实现了什么功能,按照代码顺序排列:

(function( window, undefined ) { 
// 构造jQuery对象 
var jQuery = function( selector, context ) { 
return new jQuery.fn.init( selector, context, rootjQuery ); 
} 
// 工具函数 Utilities 
// 异步队列 Deferred 
// 浏览器测试 Support 
// 数据缓存 Data 
// 队列 queue 
// 属性操作 Attribute 
// 事件处理 Event 
// 选择器 Sizzle 
// DOM遍历 
// DOM操作 
// CSS操作 
// 异步请求 Ajax 
// 动画 FX 
// 坐标和大小 
window.jQuery = window.$ = jQuery; 
})(window);

从上边的注释看,jQuery的源码结构相当清晰、条理,不像代码那般晦涩和让人纠结。
后边的章节基本将以这个顺序展开。

1.3 下节预告

如果你看过jQuery源码,很快就会发现这里到处充斥着正则表达式,而很多JavaScript开发人员又疏于正则基础知识,为了扫清这个障碍,下一章将先温习JavaScript正则表达式的基础知识,再详细剖析jQuery中的正则表达式。
在正式开始分析源码之前,还有没有要准备的基础知识呢?
当然有。比如JavaScript API中的类和对象,如果你不熟练的话,至少手头要有一本参考手册。
除了正则,其他的知识点会在分析过程中穿插讲解,不计划辟出新的章节。

Javascript 相关文章推荐
extjs 为某个事件设置拦截器
Jan 15 Javascript
JQuery+CSS提示框实现思路及代码(纯手工打造)
May 07 Javascript
JS代码判断IE6,IE7,IE8,IE9的函数代码
Aug 02 Javascript
js 距离某一时间点时间是多少实现代码
Oct 14 Javascript
jQuery基于ajax操作json数据简单示例
Jan 05 Javascript
js CSS3实现卡牌旋转切换效果
Jul 04 Javascript
vue 计时器组件的实现代码
Sep 14 Javascript
浅谈JS 数字和字符串之间相互转化的纠纷
Oct 20 Javascript
微信小程序显示下拉列表功能【附源码下载】
Dec 12 Javascript
Express的HTTP重定向到HTTPS的方法
Jun 06 Javascript
详解如何为你的angular app构建一个第三方库
Dec 07 Javascript
React性能优化系列之减少props改变的实现方法
Jan 17 Javascript
js Form.elements[i]的使用实例
Nov 13 #Javascript
jquery中使用ajax获取远程页面信息
Nov 13 #Javascript
JQuery模板插件 jquery.tmpl 动态ajax扩展
Nov 10 #Javascript
jBox 2.3基于jquery的最新多功能对话框插件 常见使用问题解答
Nov 10 #Javascript
Javascript中的isNaN函数使用说明
Nov 10 #Javascript
推荐40个非常优秀的jQuery插件和教程【系列三】
Nov 09 #Javascript
关于二级域名下使用一级域名下的COOKIE的问题
Nov 07 #Javascript
You might like
解析二进制流接口应用实例 pack、unpack、ord 函数使用方法
2013/06/18 PHP
分享下页面关键字抓取components.arrow.com站点代码
2014/01/30 PHP
php脚本守护进程原理与实现方法详解
2017/07/20 PHP
弹出模态框modal的实现方法及实例
2017/09/19 PHP
深入解析Laravel5.5中的包自动发现Package Auto Discovery
2017/09/13 PHP
分享5个非常有用的Laravel Blade指令
2018/05/30 PHP
PHP微商城开源代码实例
2019/03/27 PHP
服务器安全设置的几个注册表设置
2007/07/28 Javascript
jQuery解决iframe高度自适应代码
2009/12/20 Javascript
JavaScript获取页面上某个元素的代码
2011/03/13 Javascript
jQuery怎么解析Json字符串(Json格式/Json对象)
2013/08/09 Javascript
jQuery实现可收缩展开的级联菜单实例代码
2013/11/27 Javascript
javascript页面加载完执行事件代码
2014/02/11 Javascript
jQuery圆形统计图开发实例
2015/01/04 Javascript
JavaScript判断undefined类型的正确方法
2015/06/30 Javascript
基于jQuery实现Div窗口震动特效代码-代码简单
2015/08/28 Javascript
JavaScript实现ASC转汉字及汉字转ASC的方法
2016/01/23 Javascript
JS实现加载时锁定HTML页面元素的方法
2017/06/24 Javascript
关于预加载InstantClick的问题解决方法
2017/09/12 Javascript
Vue中keep-alive组件作用详解
2020/02/04 Javascript
vue3.0自定义指令(drectives)知识点总结
2020/12/27 Vue.js
详解Python中的分组函数groupby和itertools)
2018/07/11 Python
对Xpath 获取子标签下所有文本的方法详解
2019/01/02 Python
Python和Java的语法对比分析语法简洁上python的确完美胜出
2019/05/10 Python
Python+Pyqt实现简单GUI电子时钟
2021/02/22 Python
PyQt5 QDockWidget控件应用详解
2020/08/12 Python
通过实例解析python and和or使用方法
2020/11/14 Python
美国网上书店:Barnes & Noble
2018/08/15 全球购物
美国气象仪器、花园装饰和墙壁艺术商店:Wind & Weather
2019/05/29 全球购物
C#的几个面试问题
2016/05/22 面试题
搞笑的爱情检讨书
2014/10/01 职场文书
信息合作协议书
2014/10/09 职场文书
歌剧魅影观后感
2015/06/05 职场文书
2019年描写人生经典诗句大全
2019/07/08 职场文书
对Golang中的FORM相关字段理解
2021/05/02 Golang