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 09 Javascript
jQuery截取指定长度字符串的实现原理及代码
Jul 01 Javascript
分享9个最好用的JavaScript开发工具和代码编辑器
Mar 24 Javascript
使用Chrome浏览器调试AngularJS应用的方法
Jun 18 Javascript
jQuery插件datalist实现很好看的input下拉列表
Jul 14 Javascript
javascript检测flash插件是否被禁用的方法
Jan 14 Javascript
分享bootstrap学习笔记心得(组件及其属性)
Jan 11 Javascript
underscore之Collections_动力节点Java学院整理
Jul 10 Javascript
如何重置vue打印变量的显示方式
Dec 06 Javascript
使用jQuery给Table动态增加行、清空table的方法
Sep 05 jQuery
jQuery 点击获取验证码按钮及倒计时功能
Sep 20 jQuery
js页面加载后执行的几种方式小结
Jan 30 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
javascript针对DOM的应用分析(四)
2012/04/15 Javascript
js判断浏览器是否支持html5
2014/08/17 Javascript
在AngularJS应用中实现一些动画效果的代码
2015/06/18 Javascript
谈谈JavaScript自定义回调函数
2015/10/18 Javascript
jquery easyui validatebox remote的使用详解
2016/11/09 Javascript
微信小程序实战之运维小项目
2017/01/17 Javascript
基于Bootstrap的网页设计实例
2017/03/01 Javascript
vue使用xe-utils函数库的具体方法
2018/03/06 Javascript
通过JS深度判断两个对象字段相同
2019/06/14 Javascript
如何用webpack4.0撸单页/多页脚手架 (jquery, react, vue, typescript)
2019/06/18 jQuery
vscode中eslint插件的配置(prettier配置无效)
2019/09/10 Javascript
vue跳转同一个组件,参数不同,页面接收值只接收一次的解决方法
2019/11/05 Javascript
[01:41]DOTA2超级联赛专访YYF 称一辈子难忘TI2
2013/05/28 DOTA
Centos Python2 升级到Python3的简单实现
2016/06/21 Python
Python实现将文本生成二维码的方法示例
2017/07/18 Python
Python实现连接两个无规则列表后删除重复元素并升序排序的方法
2018/02/05 Python
python3操作微信itchat实现发送图片
2018/02/24 Python
浅谈DataFrame和SparkSql取值误区
2018/06/09 Python
Python函数参数类型及排序原理总结
2019/12/19 Python
Python 2种方法求某个范围内的所有素数(质数)
2020/01/31 Python
python 8种必备的gui库
2020/08/27 Python
canvas实现高阶贝塞尔曲线(N阶贝塞尔曲线生成器)
2018/01/10 HTML / CSS
魅力惠奢品线上平台:MEI.COM
2016/11/29 全球购物
英国演唱会订票网站:Ticket Selection
2018/03/27 全球购物
HttpServlet类中的主要方法都有哪些?各自的作用是什么?
2014/03/16 面试题
大学生村官事迹材料
2014/01/21 职场文书
中级会计职业生涯规划书
2014/03/01 职场文书
2014年教师政治学习材料
2014/06/02 职场文书
合作协议书模板2014
2014/09/26 职场文书
整改报告格式
2014/11/06 职场文书
服务整改报告
2014/11/06 职场文书
家长意见书
2015/06/04 职场文书
校运会宣传稿大全
2015/07/23 职场文书
解析MySQL binlog
2021/06/11 MySQL
python中使用 unittest.TestCase单元测试的用例详解
2021/08/30 Python
Spring boot实现上传文件到本地服务器
2022/08/14 Java/Android