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遍历Table应用示例
Apr 09 Javascript
JavaScript中toString()方法的使用详解
Jun 05 Javascript
浅谈javascript的Touch事件
Sep 27 Javascript
以JavaScript来实现WordPress中的二级导航菜单的方法
Dec 14 Javascript
JavaScript字符串常用的方法
Mar 10 Javascript
jQuery实现简易的输入框字数计数功能示例
Jan 16 Javascript
JavaScript实现定时页面跳转功能示例
Feb 14 Javascript
JS传参及动态修改页面布局
Apr 13 Javascript
three.js中文文档学习之通过模块导入
Nov 20 Javascript
VUE中v-on:click事件中获取当前dom元素的代码
Aug 22 Javascript
Vue父子之间值传递的实例教程
Jul 02 Javascript
Vue多选列表组件深入详解
Mar 02 Vue.js
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
杏林同学录(九)
2006/10/09 PHP
三个类概括PHP的五种设计模式
2012/09/05 PHP
php fsockopen解决办法 php实现多线程
2014/01/20 PHP
php简单图像创建入门实例
2015/06/10 PHP
PHP实现的同步推荐操作API接口案例分析
2016/11/30 PHP
php上传excel表格并获取数据
2017/04/27 PHP
phpstudy2020搭建站点的实现示例
2020/10/30 PHP
30个最好的jQuery 灯箱插件分享
2011/04/25 Javascript
解析js原生方法创建表格效率测试
2013/07/08 Javascript
javascript自定义函数参数传递为字符串格式
2014/07/29 Javascript
js+HTML5基于过滤器从摄像头中捕获视频的方法
2015/06/16 Javascript
JavaScript使用DeviceOne开发实战(一) 配置和起步
2015/12/01 Javascript
超链接怎么正确调用javascript函数
2016/05/23 Javascript
实例讲解JavaScript中的this指向错误解决方法
2016/06/13 Javascript
JavaScript实现简单的拖动效果
2016/07/02 Javascript
jQuery实现倒计时(倒计时年月日可自己输入)
2016/12/02 Javascript
js中对象与对象创建方法的各种方法
2019/02/27 Javascript
JS校验与最终登陆界面功能完整示例
2020/01/13 Javascript
不刷新网页就能链接新的js文件方法总结
2020/03/01 Javascript
python实现提取百度搜索结果的方法
2015/05/19 Python
Python实现快速多线程ping的方法
2015/07/15 Python
Python实现可获取网易页面所有文本信息的网易网络爬虫功能示例
2018/01/15 Python
python爬虫爬取监控教务系统的思路详解
2020/01/08 Python
Scrapy 配置动态代理IP的实现
2020/09/28 Python
selenium判断元素是否存在的两种方法小结
2020/12/07 Python
阿玛尼美国官方网站:Armani.com
2016/11/25 全球购物
TripAdvisor日本:全球领先的旅游网站
2019/02/14 全球购物
女性时尚在线:IVRose
2019/02/23 全球购物
会务接待方案
2014/02/27 职场文书
积极贯彻学习两会精神总结
2014/03/17 职场文书
《飞向蓝天的恐龙》教学反思
2014/04/09 职场文书
办公室文员岗位职责范本
2014/06/12 职场文书
小班上学期幼儿评语
2014/12/30 职场文书
中学社团活动总结
2015/05/07 职场文书
送给客户微信问候语!
2019/07/04 职场文书
2019年最新借条范本!
2019/07/08 职场文书