在下一代互联网应用中的AllgUlarJS技术概述

宋涛　王玉峰　吕思思

[摘要]AngularJs是新兴的JavaScriptMVC框架，它为业界带来了重大的变化，包括对模块化（templating）的创新实现，以及数据的双向绑定（two-way data binding），这些特性使得它强大而易用。大多数开发者认为，与其他框架相比，AngularJS明显缩减了项目所需的代码量。AngularJS是软件中的杰作，它强调测试与代码质量，在JavaScript生态圈内堪为表率，它的优质与创新，催生了周围活跃的程序员社区，这反过来又让AngularJS的人气更加旺盛。下面我们来概述这项技术。

[关键词]JavaScript MVC框架；数据的双向绑定；单页web应用

1邂逅AngularJS

AngularJS是采用JavaScript语言编写的客户端MVC框架，帮助开发者编写现代化的单页面（single-page）应用。它尤其适合编写有大量CRUD（增删改查）操作的，具有Ajax风格的富客户端应用。

2熟悉框架

AngularJS是近年来不断涌现的客户端MVC框架中的新成员，它的出众要归功于创新的模板系统、友好的开发过程和可靠的工程实践。下面先来看看模板系统的独特之处。

1）使用HTML作为模板语言

2）无须对DOM进行显式刷新，因为Angular.IS可以通过用户动作、浏览器事件、模型变化来决定在何时刷新何类模板。

3）有趣的和可扩展的组件子系统能够教会浏览器如何解释自定义的HTML标签及属性。

AngularJS最显而易见的部分，也许就是上述的模板系统，但是，AngularJS并不只是简单地包装一些与开发单页面web应用相关的功能与服务。

实际上，AngularJS还隐藏着不少珠玑，如依赖注入及可测试性。通过依赖注入，可以用短小精炼且仔细测试过的服务来组建web应用。另外，AngularJS框架的设计和周边的工作群，在开发应用的每个阶段都鼓勵良好的测试实践。

3AnguIarJS中的MVC模式

当前大部分web应用都基于知名的模型一视图一控制器（MVC）模式的某形态。但是准确来说，MVC并不是编程模式，而是更高级的框架模式，因此相当抽象。更糟糕的是，当前有很多MVC模式的变种和派生，开发者们都在按照自己对MVC的理解在设计架构。这导致了同样的名字（MVC）用于描述不同的架构和编码方式。

3.1控制器

控制器的主要职责是初始化作用域实例。在实践中，初始化逻辑又可以再分为：

1）提供模型的初始值。

2）增加UI相关的行为（函数）以扩展$scope对象。

控制器实际上就是JavaSeript函数，它们不需要扩展任何AngularJS特定的类，也不需要调用任何特定的AngularJS API，就可以正常工作。

3.2模型

AngularJS的模型实际上就是普通的JavaScript对象。与控制器类似，不需要特别的去扩展任何AngularJS的底层类，也不用去构造模型对象。

可以再模型层中使用任何当前存在的纯JavaScript的类或对象。模型可拥有的属性也不仅限于原始值，任何有效的JavaSeript对象或数都是可以的。只需要将模型简单地指派给$scope，AngularJS就可确认它的存在。

3.3视图

实际上，AngularJS与HTML和DOM有着更加紧密的联系，因为AngularJS依靠浏览器去解析模板文本。浏览器将文本转换成DOM树之后，AngularJS参与进来，开始遍历解析好的DOM结构。当遇到指令时。AngularJS就执行相关逻辑，将指令转换成页面的动态部分。

AngularJS扩展了HTML的词汇库，这类似于创造了一门基于HTML的领域特定语言。并指导浏览器如何理解它。因此，常听到AngularJS“教浏览器新把戏”的说法。

4声明式模板视图——命令式控制器逻辑

AngularJS提供了很多便利的指令，然而，重要的不是这些指令的语法或功能，而是隐藏在表象之下的关于如何构建UI组件的AngularJS哲学。

