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 相关文章推荐
使用jQuery将多条数据插入模态框的实现代码
Oct 08 Javascript
JavaScript中isPrototypeOf函数作用和使用实例
Jun 01 Javascript
JavaScript调用客户端Java程序的方法
Jul 27 Javascript
js实现简洁大方的二级下拉菜单效果代码
Sep 01 Javascript
基于Bootstrap框架实现图片切换
Mar 10 Javascript
详解使用nvm安装node.js
Jul 18 Javascript
解决vue router使用 history 模式刷新后404问题
Jul 19 Javascript
Django使用多数据库的方法
Sep 06 Javascript
vue forEach循环数组拿到自己想要的数据方法
Sep 21 Javascript
vue根据进入的路由进行原路返回的方法
Sep 26 Javascript
解决vue语法会有延迟加载显现{{xxx}}的问题
Nov 14 Javascript
Node.js path模块,获取文件后缀名操作
Nov 07 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仿ZOL分页类代码
2008/10/02 PHP
PHP模块memcached使用指南
2014/12/08 PHP
php输入数据统一类实例
2015/02/23 PHP
使用PHP如何实现高效安全的ftp服务器(二)
2015/12/30 PHP
PHP四种排序算法实现及效率分析【冒泡排序,插入排序,选择排序和快速排序】
2018/04/27 PHP
基于jQuery的日期选择控件
2009/10/27 Javascript
js的压缩及jquery压缩探讨(提高页面加载性能/保护劳动成果)
2013/01/29 Javascript
jQuery关于导航条背景切换效果实现示例
2013/09/04 Javascript
jQuery如何防止这种冒泡事件发生
2015/02/27 Javascript
浅析javascript异步执行函数导致的变量变化问题解决思路
2016/05/13 Javascript
浅谈JavaScript前端开发的MVC结构与MVVM结构
2016/06/03 Javascript
利用bootstrapValidator验证UEditor
2016/09/14 Javascript
Bootstrap 模态对话框只加载一次 remote 数据的完美解决办法
2017/07/09 Javascript
jQuery 查找元素操作实例小结
2019/10/02 jQuery
vue组件讲解(is属性的用法)模板标签替换操作
2020/09/04 Javascript
mapboxgl实现带箭头轨迹线的代码
2021/01/04 Javascript
[02:26]2016国际邀请赛8月3日开战 中国军团出征西雅图
2016/08/02 DOTA
python笔记(2)
2012/10/24 Python
深入讲解Python编程中的字符串
2015/10/14 Python
Python内置函数delattr的具体用法
2017/11/23 Python
pandas object格式转float64格式的方法
2018/04/10 Python
使用pandas read_table读取csv文件的方法
2018/07/04 Python
Python 比较文本相似性的方法(difflib,Levenshtein)
2018/10/15 Python
python与mysql数据库交互的实现
2020/01/06 Python
Python下利用BeautifulSoup解析HTML的实现
2020/01/17 Python
jupyter notebook插入本地图片的实现
2020/04/13 Python
python 深度学习中的4种激活函数
2020/09/18 Python
python推导式的使用方法实例
2021/02/28 Python
全球知名的婚恋交友网站:Match.com
2017/01/05 全球购物
Mytheresa美国官网:德国知名的女性奢侈品电商
2017/05/27 全球购物
提高EJB性能都有哪些技巧
2012/03/25 面试题
五一服装活动方案
2014/01/11 职场文书
《木笛》教学反思
2014/03/01 职场文书
教师竞聘演讲稿
2014/05/16 职场文书
乳制品整治工作方案
2014/05/29 职场文书
MySQL 数据表操作
2022/05/04 MySQL