使用AngularJS编写较为优美的JavaScript代码指南(2)

例如在 C#中, Animal 类的封装 -- 隐藏数据 -- 特定的值被关联到Animal对象. 那样,如果某人决定变更那些值,他或他必须明确的通过初始化一个Animal对象并设置这个对象的值来达到目的.  在JavaScript中,我们则可以随意的在全局窗口对象中设置值.


public class Animal { // constructor allows user to set the commonName public animal(string name) { this.commonName = name; } // making commonName private hides (encapsulates) it in the class private string commonName; //explicitly exposing the value for reading only public string CommonName get { return this.commonName } }

在JavaScript中,模块已经被创建用来模拟这种封装行为了,如此我们就不会去将我们的变量组织到一个全局的命名空间中,并造成了隐藏很深的难以被发现和修复的问题.

现在你知道为什么了,让我们来看看如何会是这样的.

函数被立即调用的表达式(IIFE)

看上去就好像每次我们向前推进一步,我们都要走点旁门左道.  因为要获得能让我们创建模块模式的JavaScript语法,我们就得去了解一种叫做函数被立即调用的表达式语法,也叫做IIFE ( IIFE 发音是 "iffy").

最基础的 IIFE 看起来像这样:
 

(function(){ // lines // of // code }());

如果你从来没有看到过像这样的东西,那你就有点说不过去了.
立即被调用

首先,这个名称的第一部分叫做立即被调用的原因是,一般包含这个特殊函数的源文件被加载好了,那么包含在这个函数中的代码就会运行. 
 
对IIFE语法更加仔细的观察

你可以看到这个语法的最中心是一个函数。看一下这个代码块,我已经将代码分段并将一些行标上了号,如此我们就可以探讨它了.
 

( // 1. function() //2. { // 3. // 一行一行 // 的 // 代码 }() // 4. ); // 5.

首先,看看上面脚本的第2行。这一行通常看来就是一个匿名(也就是没有命名)的函数声明.  而后,第3一直到第4则是这个函数的主题部分。最后,第4行最后以一对括弧结束,这对 括弧会告诉JavaScript解释器去调用这个函数。最终, 所有这些都会被包在一个不归属任何部分的括弧(第1和第5行)中, 而这对括弧会告诉解释器要调用这个外部的匿名函数,它包含了我们所定义的函数.


IIFE 可以带上参数

这段奇怪的语法会在带上参数之后,看起来会更加的奇怪.  它看起来会像是下面这样
 

(function(thing1, thing2){ // lines // of // code }("in string", 382));

现在,你可以看到这个函数可以带上两个会被内部的函数引用的thing1, thing2参数.  被传入值,在示例中是 "in string" 和 382.

现在我们理解了IIFE语法,让我们来创建另外一个代码示例,我们将运行这段代码来看看封装是如何运作的.
 

(function(){ var isDoingWork = false; console.log("isDoingWork value : " + isDoingWork); }());

自己动手看看

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

    下载本文的源代码.

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

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

    你可以看到很像下面这样图片中所展示出来的东西

201561993538699.png (471×103)

当方法被调用时 -- 这会在代码被JavaScript解释器加载支护立即发生 -- 而后函数会创建 isDoingWork 变量,并调用console.log()来在控制台输出这个变量的值.


现在,让我们使用开发工具中的控制台来试试我们之前所尝试过的步骤:

输入: isDoingWork然后回车<ENTER>

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

201561993603313.png (391×136)

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

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

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

转载注明出处:https://www.heiqu.com/wgdfpx.html