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 相关文章推荐
推荐自用 Javascript 缩图函数 (onDOMLoaded)……
Oct 23 Javascript
不到30行JS代码实现Excel表格的方法
Nov 15 Javascript
js图片翻书效果代码分享
Aug 20 Javascript
JS简单设置下拉选择框默认值的方法
Aug 20 Javascript
javascript 显示全局变量与隐式全局变量的区别
Feb 09 Javascript
react-redux中connect()方法详细解析
May 27 Javascript
js分页之前端代码实现和请求处理
Aug 04 Javascript
Vue.js进行查询操作的实例详解
Aug 25 Javascript
Vue中使用的EventBus有生命周期
Jul 12 Javascript
对angular2中的ngfor和ngif指令嵌套实例讲解
Sep 12 Javascript
Node.js API详解之 Error模块用法实例分析
May 14 Javascript
JS使用Chrome浏览器实现调试线上代码
Jul 23 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
php轻量级的性能分析工具xhprof的安装使用
2015/08/12 PHP
mailto的使用技巧分享
2012/12/21 Javascript
jquery实现按Enter键触发事件示例
2013/09/10 Javascript
javascript原生和jquery库实现iframe自适应高度和宽度
2014/07/18 Javascript
判断window.onload是否多次使用的方法
2014/09/21 Javascript
浅析node.js中close事件
2014/11/26 Javascript
用js判断是否为360浏览器的实现代码
2015/01/15 Javascript
js实现鼠标感应图片展示的方法
2015/02/27 Javascript
鼠标事件的screenY,pageY,clientY,layerY,offsetY属性详解
2015/03/12 Javascript
jQuery实现自动调整字体大小的方法
2015/06/15 Javascript
jQuery获取DOM节点实例分析(2种方式)
2015/12/15 Javascript
JavaScript如何实现对数字保留两位小数一位自动补零
2015/12/18 Javascript
javascript从定义到执行 你不知道的那些事
2016/01/04 Javascript
JS使用单链表统计英语单词出现次数
2016/06/16 Javascript
Bootstrap基本样式学习笔记之图片(6)
2016/12/07 Javascript
JavaScript获取服务器时间的方法详解
2016/12/11 Javascript
jQuey将序列化对象在前台显示地实现代码(方法总结)
2016/12/13 Javascript
详解webpack解惑:require的五种用法
2017/06/09 Javascript
详解VUE调用本地json的使用方法
2019/05/15 Javascript
Python 的描述符 descriptor详解
2016/02/27 Python
python 删除指定时间间隔之前的文件实例
2018/04/24 Python
对Python中Iterator和Iterable的区别详解
2018/10/18 Python
Python使用folium excel绘制point
2019/01/03 Python
python随机在一张图像上截取任意大小图片的方法
2019/01/24 Python
python 反编译exe文件为py文件的实例代码
2019/06/27 Python
在PyCharm中控制台输出日志分层级分颜色显示的方法
2019/07/11 Python
Python集合基本概念与相关操作实例分析
2019/10/30 Python
python实现的分析并统计nginx日志数据功能示例
2019/12/21 Python
Window系统下Python如何安装OpenCV库
2020/03/05 Python
Python-jenkins 获取job构建信息方式
2020/05/12 Python
详解Html5 监听拦截Android返回键方法
2018/04/18 HTML / CSS
印度最大的网上花店:Ferns N Petals(鲜花、礼品和蛋糕)
2017/10/16 全球购物
英国DIY汽车维修配件网站:DIY Car Service Parts
2019/08/30 全球购物
智能家居、吸尘器、滑板车、电动自行车网上购物:Geekmaxi
2021/01/18 全球购物
关于对大人不礼貌的检讨书
2014/09/29 职场文书
2015年个人自我剖析材料
2014/12/29 职场文书