AngularJS中使用模块组织代码的示例分析

本篇文章给大家分享的是有关AngularJS中使用模块组织代码的示例分析，小编觉得挺实用的，因此分享给大家学习，希望大家阅读完这篇文章后可以有所收获，话不多说，跟着小编一起来看看吧。

十余年的揭阳网站建设经验，针对设计、前端、开发、售后、文案、推广等六对一服务，响应快，48小时及时工作处理。网络营销推广的优势是能够根据用户设备显示端的尺寸不同，自动调整揭阳建站的显示方式，使网站能够适用不同显示终端，在浏览器中调整网站的宽度，无论在任何一种浏览器上浏览网站，都能展现优雅布局与设计，从而大程度地提升浏览体验。创新互联建站从事“揭阳网站设计”,“揭阳网站推广”以来，每个客户项目都认真落实执行。

下载 modulePattern.zip - 所有的 4 个 HTML 文件  以及 panacea.js - 1.6 KB

介绍

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

背景

我使用Angular有一段时间了，而在学习Angular的时候，我也喜欢构建一些样例，所以当我一开始深入进去的时候，对于模块或者JavaScript的设计模式，我也没有多想，那样对保持代码组织和条理性有帮助.  那就是所有的重点：保持代码的组织和条理性.  因此，现在我回过头来，创建了这个极其小巧的样例，以展示使用模块可以有多简单.  一路走来，我希望它能够成为一篇好的对Angular的介绍.

（大多数）文章在阐述模式时的问题

大多数时候人们都会尝试去在读者知道模式是啥概念之前就开始阐述一个模式，而这基本上误导了每一个人.  这里要努力使得本文尽量简单，让我们首先来看一看这个问题吧。哪个问题呢？就是有关默认会在全局内存空间被创建的所有东西的Javascript的问题.

下面就是我所说的意思.

JavaScript 默认的全局问题

设想你的HTML中有下面这样一段脚本.

范围?

你清楚这个变量的范围么? 
是的，它是全局的。这个布尔值实际上被添加到了浏览器的全局窗口对象中. 

把它设置到Action中
 

这里你可以看到它在Action中是怎样的.

1. 下载本文的代码样例.

2. 在你的浏览器中打开 modulePattern.htm .

3. 打开浏览器开发工具 -- F12(Chrome, IE) or Ctrl-Shift-I (Opera) -- (那样就可以看见控制台了)

4. 在浏览器工具控制台下，输入: isDoingWork，然后回车

5. 你会看到输出的值为false.

6. 现在输入 : isDoingWork = true，然后回车

7. 如此下载的值就为true了. 你已经改变了这个值.

8. 你可以看到这个值已经通过输入doingwindow.isDoingWork = true然后回车，被添加到了全局窗口对象之中.

这可能会造成一些名字冲突，也会导致一些严重的bug. 这也许对你而言有点杞人忧天了，是不?  但是请设想你是决定要去实现某一个新的JS库，它每分每秒都可以被创建出来.  假设你发现了这个叫做 Panacea.js 的很棒的库，它将解决你所有的问题.

因此你向下面这样在你的页面中引用了它:

如此简单，你就已经解决之前你遇到的所有问题. 然而，因为它是一个庞大的库，而你只想要解决方法，却不回去深挖这个庞大（几千行代码）源文件里的每一行代码.  而深埋在 Panacea.js 里面某个角落的确实下面这样的代码:

var isDoingWork = false;     setInterval(function(){isDoingWork = !isDoingWork;}, 3000);

这代码真是酷，你知道吗?

每个3秒，它都会将这个布尔值设置成相对的值。啊!

自己动手看看

如果你想要自己动手验证下这个东西，你可以做下面这几步:

1. 下载本文的样例代码.

2. 在你的浏览器中打开 modulePattern2.htm .

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

4. 在浏览器开发工具的控制台下，输入 : isDoingWork 然后回车

5. 将第4步多重复几次，你将会发现isDoingWork的值会每个大约3秒钟变化一次.

那这是不是很棒呢?

我的观点 : 模块模式是很有用的

我需要为此做出解释，为了要向你展示为什么 JavaScript 的模块模式是很有用的.  我得想你展示 JavaScript 的模块模式，那样我就可以告诉你它是如何在AngularJS中被使用或实现的了.

模块模式：封装

如此，实际就是，模块模式基本上就是封装了.  封装听起来很熟悉，如果你有点面向对象编程经历的话 -- 而我也希望你能有点这个经验.  封装是面向对象编程的三原则之一。封装的另外一个说法就是数据隐藏。在经典的面向对象编程中——它不同于JavaScript所依赖的原型化OOP -- 数据隐藏是构建一个类模板的内在组成部分.

例如在 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);  }());

自己动手看看
 

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

1. 下载本文的源代码.

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

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

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

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

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

1. 输入: isDoingWork然后回车

当你这样做了之后，你将会看到 浏览器不再相信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来从外部引用到这个值了.

自己动手看看

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

1. 下载本文的示例代码.

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

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

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

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

模块模式总结
 

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

最终，我们用上了 AngularJS

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

Plunker 代码

首先你可以通过到这个Plunker上 (http://plnkr.co/edit/js8rbKpIuAuePzLF2DcP?p=preview - 在一个新的窗口或Tab页打开)获取整个AngularJS示例.

而我们在这里展示出代码，那样我们就可以更方便的谈论它了.

首先，让我们看看这个 HTML. 

                                                     
mc refers to MainCtrl which has         been added to the angular app module
       
Hello {{mc.name}}!
       
{{a}}