`

jQuery源码分析—1 源码结构

阅读更多

声明:该文章转自

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源码分析

    jQuery源码分析 00 前言开光 01 总体架构 03 构造jQuery对象-源码结构和核心函数 03 构造jQuery对象-工具函数 05 异步队列 Deferred 08 队列 Queue 09 属性操作 10 事件处理-Event-概述和基础知识 15 AJAX-前置过滤...

    [原创] jQuery源码分析-10事件处理-Event-源码结构

    NULL 博文链接:https://nuysoft.iteye.com/blog/1198058

    myjquery:jquery源码分析

    jQuery源码分析 前言 有时候我在想jQuery为什么可以直接$操作,可以拥有比原生js更便利的DOM操作,而且只要你想就可以直接链式操作下去 核心框架 揭开一万多行代码的jQuery核心代码: (function(window, undefined)...

    jQuery源码分析-03构造jQuery对象-源码结构和核心函数

    jQuery源码分析-03构造jQuery对象-源码结构和核心函数,需要的朋友可以参考下。

    jQuery源码分析-01总体架构分析

    1. 总体架构 1.1 自调用匿名函数 self-invoking anonymous function 打开jQuery源码,首先你会看到这样的代码结构: 代码如下: (function( window, undefined ) { // jquery code })(window); 1. 这是一个自调用匿名...

    jQuery源码解析

    站在软件设计的角度来看,我们需要从软件的整体结构和接口设计来衡量它的质量,下面开门见山分析一下jQuery(1.7.2)的结构设计,看完之后你就会褪去它的神秘外衣。 我这边整理了一下jQuery的结构代码,就像造房子...

    jQuery技术内幕:深入解析jQuery架构设计与实现原理

    第一部分(第1章)对jQuery的设计理念、总体架构和源码结构进行了介绍和分析,让读者对jQuery有整体的认识。 第二部分(第2章)详细介绍和分析了构造函数jQuery()的用法、构造过程、原型属性和方法、静态属性和方法。...

    jQuery-1.9.1源码分析系列(十)事件系统之事件体系结构

     在分析源码之前分析一下体系结构,有助于源码理解。实际上在jQuery出现之前,Dean Edwards的跨浏览器AddEvent()设计做的已经比较优秀了;而且jQuery事件系统的设计思想也是基于该思想的,所以我们先分析一下Dean ...

    jQuery技术内幕 深入解析jQuery架构设计与实现原理

     《jquery技术内幕:深入解析jquery架构设计与实现原理》在分析每个模块时均采用由浅入深的方式,先概述功能、用法、结构和实现原理,然后介绍关键步骤和分析源码实现。让读者不仅知其然,而且知其所以然。事实上,...

    jQuery-1.9.1源码分析系列(十)事件系统之事件包装

    在上篇文章给大家介绍了jQuery-1.9.1源码分析系列(十)事件系统之事件体系结构,本篇继续给大家介绍jquery1.9.1源码分析系列相关知识,具体内容请看下文吧。 首先需要明白,浏览器的原生事件是只读的,限制了jQuery...

    成品网站源码网站源码后台

    后面会加入数据统计与分析图表,包括菜单分析,文章分析,用户分析等便于更新和完善网站内容。 2、网站前台:主要包括首页,内容页,分类页,搜索页,主要实现文章摘要处理和razor,数据显示HTML处理,还有js ...

    《精通Javascript+jQuery》光盘源码

     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 关键字 ...

    2014-12-28-深入理解jQuery(6)——Queue1

    1. 源码结构 2. 基本使用 3. 源码分析

    greetr:jQuery原始代码分析,并打造了一个简单的js类库

    jQuery源码分析看完了Udemy上的课程,,写一下关于jQuery部分的笔记greetr是仿照jQuery的整体结构写的一个小的函数库Greetr ,代码在Greetr文件夹中jQuery的版本v3.5.1IIEF(立即调用函数表达式) ( function ( ...

    网上商城系统JavaWeb(jsp+servlet+MySQL+jdbc+css+js+jQuery2套源码1报告ppt缺数据库

    JavaWeb网上商城系统,2套源码1报告ppt,缺数据库结构部分,仅有首页的数据库数据。修改个人信息后即可成为“自己写的”。网上商城系统由前台管理、后台管理两部分组成 。1.前台管理:该部分主要是用户对商品的查询...

    Jquery1.9.1源码分析系列(十五)动画处理之外篇

     Tween.propHooks提供特殊情况下设置、获取css特征值的方法,结构如下 Tween.propHooks = { _default: { get: function(){...}, set: function(){...} }, scrollTop: { set: function(){...} } ...

    JAVA上百实例源码以及开源项目源代码

    1、程序结构化,用函数分别实现 2、对文件的加密,解密输出到文件 利用随机函数抽取幸运数字 简单 EJB的真实世界模型(源代码) 15个目标文件 摘要:Java源码,初学实例,基于EJB的真实世界模型  基于EJB的真实世界...

Global site tag (gtag.js) - Google Analytics