当前位置:首页 > 日记 > 正文

JavaScript利用闭包实现模块化

JavaScript利用闭包实现模块化

利用闭包的强大威力,但从表面上看,它们似乎与回调无关。下面一起来研究其中最强大的一个:模块。

function foo() { var something = "cool"; var another = [1, 2, 3]; function doSomething() { console.log( something ); } function doAnother() { console.log( another.join( " ! " ) ); }}

正如在这段代码中所看到的,这里并没有明显的闭包,只有两个私有数据变量something和another,以及doSomething() 和doAnother() 两个内部函数,它们的词法作用域(而这就是闭包)也就是foo() 的内部作用域。

接下来考虑以下代码:

function CoolModule() { var something = "cool"; var another = [1, 2, 3]; function doSomething() { alert( something ); } function doAnother() { alert( another.join( " ! " ) ); } return { doSomething: doSomething, doAnother: doAnother };}var foo = CoolModule();foo.doSomething(); // coolfoo.doAnother(); // 1 ! 2 ! 3

这个模式在JavaScript 中被称为模块。最常见的实现模块模式的方法通常被称为模块暴露,这里展示的是其变体。我们仔细研究一下这些代码。

首先,CoolModule() 只是一个函数,必须要通过调用它来创建一个模块实例。如果不执行外部函数,内部作用域和闭包都无法被创建。其次,CoolModule() 返回一个用对象字面量语法{ key: value, ... } 来表示的对象。这个返回的对象中含有对内部函数而不是内部数据变量的引用。我们保持内部数据变量是隐藏且私有的状态。可以将这个对象类型的返回值看作本质上是模块的公共API。这个对象类型的返回值最终被赋值给外部的变量foo,然后就可以通过它来访问API 中的属性方法,比如foo.doSomething()。

从模块中返回一个实际的对象并不是必须的,也可以直接返回一个内部函数。jQuery 就是一个很好的例子。jQuery 和$ 标识符就是jQuery 模块的公共API,但它们本身都是函数(由于函数也是对象,它们本身也可以拥有属性)。

doSomething() 和doAnother() 函数具有涵盖模块实例内部作用域的闭包( 通过调用CoolModule() 实现)。当通过返回一个含有属性引用的对象的方式来将函数传递到词法作用域外部时,我们已经创造了可以观察和实践闭包的条件。如果要更简单的描述,模块模式需要具备两个必要条件。

1. 必须有外部的封闭函数,该函数必须至少被调用一次(每次调用都会创建一个新的模块实例)。

2. 封闭函数必须返回至少一个内部函数,这样内部函数才能在私有作用域中形成闭包,并且可以访问或者修改私有的状态。

一个具有函数属性的对象本身并不是真正的模块。从方便观察的角度看,一个从函数调用所返回的,只有数据属性而没有闭包函数的对象并不是真正的模块。上一个示例代码中有一个叫作CoolModule() 的独立的模块创建器,可以被调用任意多次,每次调用都会创建一个新的模块实例。当只需要一个实例时,可以对这个模式进行简单的改进来实现单例模式:

var foo = (function CoolModule() { var something = "cool"; var another = [1, 2, 3]; function doSomething() { alert( something ); } function doAnother() { alert( another.join( " ! " ) ); } return { doSomething: doSomething, doAnother: doAnother };})();foo.doSomething(); // coolfoo.doAnother(); // 1 ! 2 ! 3

立即调用这个函数并将返回值直接赋值给单例的模块实例标识符foo。

模块也是普通的函数,因此可以接受参数:

function CoolModule(id) { function identify() { console.log( id ); } return { identify: identify };}var foo1 = CoolModule( "foo 1" );var foo2 = CoolModule( "foo 2" );foo1.identify(); // "foo 1"foo2.identify(); // "foo 2"

模块模式另一个简单但强大的变化用法是,命名将要作为公共API 返回的对象:

