第二章：2.1 AngularJS 中的数据绑定

Posted 2021-04-26 IT哥斯拉

在Rails等传统Web框架中，控制器将多个模型中的数据和模板组合在一起形成视图，并将其提供给用户，这个组合过程会产生一个单向视图。如果没有创建任何自定义的javascript组件，视图只会体现它渲染时模型暴露出的数据。在写这篇文章时，已经出现了好几个可以在视图和模型之间自动进行数据绑定的框架。

AngularJS则采用了完全不同的解决方案。它创建实时模板来代替视图，而不是将数据合并进模板之后更新DOM。任何一个独立视图组件中的值都是动态替换的。这个功能可以说是AngularJS中最重要的功能之一，也是让我们只用10行代码，并且在没有任何JavaScirpt的情况下就可以写出Hello World的关键

要实现这个功能，

1. 只要在html页面中引用 angular.js ，

2. 并在某个DOM元素上明确设置ng-app 属性即可。 ng-app 属性声明所有被其包含的内容都属于这个AngularJS应用，这也是我们可以在Web应用中嵌套AngularJS应用的原因。只有被具有 ng-app 属性的DOM元素包含的元素才会受AngularJS影响。

自动数据绑定使我们可以将视图理解为模型状态的映射。当客户端的数据模型发生变化时，视图就能反映出这些变化，并且不需要写任何自定义的代码，它就可以工作。

在MVC（Model View Controller，模型，视图，控制器）的世界里，控制器可以不必担心会牵扯到渲染视图的工作。这样我们就不必再担心如何分离视图和控制器逻辑，并且也可以使测试变得既简单又令人愉悦。

MVC是一种软件架构设计模式，它将表现从用户交互中分离出来。通常来讲，

1. 模型中包含应用的数据和与数据进行交互的方法，

2. 视图将数据呈献给用户

3. 控制器则是二者之间的桥梁。

这种表现分离能将应用中的对象很好地隔离开来，因此视图不需要知道如何保

存对象，只要知道如何显示它即可。这也意味着数据模型不需要同视图进行交

互，只需要包含数据和操作视图的方法。控制器用来存放将二者绑定在一起的

业务逻辑。

AngularJS会记录数据模型所包含的数据在任何特定时间点的值（在Hello World例子中就是name 的值），而不是原始值。

脏检查（dirty checking）

当AngularJS认为某个值可能发生变化时，它会运行自己的事件循环来检查这个值是否变“脏”。如果该值从上次事件循环运行之后发生了变化，则该值被认为是“脏”值。这也是Angular可以跟踪和响应应用变化的方式。

这个事件循环会调用 $digest() 循环

脏检查是检查数据模型变化的有效手段。当有潜在的变化存在时，AngularJS会在事件循环时执行脏检查来保证数据的一致性。

如果使用 KnockoutJS 这种通过在数据模型上绑定事件监听器来监听数据变化的框架，这个过程会变得更复杂且低效 。处理事件合并、依赖跟踪和大量的事件触发（event firing）是非常复杂的，而且会在性能方面导致额外的问题。

借助AngularJS，不需要构建复杂和新的JavaScript功能，就可以在视图中实现类自动同步的机制。

为了表示内部和内置的库函数，Angular使用 $ 预定义对象。尽管这类似于全局的jQuery对象 $ ，但它们是完全无关的。只要遇到 $ 符号，你都可以只把它看作一个Angular对象。