使用模块组织你的代码(3)

当你这样做了之后,你将会看到 浏览器不再相信isDoingWork这个值被定义过。即使是你尝试从全局窗口对象中获取这个值, 浏览器也不认为 isDoingWork 这个值在此对象中被定义了. 你所看到的错误消息看起来会像接下来这张图片中所展示的这样.

函数是一个对象:它创建了范围

这是因为现在你已经把isDoingWork这个变量创建在了一个函数里面 -- 也就是我们们的匿名 IIFE 中 -- 而如此这个变量就只能通过这个函数才能访问到. 有趣的是Javascript中的所有函数都是第一类对象. 那很简明的意味着函数是一个对象,它可能通过一个变量被访问到. 或者说,另外一种描述的方式是你存储了指向 函数的一个引用,并在稍后的某个时间获取其变量.

在我们第一个示例中,我们的问题是并没有保存一个指向我们匿名函数的引用,所以我们永远也不能再获取到isDoingWork这个值。这就是我们下一个示例要改进的地方.

函数是一个对象 : 使用this

因为每一个函数都是一个对象,所以每个函数都会有一个this变量,这个变量向开发者提供了指向当前对象的引用. 为了提供在从外部大我们的函数及其范围的访问,我们可以返回这个this变量 -- 而它将会提供一个指向当前对象的引用.

然后,除非我们将这个私有的isDoingWork变量添加到函数引用(this)上,我们也不能够引用这个变量。为此我们要对之前的示例做一下轻微的改动。它看起来会像下面这样:

thing = (function(){ // 1. this.isDoingWork = false; // 2. console.log("isDoingWork value : " + isDoingWork);

return this; // 3. }());

你可以看到第一行我们加入了一个新的全局变量thing,它包含了从匿名函数返回的值。从示例代码的开头跳到第三行,你可以看到我们返回了this变量。那就意味着我们返回了一个指向匿名函数的引用.

在第二行我们也已经将isDoingWork加入了this引用中,那样我们就可以使用语法thing.isDoingWork来从外部引用到这个值了.

自己动手看看

为了看看的运行,你可以做下面这几步:

下载本文的示例代码.

在你的浏览器中打开 modulePattern4.htm.

打开浏览器开发工具 -- F12(Chrome, IE) 或者 Ctrl-Shift-I (Opera) -- (那样你就可以看到控制台了)

你将会看到isDoingWork的值会输出到控制台,就像最开始那个示例中你看到的那样.

不过,现在你得输入thing.isDoingWork才能或者这个值.

模块模式总结

在最后这个示例中,变量值被成功的封装了,而其他的JavaScript库则可以明确的引用thing对象来获取这个值. 好像不大可能,而这帮助了我们保持全局命名空间的干净,并且在看起看来是更好的代码组织形式. 这也使得我们代码的维护更容易.

最终,我们用上了 AngularJS

因为使用模块模式是一个最佳实践,AngularJS的开发者就将一个模块系统构建到了库中.

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:http://www.heiqu.com/6218d3a4b86e224881dc917317d3794b.html