声明:该文章转自
http://nuysoft.iteye.com/blog/1177451
1. 源码结构
1.1 自调用匿名函数 self-invoking anonymous function
打开jQuery源码,首先你会看到这样的代码结构:
(function( window, undefined ) {
// jquery code
})(window);
|
1. 这是一个自调用匿名函数。什么东东呢?在第一个括号内,创建一个匿名函数;第二个括号,立即执行
2. 为什么要创建这样一个“自调用匿名函数”呢?
通过定义一个匿名函数,创建了一个“私有”的命名空间,该命名空间的变量和方法,不会破坏全局的命名空间。这点非常有用也是一个JS框架必须实现的功能,jQuery被应用在成千上万的JavaScript程序中,必须确保jQuery创建的变量不能和导入他的程序所使用的变量发生冲突。(ExtJs中通常会用到命名空间来解决变量的冲突问题)。
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的属性或方法,这样外部就可以通过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中的类和对象,如果你不熟练的话,至少手头要有一本参考手册。
除了正则,其他的知识点会在分析过程中穿插讲解,不计划辟出新的章节。
分享到:
相关推荐
jQuery源码分析 00 前言开光 01 总体架构 03 构造jQuery对象-源码结构和核心函数 03 构造jQuery对象-工具函数 05 异步队列 Deferred 08 队列 Queue 09 属性操作 10 事件处理-Event-概述和基础知识 15 AJAX-前置过滤...
NULL 博文链接:https://nuysoft.iteye.com/blog/1198058
jQuery源码分析 前言 有时候我在想jQuery为什么可以直接$操作,可以拥有比原生js更便利的DOM操作,而且只要你想就可以直接链式操作下去 核心框架 揭开一万多行代码的jQuery核心代码: (function(window, undefined)...
jQuery源码分析-03构造jQuery对象-源码结构和核心函数,需要的朋友可以参考下。
1. 总体架构 1.1 自调用匿名函数 self-invoking anonymous function 打开jQuery源码,首先你会看到这样的代码结构: 代码如下: (function( window, undefined ) { // jquery code })(window); 1. 这是一个自调用匿名...
站在软件设计的角度来看,我们需要从软件的整体结构和接口设计来衡量它的质量,下面开门见山分析一下jQuery(1.7.2)的结构设计,看完之后你就会褪去它的神秘外衣。 我这边整理了一下jQuery的结构代码,就像造房子...
第一部分(第1章)对jQuery的设计理念、总体架构和源码结构进行了介绍和分析,让读者对jQuery有整体的认识。 第二部分(第2章)详细介绍和分析了构造函数jQuery()的用法、构造过程、原型属性和方法、静态属性和方法。...
在分析源码之前分析一下体系结构,有助于源码理解。实际上在jQuery出现之前,Dean Edwards的跨浏览器AddEvent()设计做的已经比较优秀了;而且jQuery事件系统的设计思想也是基于该思想的,所以我们先分析一下Dean ...
《jquery技术内幕:深入解析jquery架构设计与实现原理》在分析每个模块时均采用由浅入深的方式,先概述功能、用法、结构和实现原理,然后介绍关键步骤和分析源码实现。让读者不仅知其然,而且知其所以然。事实上,...
在上篇文章给大家介绍了jQuery-1.9.1源码分析系列(十)事件系统之事件体系结构,本篇继续给大家介绍jquery1.9.1源码分析系列相关知识,具体内容请看下文吧。 首先需要明白,浏览器的原生事件是只读的,限制了jQuery...
后面会加入数据统计与分析图表,包括菜单分析,文章分析,用户分析等便于更新和完善网站内容。 2、网站前台:主要包括首页,内容页,分类页,搜索页,主要实现文章摘要处理和razor,数据显示HTML处理,还有js ...
1.4.2 结构.c表现和行为的分离 第2章ccJavaScript基础 2.1 JavaScript的语法 2.2 变量 2.3 数据类型 2.3.1 字符串 2.3.2 数值 2.3.3 布尔型 2.3.4 类型转换 2.3.5 数组 2.4 关键字 ...
1. 源码结构 2. 基本使用 3. 源码分析
jQuery源码分析看完了Udemy上的课程,,写一下关于jQuery部分的笔记greetr是仿照jQuery的整体结构写的一个小的函数库Greetr ,代码在Greetr文件夹中jQuery的版本v3.5.1IIEF(立即调用函数表达式) ( function ( ...
JavaWeb网上商城系统,2套源码1报告ppt,缺数据库结构部分,仅有首页的数据库数据。修改个人信息后即可成为“自己写的”。网上商城系统由前台管理、后台管理两部分组成 。1.前台管理:该部分主要是用户对商品的查询...
Tween.propHooks提供特殊情况下设置、获取css特征值的方法,结构如下 Tween.propHooks = { _default: { get: function(){...}, set: function(){...} }, scrollTop: { set: function(){...} } ...
1、程序结构化,用函数分别实现 2、对文件的加密,解密输出到文件 利用随机函数抽取幸运数字 简单 EJB的真实世界模型(源代码) 15个目标文件 摘要:Java源码,初学实例,基于EJB的真实世界模型 基于EJB的真实世界...