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 相关文章推荐
iframe 父窗口和子窗口相互的调用方法集锦
Dec 15 Javascript
解析js如何获取当前url中的参数值并复制给input
Jun 23 Javascript
Js实现动态添加删除Table行示例
Apr 14 Javascript
Jquery api 速查表分享
Jan 12 Javascript
jquery层级选择器(匹配父元素下的子元素实现代码)
Sep 05 Javascript
Node.js connect ECONNREFUSED错误解决办法
Sep 15 Javascript
JS实现的几个常用算法
Nov 12 Javascript
JS自定义函数实现时间戳转换成date的方法示例
Aug 27 Javascript
Koa日志中间件封装开发详解
Mar 09 Javascript
JavaScript中this用法学习笔记
Mar 17 Javascript
vue安装遇到的5个报错及解决方法
Jun 12 Javascript
微信小程序对图片进行canvas压缩的方法示例详解
Nov 12 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实现根据字符串生成对应数组的方法
2014/09/22 PHP
thinkphp浏览历史功能实现方法
2014/10/29 PHP
帝国cms目录结构分享
2015/07/06 PHP
php头像上传预览实例代码
2017/05/02 PHP
laravel在中间件内生成参数并且传递到控制器中的2种姿势
2019/10/15 PHP
10个新的最有前途的JavaScript框架
2009/03/12 Javascript
学习ExtJS TextField常用方法
2009/10/07 Javascript
addEventListener和attachEvent二者绑定的执行函数中的this不相同
2012/12/09 Javascript
javascript中window.event事件用法详解
2012/12/11 Javascript
JS打开图片另存为对话框实现代码
2012/12/26 Javascript
在JS数组特定索引处指定位置插入元素
2014/07/27 Javascript
javascript实现行拖动的方法
2015/05/27 Javascript
AngularJS 使用$sce控制代码安全检查
2016/01/05 Javascript
AngularJS实现星星等级评分功能
2016/09/24 Javascript
three.js中文文档学习之通过模块导入
2017/11/20 Javascript
vue2.0 兄弟组件(平级)通讯的实现代码
2018/01/15 Javascript
实现jquery放大镜的两种方法
2018/02/22 jQuery
jQuery实现使用sort方法对json数据排序的方法
2018/04/17 jQuery
详解React+Koa实现服务端渲染(SSR)
2018/05/23 Javascript
jQuery实现简单复制json对象和json对象集合操作示例
2018/07/09 jQuery
解决Layui数据表格显示无数据提示的问题
2019/11/14 Javascript
Vue-cli3多页面配置详解
2020/03/22 Javascript
详解Vue+elementUI build打包部署后字体图标丢失问题
2020/07/13 Javascript
[01:02:38]DOTA2-DPC中国联赛定级赛 LBZS vs Phoenix BO3第二场 1月10日
2021/03/11 DOTA
通过代码实例展示Python中列表生成式的用法
2015/03/31 Python
Python使用requests发送POST请求实例代码
2018/01/25 Python
Python-Seaborn热图绘制的实现方法
2019/07/15 Python
Pytorch实现基于CharRNN的文本分类与生成示例
2020/01/08 Python
用python绘制樱花树
2020/10/09 Python
Revolution Beauty美国官网:英国知名化妆品网站
2018/07/23 全球购物
WEB控件可以激发服务端事件,请谈谈服务端事件是怎么发生并解释其原理?自动传回是什么?为什么要使用自动传回?
2012/02/21 面试题
关于.NET, HTML的五个问题
2012/08/29 面试题
企业整改报告范文
2014/11/08 职场文书
销售员岗位职责
2015/02/10 职场文书
特岗教师个人总结
2015/02/10 职场文书
离婚答辩状范文
2015/05/22 职场文书