jQuery技术内幕:深入解析jQuery架构设计与实现原理. 1.3 自调用匿名函数

1.3 自调用匿名函数

从代码清单1-1中还可以看到,jQuery的所有代码都被包裹在了一个立即执行的匿名函数表达式中,这种代码结构称为“自调用匿名函数”。当浏览器加载完jQuery文件后,自调用匿名函数会立即开始执行,初始化jQuery的各个模块。相关代码如下所示:

(function( window, undefined ) {

  
var jQuery = ...

   //
...

  
window.jQuery = window.$ = jQuery;

})(window);

上面这段代码涉及一些JavaScript基础知识和编码习惯,下面以提问的方式来逐一分析。

1)为什么要创建这样一个自调用匿名函数?

通过创建一个自调用匿名函数,创建了一个特殊的函数作用域,该作用域中的代码不会和已有的同名函数、方法和变量以及第三方库冲突。由于jQuery会被应用在成千上万的JavaScript程序中,所以必须确保jQuery的代码不会受到其他代码的干扰,并且jQuery不能破坏和污染全局变量以至于影响到其他代码。这一点是任何一个JavaScript库和框架所必须具备的功能。

注意,在这个自调用匿名函数的最后,通过手动把变量jQuery添加到window对象上,明确地使变量jQuery成为公开的全局变量,而其他的部分将是私有的。

另外,自调用匿名函数还可以有两种等价的写法,如下所示(注意加了底纹的圆括号的位置):

// 写法1(常见写法,也是
jQuery 所采用的)

( function() {

   //
...

} )();

 

// 写法2

( function() {

   //
...

}() );

 

// 写法3

!function() {

   //
...

}();

2)为什么要为自调用匿名函数设置参数window,并传入window对象?

通过传入window对象,可以使window对象变为局部变量(即把函数参数作为局部变量使用),这样当在jQuery代码块中访问window对象时,不需要将作用域链回退到顶层作用域,从而可以更快地访问window对象,这是原因之一;另外,将window对象作为参数传入,可以在压缩代码时进行优化,在压缩文件jquery-1.7.1.min.js中可以看到下面的代码:

(function(a,b){ ... })(window);

// 参数 window 被压缩为 a,参数 undefined
被压缩为 b

3)什么要为自调用匿名函数设置参数undefined?

特殊值undefined是window对象的一个属性,例如,执行下面的代码将会弹出true:

alert( "undefined" in window );
// true

通过把参数undefined作为局部变量使用,但是又不传入任何值,可以缩短查找undefined时的作用域链,并且可以在压缩代码时进行优化,如前面代码所示,参数undefined会被压缩为b。

另外,更重要的原因是,通过这种方式可以确保参数undefined的值是undefined,因为undefiend有可能会被重写为新的值。可以用下面的代码来尝试修改undefined的值,在各浏览器中的测试结果见表1-1。

undefined = "now it's defined";

alert( undefined );

表1-1  在浏览器中尝试修改
undefined 的值

浏 览 器     测 试 结 果  结  论

IE 6.0、IE 7.0、IE 8.0     now it's defined        可以改变

IE 9.0、IE 10.0         undefined         不能改变

Chrome 16.0.912.77        now it's defined        可以改变

Chrome 17.0.963.56       undefined         不能改变

Firefox 3.6.28          now it's defined        可以改变

Firefox 4.0        undefined         不能改变

Safari 4.0.2       now it's defined        可以改变

Safari 4.0.4       undefined         不能改变

Opera 11.52     now
it's defined        可以改变

Opera 11.60     undefined         不能改变

 

4)注意到自调用匿名函数最后的分号(;)了吗?

通常在JavaScript中,如果语句分别放置在不同的行中,则分号(;)是可选的,但是对于自调用匿名函数来说,在之前或之后省略分号都可能会引起语法错误。例如,执行下面的两个例子,就会抛出异常。

例1 在下面的代码中,如果自调用匿名函数的前一行末尾没有加分号,则自调用匿名函数的第一对括号会被当作是函数调用。

var n = 1

( function(){} )()

// TypeError: number is not a function

例2 在下面的代码中,如果未在第一个自调用匿名函数的末尾加分号,则下一行自调用匿名函数的第一对括号会被当作是函数调用。

( function(){} )()

( function(){} )()

// TypeError: undefined is not a function

所以,在使用自调用匿名函数时,最好不要省略自调用匿名函数之前和之后的分号。

时间: 2024-10-23 09:11:38

jQuery技术内幕:深入解析jQuery架构设计与实现原理. 1.3 自调用匿名函数的相关文章

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

