JavaScript闭包和模块模式

在JavaScript中一个最广泛使用的设计模式是模块的模式。模块模式使用了JavaScript中的一个很棒的特性-闭包- 用来给你方法中的隐私一些控制这样的第三方应用程序不能访问私有数据或覆盖它。在这篇文章中,我会教你什么是闭包,它是如何工作的,以及如何利用它在你的JavaScript代码中实现模块模式。什么是闭包?
闭包是JavaScript语言的一种构造。在JavaScript内所有变量都能在全局范围内访问,除非变量在函数内用var关键字声明过。

variable1 = 1; //全局范围
var variable2 = 2; // 不在一个函数内: 全局范围

function funcName() {
variable3 = 3; // 没用var关键字声明: 全局范围
var variable4 = 4; //仅本地访问
}

在一个函数内,你也可以获得全局范围和每个你所在的函数上级范围的访问权限。换句话说,函数内声明变量只能在函数包围范围内访问。

var globalvar = 1; //全局范围
 
function outer() {
var outervar = 2; // outer()范围内
 
function inner() {
var innervar = 3; // inner()范围内
console.log(globalvar); // => 1
console.log(outervar); // => 2
console.log(innervar); // => 3
}
 
console.log(globalvar); // => 1
console.log(outervar); // => 2
console.log(innervar); // => Reference Error引用错误;
}
 
console.log(globalvar); // => 1
console.log(outervar); // => Reference Error引用错误
console.log(innervar); // => Reference Error引用错误

每一个真正的JavaScript程序员应该知道这一点,除非他不思进取。知道这一点,你可以得出这样的结论,用一种办法来保持你所有代码在全局命名空间外,是正确的。这特别有用,当你不想给任何人在未经许可的情况下有重写你任何代码的机会。你可以通过使用一个匿名函数(不给它命名,没有被赋予一个变量)立即执行自身。这是众所周知的自调用匿名函数(SIAF),虽然它可能是更准确地称为立即调用的函数表达 (IIFE–读做“iffy”) -作者BenAlman

(function() {
// 这函数立即执行,内部所有变量都是私有的
}());

紧接着右大括号,是左右括号于是函数将立即执行。围绕整个函数表达式的括号不是运行的代码必需的,但一般用作给其他开发人员的信号,这是一个IIFE,而不是一个标准函数。有些人喜欢在前面加上一个惊叹号(!)或分号(;),而不是用括号包起来。

用闭包的模块模式###

知道了闭包是什么,我们就可以使用模块模式创建对象。通过返回一个对象或变量并赋给一个函数外变量,这样我们可以暴露任何希望暴露给外界的,我们可以有公开和私有的方法。

var Module = (function() {
// 下面函数是私有的,但可以被公开函数访问
function privateFunc() { … };

// 返回一个对象赋予Module
return {
    publicFunc: function() {
    privateFunc(); // publicFunc可以直接访问privateFunc
}
};
}());

这就是模块模式的本质。您还可以使用参数传入或缩写常用资源的名称:

var Module = (function($, w, undefined) {
    // …
    // return {…};
}(jQuery, window));

我传入jQuery和window,被分别缩写为$和w。注意我没有传任何东西作为第三个参数。这样参数undefined将是undefined,所以它完美地工作。有些人这样处理undefined是因为无论如何,它是可编辑的。所以,如果你判断某某是否是undefined,但undefined可能已经改变,你的比较将不起作用。这种技术保证它将按预期工作。()

透露模块模式revealing module pattern###

透露模块模式是另一种方式来写模块模式,需要更多点代码,但有时更容易理解和阅读。不同于在IIFE中定义所有私有变量并在返回对象中定义公开方法,你把所有方法都写在IIFE中,只是“透露”哪些是你想公开在return语句内的。

var Module = (function() {
// 现在所有函数直接互访
var privateFunc = function() {
    publicFunc1();
};

var publicFunc1 = function() {
    publicFunc2();
};

var publicFunc2 = function() {
    privateFunc();
};

// 返回对象赋予Module
return {
    publicFunc1: publicFunc1,
    publicFunc2: publicFunc2
};
}());

对比正常的模块模式,透露模块模式有几个优点:所有函数的声明和实现都在同一个地方,从而制造较少的混乱。
私有函数现在可以访问公开函数,如果他们需要。
当一个公开函数需要调用另一个公开函数时,他们调用publicFunc2(),而不是用this.publicFunc2(),从而节省了几个字符。

透露模块模式的唯一真正的缺点,正如我所说,是你必须写更多的代码,因为你必须先写好函数然后再把它的名字写在return语句内,尽管它最终可能会因为你可以忽略this.部分而节省你的代码。

扩展模块模式###

我想谈的最后一件事是使用模块模式扩展已经存在的模块。这很常用,当为jQuery之类的库做插件,如下。

var jQuery = (function($) {
$.pluginFunc = function() {
    …
}

return $; 
}(jQuery));

此代码是相当灵活的,因为你甚至不需要var jQuery=或接近尾部的return语句。没有它们jQuery仍将可以用这个新方法扩展。实际上返回和赋值整个jQuery对象,可能在性能上有损失,但是,如果你想在扩展jQuery的同时,分配jQuery到一个新的变量名,你只需改变第一行的jQuery为任何你想要的。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 200,612评论 5 471
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 84,345评论 2 377
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 147,625评论 0 332
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,022评论 1 272
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 62,974评论 5 360
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,227评论 1 277
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,688评论 3 392
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,358评论 0 255
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,490评论 1 294
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,402评论 2 317
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,446评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,126评论 3 315
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,721评论 3 303
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,802评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,013评论 1 255
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,504评论 2 346
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,080评论 2 341

推荐阅读更多精彩内容