var foo = (function CoolModule(id) {function change() { // 修改公共API publicAPI.identify = identify2;}function identify1() { alert( id );}function identify2() { alert( id.toUpperCase() );}var publicAPI = { change: change, identify: identify1};return publicAPI;})( "foo module" );foo.identify(); // foo modulefoo.change();foo.identify(); // FOO MODULE

通过在模块实例的内部保留对公共API 对象的内部引用,可以从内部对模块实例进行修改,包括添加或删除方法和属性,以及修改它们的值。

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持!

相关文章

Excel怎么设置超期提醒功能Excel超

Excel怎么设置超期提醒功能Excel超

设置,方法,功能,电脑软件,Excel,  利用Excel函数对表格设置超期提醒功能。可以让你知道哪些客户超期了,在你给客户办会员卡的时候非常有用。小面小编教你怎么在Excel设置超期提醒功能,希望对你有帮助!Excel超期提醒功能设置方法假设Excel表…

关于jQuery里prev | 的简单操作代

关于jQuery里prev | 的简单操作代

操作,代码,简单,电脑软件,jQuery,prev() 函数被用来匹配元素集的前一个兄弟元素,仅仅只有前一个兄弟元素被选择,其子元素将被忽略。这里给大家介绍jQuery里prev()的简单操作,具体内容如下:一个朋友提了个需求给我:点击按钮删除input,如果input剩…

手机端转换rem适应

手机端转换rem适应

转换,手机端,电脑软件,rem,话不多说,请看代码:<script> (function() { var changeRem = function() { document.getElementsByTagName('html')[0].style.fontSize = document.documentElement.clientWidth / 20 + 'px'; }; cha…

PPT2010中如何对插入的进行自定义

PPT2010中如何对插入的进行自定义

自定义样式,中对,图片,电脑软件,  我们所操作的图片大都是矩形的,如果直接插入文档中并不好看,默认自带的样式极其有限,不过可以通过对插入的图片进行自定义样式,使它跟内容更加和谐符合我们的审美需求。以下是小编为您带来的关于PPT2010中对…

AI怎么使用混合工具设计一款渐变立

AI怎么使用混合工具设计一款渐变立

渐变,混合,工具,文字,电脑软件,ai中有很多功能,今天我们就来看看使用ai中的混合工具设计一款里的的文字海报图的教程。软件名称:Adobe Illustrator CS6 (AI cs6) 精简绿色中文版(32位+64位)软件大小:205MB更新时间:2014-05-111、首先键入需要的…

如何设置PPT2007中图表区的格式

如何设置PPT2007中图表区的格式

图表,设置,格式,如何设置,电脑软件,  在PPT的使用中,难免还是会有一些操作是我们还没完全掌握的,就像有朋友反映不会修改PPT图表区的格式,其实这也没什么难的。以下是小编为您带来的关于设置PPT2007图表区的格式,希望对您有所帮助。设置PPT20…

nodejs 实现钉钉ISV接入的加密解密

nodejs 实现钉钉ISV接入的加密解密

方法,加密解密,电脑软件,nodejs,ISV,这是我开发Worktile钉钉版本的时候遇到的当时感觉比较难的地方,现在写下来方法供大家学习交流解密方法exports.decryptMsg = function (text) { var aes_msg_buffer = new Buffer(text, 'base64'); var…

在excel中如何按字体颜色进行排序

在excel中如何按字体颜色进行排序

排序,字体颜色,电脑软件,excel,  在整理Excel表格数据时,有时数据没有及时分类,导致数据多而杂。那么对于特别的数据,我们可以用颜色字体标记出来,需要时可按字体颜色进行排序。以下是小编为您带来的关于在excel中按字体颜色进行排序,希望对您…

JS实现touch 点击滑动轮播实例代码

JS实现touch 点击滑动轮播实例代码

实例代码,电脑软件,JS,touch,废话不多说了,直接给大家贴js代码了,具体代码如下所示:<script src="../js/jquery-1.8.3.min.js"></script><script src="../js/jQuery.mobile-1.3.2.min.js"></script>----------------------需要应用jquery …

.NET发布网站详细步骤

.NET发布网站详细步骤

步骤,发布网站,详细,电脑软件,NET,本文章分为三个部分: web网站发布、IIS6 安装方法、ASP.NET v4.0 安装方法一、web网站发布1.打开 Visual Studio 2013 编译环境2.在其解决方案上右击弹出重新生成解决方案,以查看是否有错误3.如果项目没有…

PPT怎么使用宏添加倒计时PPT使用宏

PPT怎么使用宏添加倒计时PPT使用宏

方法,倒计时,电脑软件,PPT,strong,  PPT怎么使用宏添加倒计时?在各类演讲、比赛中,经常要求比赛选手要在规定时间内完成演讲,于是,组办方就需要在PowerPoint演示中安装&ldquo;倒计时&rdquo;,用以提醒演讲者。下面小编就教你PPT使用宏添加倒计…

qq安全中心手机解绑定图文教程

qq安全中心手机解绑定图文教程

绑定,安全中心,图文教程,方法,电脑软件,  小伙伴们的QQ安全中心有绑定手机号码吗?那么小伙伴们知道如何解绑手机号码吗?今天小编就给大家带来了qq安全中心解绑手机号码的方法分享,一起来看看吧!qq安全中心手机解绑定的方法1.打开QQ安全中…