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 load()加载GB2312页面时出现乱码的两种方案
Sep 10 Javascript
Javascript中实现trim()函数的两种方法
Feb 04 Javascript
浅谈javascript中call()、apply()、bind()的用法
Apr 20 Javascript
vue,angular,avalon这三种MVVM框架优缺点
Apr 27 Javascript
基于bootstrap的选择框插件icheck
Dec 23 Javascript
jQuery插件jqGrid动态获取列和列字段的方法
Mar 03 Javascript
JS简单获取当前日期和农历日期的方法
Apr 17 Javascript
微信小程序loading组件显示载入动画用法示例【附源码下载】
Dec 09 Javascript
vue2 mint-ui loadmore实现下拉刷新,上拉更多功能
Mar 21 Javascript
微信小程序+云开发实现欢迎登录注册
May 24 Javascript
对Layer UI 模块化的用法详解
Sep 26 Javascript
vue项目使用.env文件配置全局环境变量的方法
Oct 24 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中header跳转使用include包含解决参数丢失问题
2015/05/08 PHP
PHP htmlspecialchars_decode()函数用法讲解
2019/03/01 PHP
PHP命名空间定义与用法实例分析
2019/08/14 PHP
JavaScript定义类或函数的几种方式小结
2011/01/09 Javascript
JavaScript的事件绑定(方便不支持js的时候)
2013/10/01 Javascript
fmt:formatDate的输出格式详解
2014/01/09 Javascript
javascript获取四位数字或者字母的随机数
2015/01/09 Javascript
JS数组的常见用法实例
2015/02/10 Javascript
浅谈JSON.parse()和JSON.stringify()
2015/07/14 Javascript
Javascript类型转换的规则实例解析
2016/02/23 Javascript
全面解析Bootstrap中scrollspy(滚动监听)的使用方法
2016/06/06 Javascript
深入浅析JavaScript中的Function类型
2016/07/09 Javascript
AngularJS 入门教程之HTML DOM实例详解
2016/07/28 Javascript
nodejs微信公众号支付开发
2016/09/19 NodeJs
JavaScript中call和apply方法的区别实例分析
2018/08/03 Javascript
swiper在angularjs中使用循环轮播失效的解决方法
2018/09/27 Javascript
JavaScript类的继承操作实例总结
2018/12/20 Javascript
浅谈VUE中演示v-for为什么要加key
2020/01/16 Javascript
WebPack工具运行原理及入门教程
2020/12/02 Javascript
Python端口扫描简单程序
2016/11/10 Python
python利用socketserver实现并发套接字功能
2018/01/26 Python
python实现树形打印目录结构
2018/03/29 Python
pyqt实现.ui文件批量转换为对应.py文件脚本
2019/06/19 Python
Python调用百度根据经纬度查询地址的示例代码
2019/07/07 Python
简单了解django文件下载方式
2020/02/10 Python
Python龙贝格法求积分实例
2020/02/29 Python
世界上最好的旅行夹克:BauBax
2018/12/23 全球购物
Gibson London官网:以地道的英国男装而著称
2019/12/06 全球购物
Nobody Denim官网:购买高级女士牛仔裤
2021/03/15 全球购物
大学生物业管理求职信
2013/10/24 职场文书
通信生自我鉴定
2014/01/18 职场文书
《画》教学反思
2014/04/14 职场文书
警示教育活动总结
2014/05/05 职场文书
优秀党员自我评价范文
2014/09/15 职场文书
四风自我剖析材料
2014/09/30 职场文书
详解redis在微服务领域的贡献
2021/10/16 Redis