jQuery技术内幕:深入解析jQuery架构设计与实现原理 高 云 著 图书在版编目(CIP)数据 jQuery技术内幕:深入解析jQuery架构设计与实现原理 / 高云著. -北京:机械工业出版社,2013.11 ISBN 978-7-111-44082-6 I. j- II. 高- III. JAVA语言-程序设计 IV. TP312 中国版本图书馆CIP数据核字(2013)第221662号 版权所有·侵权必究 封底无防伪标均为盗版 本书法律顾问 北京市展达律师事务所     本书由阿里巴

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

   本书由阿里巴巴资深前端开发工程师撰写,从源代码角度全面而系统地解读了jQuery的17个模块的架构设计理念和内部实现原理,旨在帮助读者参透jQuery中的实现技巧和技术精髓,同时本书也对广大开发者如何通过阅读源代码来提升编码能力和软件架构能力提供了指导.     本书首先通过"总体架构"梳理了各个模块的分类.功能和依赖关系,让大家对jQuery的工作原理有大致的印象:进而通过"构造jQuery对象"章节分析了构造函数jQuery()的各种用法和内部构造过程:接

jQuery技术内幕:深入解析jQuery架构设计与实现原理. 2.8 静态属性和方法

2.8 静态属性和方法 在构造jQuery对象模块中还定义了一些重要的静态属性和方法,它们是其他模块实现的基础.其整体源码结构如代码清单2-3所示. 代码清单2-3 静态属性和方法 388 jQuery.extend({ 389     noConflict: function( deep ) {}, 402     isReady: false, 406     readyWait: 1, 409     holdReady: function( hold ) {}, 418     read

jQuery技术内幕:深入解析jQuery架构设计与实现原理. 2.2 总体结构

2.2 总体结构 构造jQuery对象模块的总体源码结构如代码清单2-1所示. 代码清单2-1 构造 jQuery 对象模块的总体源码结构  16 (function( window, undefined ) {         // 构造 jQuery 对象  22    var jQuery = (function() {  25       var jQuery = function( selector, context ) {  27              return new jQ

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

1.4 总结           在本章的前半部分,对jQuery的总体架构进行了梳理,并对各个模块的分类.功能和主要依赖关系做了简要介绍.通过这些介绍,读者已经对jQuery的代码有了整体上的认识. 在后半部分,则以提问的方式对包裹jQuery代码的自调用匿名函数进行了分析,扫除了读者阅读jQuery源码的第一道障碍.

基于微服务和Docker容器技术的PaaS云平台架构设计

本文讲的是基于微服务和Docker容器技术的PaaS云平台架构设计[编者的话]在系统架构上,PaaS云平台主要分为微服务架构.Docker容器技术.DveOps三部分,这篇文章重点介绍微服务架构的实施. [3 天烧脑式容器存储网络训练营 | 深圳站]本次培训以容器存储和网络为主题,包括:Docker Plugin.Docker storage driver.Docker Volume Pulgin.Kubernetes Storage机制.容器网络实现原理和模型.Docker网络实现.网络插件.

基于云技术的ELC集群式服务器架构设计与实现

基于云技术的ELC集群式服务器架构设计与实现 西安电子科技大学 张文 本文提出了一种基于云技术的弹性负载均衡集群式服务器架构(Elastic and Load Balancing Cluster Server Architecture based on CloudTechnology,ELC集群式服务器架构).本架构以Eucalyptus云计算平台为基础设施,按照计算与存储分离原则整体分为两部分.其中,计算服务系统在Eucalyptus云平台的计算模块基础上,通过虚拟服务器实例方式对外提供服务,

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

第三部分 底层支持模块 第3章 选择器Sizzle 第4章 异步队列Deferred Object 第5章 数据缓存Data  第6章 队列Queue 第7章 浏览器功能测试Support 第3章 选择器Sizzle Sizzle是一款纯JavaScript实现的CSS选择器引擎,它具有以下特性: 完全独立,无库依赖. 相较于大多数常用选择器其性能非常有竞争力. 压缩和开启gzip后只有4?KB. 具有高扩展性和易于使用的API. 支持多种浏览器,如IE 6.0+.Firefox 3.0+.Ch

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

1.2 总体架构 jQuery的模块可以分为3部分:入口模块.底层支持模块和功能模块,如图1-1所示,图中还展示了模块之间的主要依赖关系. 来看看图1-1中各个模块的功能和依赖关系. 在构造jQuery对象模块中,如果在调用构造函数jQuery()创建jQuery对象时传入了选择器表达式,则会调用选择器Sizzle遍历文档,查找与之匹配的DOM元素,并创建一个包含了这些DOM元素引用的jQuery对象. 选择器Sizzle是一款纯JavaScript实现的CSS选择器引擎,用于查找与选择器表达式