AngularJS—使用模块组织你的代码

2014-8-8 09:34| 发布者: joejoe0332| 查看: 6137| 评论: 0|原作者: LeoXu|来自: 开源中国社区

摘要: AngularJS 的库里面有很多东西，但本文中我只想专注于小的，针对特定主题的库，我相信通过它们能对Angular有一个较好的介绍. 理解这篇文章并不需要你有任何Angular相关的，甚至是JavaScript的经验。希望你能从本文 ...

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

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

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

1

2

3

4

5

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

　　如果你从来没有看到过像这样的东西，那你就有点说不过去了.

立即被调用

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

对IIFE语法更加仔细的观察

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

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

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

IIFE 可以带上参数

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

1

2

3

4

5

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

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

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

1

2

3

4

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

自己动手看看

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

下载本文的源代码.
在你的浏览器中打开 modulePattern3.htm.
打开浏览器的开发工具 -- F12(Chrome, IE) 或者 Ctrl-Shift-I (Opera) -- (这样你就可以看到控制台了)
你可以看到很像下面这样图片中所展示出来的东西

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

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

输入: isDoingWork然后回车<ENTER>

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

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

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

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

函数是一个对象 : 使用this

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

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

1

2

3

4

5

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

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

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

123 4 / 4 页下一页在本页阅读全文

酷毙

雷人

鲜花

鸡蛋

漂亮

收藏分享邀请

上一篇：Github热门项目汇总下一篇：五个解决方案让MongoDB拥有RDBMS的鲁棒性事务

快毕业了，没工作经验，
找份工作好难啊？
赶紧去人才芯片公司磨练吧!!