AngularJS提倡声明式UI结构。在实践中，这意味着模板专注于描述所需要的效果，而非其实现。下面我们举例来说明。

我们希望创建一个让用户可以输入短消息的表单，然后点击按钮来发送它。这里有些特别的用户体验需求，短信息字数要限制在100字以内，一旦超出此限制，“Send”（发送）按钮就要被禁用掉。当用户输入消息时，他应该知道还可以输入多少字。一旦剩余字数小于10，就标示它的数字应该改变显式样式，以警告用户。另外，它还应该可以清除用户已经输入的消息。

上面的需求是相当标准的文本表单，没有多少挑战性。尽管如此，也需要很多UI元素协同工作，例如，正确管理按钮的disabled状态，采用适当样式显示剩余可输入的准确字数等。代码如下：

我们用上面的代码作为基础。首先，要显示剩余字数。代码如下：

其次，在短消息超出字数限制时，禁用“Send”按钮。这可以用ng-disabled指令搞定，代码如下：

Send

我们看到了重复出现的模式：仅需修改模板的很少一部分，就可以操纵UI，用模型状态得出想要的结果。令人激动的是，不用在JavaScript代码中保存任何对DOM元素的引用，也不用显式地操纵DOM元素。我们只是专注于模型的变化，而让AngularJS去做辛苦的工作。所有需要做的，只是以指令的形式去提供一些提示而已。

再回到上面的例子。下一步是，当可以输入的文字数量已经不多时，改变剩余字数的显式样式。这里可以看到更多的命令式UI实例，代码如下：

模型的改变驱动了CSS类的改变。而且，在代码的任何地方都没有显式的DOM操作逻辑。uI基于声明式的表达“愿望”，而重新绘制。Ng-class指令所表述的是这样：“每次当用户输入快要超出字数限制的时候，应该看到警告，元素应该有text—warningCSS类。”这和另一种表述方式截然不同：“当输入新的字符促使字符数量超出限制时，找到一个元素，并为此元素添加text-warning CSS类。”

以上两个表述虽然听起来差别不大，但是，实际上声明式和命令式是针锋相对的。命令式编程风格专注于描述通向理想结果的步骤，而声明式编程风格专注于描述结果本身，步骤则主要由支持的框架来处理。这就好像说：“亲爱的AngularJS，当模型在特定状态时，我想要UI看起来是这样。去吧，决定何时及怎样重绘UI吧！”

通常来说，声明式编程风格更具表现力，它让开发者从严格的底层实现中解放出来，写出简洁易读的代码。但是，为了让声明式编程风格工作，需要能够正确解释高级命令的机制。一方面，程序要依赖这些机制，就要放弃某种程度的底层控制。另一方面，如果采用命令式编程风格，就可以控制一切调整每个细节。但是，“掌控一切”的代价，就是要编写大量底层的、重复的代码。

AngularJS的指令用声明表达出了需要的效果，所以不用再去按部就班地修改DOM元素。AngularJS提倡在模板中使用声明式编程风格，而在JavaScript代码中使用命令式编程风格。有了AngularJS的支持，很少需要步骤详细的底层DOM操纵（唯一的例外是實现指令的代码）。

由AngularJS指令编写的声明式的uI模板，能够快速地描述复杂的交互性UI。AngularJS会接管何时及如何操纵DOM树的所有底层决定。大部分情况下，AngularJS做“正确的事”，并如期望的那样，及时更新UI。但是，理解AngularJS的内部工作机制依然很重要，这样可以在AngularJS需要时，为它提供适当的线索。可以运用SOL的比喻，大部分情况下我们不需要担心查询规划器是如何做出决定的，以便于我们为它提供更多的线索。同样的道理也适用于AngularJS所管理的UI：想要更有效地使用模板和指令，就要了解更多的内部机制。

[责任编辑：王伟平]