jQuery立即调用表达式
http://www.imooc.com/code/3247
立即调用表达式
任何库与框架设计的第一个要点就是解决命名空间与变量污染的问题。jQuery就是利用了JavaScript函数作用域的特性,采用立即调用表达式包裹了自身的方法来解决这个问题。
jQuery的立即调用函数表达式的写法有三种:
写法1:
(function(window, factory) {
factory(window)
}(this, function() {
return function() {
//jQuery的调用
}
}))
可以看出上面的代码中嵌套了2个函数,而且把一个函数作为参数传递到另一个函数中并且执行,这种方法有点复杂,我们简化一下写法:
写法2:
var factory = function(){
return function(){
//执行方法
}
}
var jQuery = factory();
上面的代码效果和方法1是等同的,但是这个factory有点变成了简单的工厂方法模式,需要自己调用,不像是一个单例的jQuery类,所以我们需要改成“自执行”,而不是另外调用。
写法3:
(function(window, undefined) {
var jQuery = function() {}
// ...
window.jQuery = window.$ = jQuery;
})(window);
从上面的代码可看出,自动初始化这个函数,让其只构建一次。详细说一下这种写法的优势:
1、window和undefined都是为了减少变量查找所经过的scope作用域。当window通过传递给闭包内部之后,在闭包内部使用它的时候,可以把它当成一个局部变量,显然比原先在window scope下查找的时候要快一些。
2、undefined也是同样的道理,其实这个undefined并不是JavaScript数据类型的undefined,而是一个普普通通的变量名。只是因为没给它传递值,它的值就是undefined,undefined并不是JavaScript的保留字。
有童鞋留言到,为什么要传递undefined?
Javascript 中的 undefined 并不是作为关键字,因此可以允许用户对其赋值。
我们看一个
var undefined = '慕课网'
;(function(window) {
alert(undefined);//IE8 '慕课网'
})(window)
IE8存在这个问题,当然,大部分浏览器都是不能被修改的
如果函数调用不传递,参数默认就是undefined
;(function(window,undefined) {
//undefined
})(window)
jQuery为什么要创建这样的一个外层包裹,其原理又是如何?
这里要区分2个概念一个是匿名函数,一个是自执行。顾名思义,匿名函数,就是没有函数名的函数,也就是不存在外部引用。但是是否像下面代码实现呢:
function(){
//代码逻辑
}
上面这种写法是错了,声明了它但是又不给名字又没有使用,所以在语法上错误的,那么怎么去执行一个匿名的函数呢?
要调用一个函数,我们必须要有方法定位它、引用它。所以,我们要取一个名字:
var jQuery = function(){
//代码逻辑
}
jQuery使用()将匿名函数括起来,然后后面再加一对小括号(包含参数列表),那么这小括号能把我们的表达式组合分块,并且每一块(也就是每一对小括号),都有一个返回值。这个返回值实际上也就是小括号中表达式的返回值。所以,当我们用一对小括号把匿名函数括起来的时候,实际上小括号返回的,就是一个匿名函数的Function对象。因此,小括号对加上匿名函数就如同有名字的函数般被我们取得它的引用位置了。所以如果在这个引用变量后面再加上参数列表,就会实现普通函数的调用形式。
最后,我们回到写法1看看jQuery利用写法3的写法,然后把整个函数作为参数传递给另外一个函数,主要是为了判断jQuery在不同平台的下的加载逻辑,主流的库一般都有对 AMD 和 CommonJS 的支持代码,看看jQuery的代码:
if (typeof module === "object" && typeof module.exports === "object") {
module.exports = global.document ?
factory(global, true) :
function(w) {
if (!w.document) {
throw new Error("jQuery requires a window with a document");
}
return factory(w);
};
} else {
factory(global);
}
总结:全局变量是魔鬼, 匿名函数可以有效的保证在页面上写入JavaScript,而不会造成全局变量的污染,通过小括号,让其加载的时候立即初始化,这样就形成了一个单例模式的效果从而只会执行一次。
jQuery立即调用表达式的更多相关文章
- jQuery的立即调用表达式
立即调用表达式 任何库与框架设计的第一要要点就是解决命名空间与变量污染的问题.jquery就是用javascript函数作用域的特性,采用立即调用表达式包裹了自身的方法来解决这个问题的. jQuery ...
- Jquery Ajax调用aspx页面方法
Jquery Ajax调用aspx页面方法 在asp.net webform开发中,用jQuery ajax传值一般有几种玩法 1)普通玩法:通过一般处理程序ashx进行处理: 2)高级玩法:通过as ...
- Jquery ajax调用webservice总结
jquery ajax调用webservice(C#)要注意的几个事项: 1.web.config里需要配置2个地方 <httpHandlers> <remove verb ...
- Jquery Ajax 调用 WebService
原文:http://www.cnblogs.com/andiki/archive/2010/05/17/1737254.html jquery ajax调用webservice(C#)要注意的几个事项 ...
- JQuery ajax调用asp.net的webMethod
本文章转载:http://www.cnblogs.com/zengxiangzhan/archive/2011/01/16/1936938.html 在vs2010中,用JQuery ajax调用as ...
- Jquery ajax调用后台aspx后台文件方法(不是ashx)
在asp.net webForm开发中,用Jquery ajax调用aspx页面的方法常用的有两种:下面我来简单介绍一下. (1)通过aspx.cs的静态方法+WebMethod进行处理 简单的介绍下 ...
- jquery ajax调用返回json格式数据处理
Ajax请求默认的都是异步的 如果想同步 async设置为false就可以(默认是true) var html = $.ajax({ url: "some.php", async: ...
- jQuery ajax调用后台aspx后台文件的两种常见方法(不是ashx)
在asp.net webForm开发中,用Jquery ajax调用aspx页面的方法常用的有两种:下面我来简单介绍一下. [WebMethod] public static string SayHe ...
- jquery.ajax请求aspx和ashx的异同 Jquery Ajax调用aspx页面方法
1.jquery.ajax请求aspx 请求aspx的静态方法要注意一下问题: (1)aspx的后台方法必须静态,而且添加webmethod特性 (2)在ajax方法中contentType必须是“a ...
随机推荐
- SaltStack快速部署及测试
测试环境:CentOS6.6 X86_64 # cat /etc/hosts 192.168.199.61 Ansible 192.168.199.60 Nginx1 192.168.199.62 N ...
- 如何获取AppStore软件安装包的路径
本帖最后由 chinald 于 2015-10-16 13:59 编辑 前言:本文介绍在Mac下如何找到AppStore下载的安装包路径,以及如何提取出来供以后使用,希望对大家有所帮助(前提:想要提取 ...
- WCF 设计和实现服务协定(01)
作者:jiankunking 出处:http://blog.csdn.net/jiankunking WCF 术语: • 消息 – 消息是一个独立的数据单元,它可能由几个部分组成,包含消息正文和消息头 ...
- eclipse config 2 tab -> space
编码规范要求不同意使用tab,可是又要有4个字符的缩进,连点4次space,这不是程序猿的风格 来看看 eclipse 设置一次tab像space的转换 例如以下操作 Window->Prefe ...
- 新手MFC学习之Socket练习
事实上MFC这东西吧,好像也不光是MFC,非常多东西,事实上我如今才感觉到,假设想高速做一个东西出来的话.是没有必要系统的学关于这个东西的所有知识的.比方我想做一个MFC相似QQ的软件,可是我又不想花 ...
- Java反射学习总结终(使用反射和注解模拟JUnit单元测试框架)
转载请注明本文出自大苞米的博客(http://blog.csdn.net/a396901990),谢谢支持! 本文是Java反射学习总结系列的最后一篇了,这里贴出之前文章的链接,有兴趣的可以打开看看. ...
- 25、驱动调试之打印到proc虚拟文件
1.dmesg指令是通过读/proc/kmsg来获取打印信息,也可以通过cat /proc/kmsg打印: 说明:kmsg是环形缓存区,只能读一次 2.内核中fs/proc目录下有相关文件,比如pro ...
- 使用ToolRunner运行Hadoop程序基本原理分析 分类: A1_HADOOP 2014-08-22 11:03 3462人阅读 评论(1) 收藏
为了简化命令行方式运行作业,Hadoop自带了一些辅助类.GenericOptionsParser是一个类,用来解释常用的Hadoop命令行选项,并根据需要,为Configuration对象设置相应的 ...
- [Angular] Pluck value from Observable
export class MailFolderComponent implements OnInit{ title: Observable<string>; messages: Obser ...
- 【u007】血色先锋队
Time Limit: 1 second Memory Limit: 128 MB [问题描述] 巫妖王的天灾军团终于卷土重来,血色十字军组织了一支先锋军前往诺森德大陆对抗天灾军团,以及一切沾有亡灵气 ...