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 浮点数运算 精度问题
Oct 06 Javascript
Jquery中使用setInterval和setTimeout的方法
Apr 08 Javascript
复制js对象方法(详解)
Jul 08 Javascript
jquery固定底网站底部菜单效果
Aug 13 Javascript
Javascript获取当前日期的农历日期代码
Oct 08 Javascript
JavaScript实现MIPS乘法模拟的方法
Apr 17 Javascript
使用jQuery mobile库检测url绝对地址和相对地址的方法
Dec 04 Javascript
jQuery弹簧插件编写基础之“又见弹窗”
Dec 11 Javascript
String字符串截取的四种方式总结
Nov 28 Javascript
javascript数据结构之多叉树经典操作示例【创建、添加、遍历、移除等】
Aug 01 Javascript
vue中格式化时间过滤器代码实例
Apr 17 Javascript
vue element实现表格合并行数据
Nov 30 Vue.js
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验证码类、PHP验证码
2016/09/24 PHP
php计算给定日期所在周的开始日期和结束日期示例
2017/02/06 PHP
PHP curl批处理及多请求并发实现方法分析
2018/08/15 PHP
在laravel中实现事务回滚的方法
2019/10/10 PHP
浅析PHP反序列化中过滤函数使用不当导致的对象注入问题
2020/02/15 PHP
你可能不再需要JQUERY
2021/03/09 Javascript
Prototype源码浅析 String部分(一)之有关indexOf优化
2012/01/15 Javascript
javascript动态添加样式(行内式/嵌入式/外链式等规则)
2013/06/24 Javascript
javascript实现很浪漫的气泡冒出特效
2020/09/05 Javascript
javascript实现简单加载随机色方块
2015/12/25 Javascript
js实现常用排序算法
2016/08/09 Javascript
Node.JS中事件轮询(Event Loop)的解析
2017/02/25 Javascript
Vue.js上下滚动加载组件的实例代码
2017/07/17 Javascript
Layui数据表格之获取表格中所有的数据方法
2018/08/20 Javascript
原生js实现抽奖小游戏
2019/06/27 Javascript
Python实现把xml或xsl转换为html格式
2015/04/08 Python
详解Python爬虫的基本写法
2016/01/08 Python
python下载图片实现方法(超简单)
2017/07/21 Python
一条命令解决mac版本python IDLE不能输入中文问题
2018/05/15 Python
Python设计模式之迭代器模式原理与用法实例分析
2019/01/10 Python
django框架中间件原理与用法详解
2019/12/10 Python
Python3.7实现验证码登录方式代码实例
2020/02/14 Python
Python unittest单元测试openpyxl实现过程解析
2020/05/27 Python
python中有帮助函数吗
2020/06/19 Python
Django后端分离 使用element-ui文件上传方式
2020/07/12 Python
CSS3制作缩略图的详细过程
2016/07/08 HTML / CSS
斯巴达比赛商店:Spartan Race
2019/01/08 全球购物
台湾全方位线上课程与职能学习平台:TibaMe
2019/12/04 全球购物
会计出纳岗位职责
2013/12/25 职场文书
副厂长岗位职责
2014/02/02 职场文书
党支部书记岗位责任制
2014/02/11 职场文书
售后服务承诺书怎么写
2014/05/21 职场文书
2016年感恩教师节活动总结
2016/04/01 职场文书
jQuery ajax - getScript() 方法和getJSON方法
2021/05/14 jQuery
JavaScript如何优化逻辑判断代码详解
2021/06/08 Javascript
RestTemplate如何通过HTTP Basic Auth认证示例说明
2022/03/17 Java/Android