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 数据缓存模块进化史详细介绍
Nov 19 Javascript
javascript右下角弹层及自动隐藏(自己编写)
Nov 20 Javascript
Javascript实现颜色rgb与16进制转换的方法
Apr 18 Javascript
跟我学习javascript的作用域与作用域链
Nov 19 Javascript
Jquery ajax基础教程
Nov 20 Javascript
Angularjs中使用layDate日期控件示例
Jan 11 Javascript
解决React Native端口号修改的方法
Jul 28 Javascript
vue-cli脚手架-bulid下的配置文件
Mar 27 Javascript
Vue中"This dependency was not found"问题的解决方法
Jun 19 Javascript
jQuery点击页面其他部分隐藏下拉菜单功能
Nov 27 jQuery
Vue实现小购物车功能
Dec 21 Vue.js
36个正则表达式(开发效率提高80%)
Nov 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
php CI框架插入一条或多条sql记录示例
2014/07/29 PHP
php判断并删除空目录及空子目录的方法
2015/02/11 PHP
PHP闭包定义与使用简单示例
2018/04/13 PHP
javascript学习笔记(十三) js闭包介绍(转)
2012/06/20 Javascript
JQuery中如何传递参数如click(),change()等具体实现
2013/04/28 Javascript
Javascript实现返回上一页面并刷新的小例子
2013/12/11 Javascript
原生JS实现旋转木马式图片轮播插件
2016/04/25 Javascript
精彩的Bootstrap案例分享 重点在注释!(选项卡、栅格布局)
2016/07/01 Javascript
基于JavaScript实现点击页面任何位置返回
2016/08/31 Javascript
基于touch.js手势库+zepto.js插件开发图片查看器(滑动、缩放、双击缩放)
2016/11/17 Javascript
Node调用Java的示例代码
2017/09/20 Javascript
Vue 创建组件的两种方法小结(必看)
2018/02/23 Javascript
vue3修改link标签默认icon无效问题详解
2019/10/09 Javascript
关于vue的列表图片选中打钩操作
2020/09/09 Javascript
[04:49]2014DOTA2国际邀请赛 Newbee顺利挺进总决赛 ImbaTV独家专访
2014/07/19 DOTA
[00:47]TI7不朽珍藏III——沙王不朽展示
2017/07/15 DOTA
python 接收处理外带的参数方法
2018/12/03 Python
Python构建图像分类识别器的方法
2019/01/12 Python
详解Python字典的操作
2019/03/04 Python
pytorch 输出中间层特征的实例
2019/08/17 Python
python pygame实现球球大作战
2019/11/25 Python
Opencv图像处理:如何判断图片里某个颜色值占的比例
2020/06/03 Python
python判断字符串以什么结尾的实例方法
2020/09/18 Python
python可视化 matplotlib画图使用colorbar工具自定义颜色
2020/12/07 Python
html5 canvas移动浏览器上实现图片压缩上传
2016/03/11 HTML / CSS
Gap英国官网:Gap UK
2018/07/18 全球购物
优瑞自动咖啡机官网:Jura
2018/09/29 全球购物
美国葡萄酒网上商店:Martha Stewart Wine Co.
2019/03/17 全球购物
什么叫应用程序域?什么是托管代码?什么是强类型系统?什么是装箱和拆箱?什么是重载?CTS、CLS和CLR分别作何解释?
2012/05/23 面试题
无偿献血倡议书
2014/04/14 职场文书
团日活动总结书格式
2014/05/08 职场文书
毕业生求职信
2014/06/10 职场文书
电子专业求职信
2014/06/19 职场文书
婚庆公司计划书
2014/09/15 职场文书
2014年效能监察工作总结
2014/11/21 职场文书
反腐倡廉主题教育活动总结
2015/05/07 职场文书