AngularJS框架中的数据绑定是如何工作的?

我还没有在他们的网站上找到技术细节。当数据从视图传播到模型时,它是如何工作的,这或多或少是清楚的。但是AngularJS如何在没有setter和getter的情况下跟踪模型财产的更改?

我发现有JavaScript观察者可能会做这项工作。但Internet Explorer 6和Internet Explorer 7不支持它们。那么AngularJS如何知道我更改了例如以下内容,并将此更改反映在视图上?

myobject.myproperty="new value";

当前回答

我自己也有一段时间对此感到奇怪。没有setters,AngularJS如何注意到$scope对象的更改?它会投票吗?

它实际上是这样做的:您修改模型的任何“正常”位置都已经从AngularJS的内部调用,因此它会在代码运行后自动为您调用$apply。假设你的控制器有一个方法,它连接到某个元素上的ng点击。因为AngularJS为您将该方法的调用连接在一起,所以它有机会在适当的位置执行$apply。同样,对于出现在视图中的表达式,这些表达式由AngularJS执行,因此它执行$apply。

当文档谈到必须为AngularJS之外的代码手动调用$apply时,它指的是运行时不源自调用堆栈中AngularJS本身的代码。

其他回答

通过脏检查$scope对象

Angular在$scope对象中维护一个简单的观察者数组。如果您检查任何$scope,就会发现它包含一个名为$$watcher的数组。

每个观察者都是一个对象,其中包含其他内容

观察程序正在监视的表达式。这可能只是一个属性名称,或者更复杂的东西。表达式的最后一个已知值。这可以根据表达式的当前计算值进行检查。如果值不同,观察者将触发函数并将$scope标记为dirty。如果观察程序是脏的,将执行的函数。

如何定义观察者

在AngularJS中有许多不同的定义观察者的方法。

您可以在$scope上显式地$watch属性。$范围$watch('person.username',validateUnique);您可以在模板中放置{{}}插值(将在当前$scope上为您创建一个观察程序)。<p>用户名:{{person.username}}</p>您可以要求一个指令(如ng模型)为您定义观察者。<input ng model=“person.username”/>

$digest周期检查所有观察者的最后值

当我们通过正常通道(ng模型、ng重复等)与AngularJS交互时,指令将触发摘要循环。

摘要循环是对$scope及其所有子级的深度优先遍历。对于每个$scope对象,我们迭代其$$watcher数组并计算所有表达式。如果新的表达式值与上一个已知值不同,则调用观察者的函数。这个函数可能会重新编译DOM的一部分,重新计算$scope上的值,触发AJAX请求,任何您需要它做的事情。

遍历每个作用域,并根据最后一个值计算和检查每个监视表达式。

如果触发了观察者,则$scope是脏的

如果触发了观察者,则应用程序知道发生了变化,$scope被标记为dirty。

观察者函数可以更改$scope或父$scope上的其他属性。如果触发了一个$watcher函数,我们不能保证我们的其他$scope仍然是干净的,因此我们再次执行整个摘要循环。

这是因为AngularJS具有双向绑定,因此可以将数据传递回$scope树。我们可能会更改已经消化的较高$scope的值。也许我们更改了$rootScope上的值。

如果$digest是脏的,我们将再次执行整个$digest循环

我们不断循环$digest循环,直到消化循环干净(所有$watch表达式的值与上一个循环中的值相同),或者达到消化极限。默认情况下,此限制设置为10。

如果我们达到摘要限制,AngularJS将在控制台中引发错误:

10 $digest() iterations reached. Aborting!

摘要对机器来说很难,但对开发人员来说很容易

正如您所看到的,每当AngularJS应用程序发生变化时,AngularJS都会检查$scope层次结构中的每个观察者,以查看如何响应。对于开发人员来说,这是一个巨大的生产力优势,因为您现在几乎不需要编写任何布线代码,AngularJS只会注意到值是否发生了变化,并使应用程序的其余部分与变化保持一致。

从机器的角度来看,这是非常低效的,如果我们创建了太多的观察者,会减慢我们的应用程序的速度。Misko引用了大约4000名观察者的数据,在你的应用程序在较旧的浏览器上运行缓慢之前。

例如,如果在大型JSON数组上重复,则很容易达到此限制。您可以使用一次性绑定等功能来编译模板,而无需创建观察者。

如何避免创建过多观察者

每次用户与应用程序交互时,应用程序中的每个观察者都将至少进行一次评估。优化AngularJS应用程序的很大一部分是减少$scope树中的观察者数量。一种简单的方法是一次性绑定。

如果您有很少更改的数据,则只能使用::语法将其绑定一次,如下所示:

<p>{{::person.username}}</p>

or

<p ng-bind="::person.username"></p>

只有当呈现包含模板并将数据加载到$scope中时,才会触发绑定。

当你重复很多项目时,这一点尤为重要。

<div ng-repeat="person in people track by username">
  {{::person.username}}
</div>

这是我的基本理解。这很可能是错误的!

通过传递函数(返回要watch)转换为$watch方法。必须在代码块内对关注的项目进行更改由$apply方法包装。在$apply结束时,调用$digest方法通过每一块手表和检查,看看它们是否发生了变化上次运行$digest时。如果发现任何更改,则再次调用摘要,直到所有更改稳定下来。

在正常开发中,HTML告诉AngularJS编译器为您创建手表,并且控制器方法已经在$apply中运行。所以对于应用程序开发人员来说,它是完全透明的。

AngularJS记住该值并将其与以前的值进行比较。这是基本的脏检查。如果值发生变化,则触发变化事件。

$apply()方法调用$digital(),它是当您从非AngularJS世界转换到AngularJS时调用的方法。摘要只是一个简单的旧检查。它适用于所有浏览器,完全可以预测。

对比脏检查(AngularJS)和更改侦听器(KnockoutJS和Backbone.js):虽然脏检查可能看起来很简单,甚至效率很低(我稍后会讨论),但事实证明它始终在语义上是正确的,而更改侦听器有很多奇怪的角落情况,需要依赖项跟踪之类的东西来使其更加语义正确。KnockoutJS依赖跟踪是解决AngularJS没有的问题的一个聪明功能。

更改侦听器的问题:

这种语法非常糟糕,因为浏览器本身不支持它。是的,有代理,但它们在所有情况下都不是语义正确的,当然在旧浏览器上也没有代理。底线是,脏检查允许您执行POJO,而KnockoutJS和Backbone.js强制您从它们的类继承,并通过访问器访问数据。更改合并。假设您有一个项目数组。假设您想将项添加到数组中,因为您正在循环添加,每次添加时都会触发更改事件,这就是呈现UI。这对性能非常不利。您需要的是在最后只更新一次UI。更改事件过于精细。更改侦听器会立即触发setter,这是一个问题,因为更改侦听器可以进一步更改数据,从而触发更多的更改事件。这很糟糕,因为在堆栈上,可能会同时发生多个更改事件。假设您有两个数组,无论出于何种原因,它们都需要保持同步。您只能添加其中一个或另一个,但每次添加时都会引发一个更改事件,这会导致对世界的看法不一致。这是一个非常类似于线程锁定的问题,JavaScript避免了这个问题,因为每个回调都以独占方式执行,直到完成。更改事件打破了这一点,因为设置器可能会产生深远的后果,而这些后果不是故意的,也不是显而易见的,这会再次导致线程问题。事实证明,您想要做的是延迟侦听器的执行,并保证一次只运行一个侦听器,因此任何代码都可以自由更改数据,并且它知道在执行此操作时没有其他代码运行。

性能如何?

因此,我们似乎很慢,因为脏检查效率很低。这就是我们需要研究实数的地方,而不仅仅是理论论证,但首先我们来定义一些约束条件。

人类是:

慢-任何速度超过50毫秒的东西都是人类无法察觉的,因此可以被视为“瞬间”。有限-你不能在一个页面上向人类显示超过2000条信息。除此之外的任何东西都是非常糟糕的UI,人类无论如何都无法处理它。

所以真正的问题是:在50毫秒内,你可以在浏览器上进行多少次比较?这是一个很难回答的问题,因为许多因素都在起作用,但这里有一个测试案例:http://jsperf.com/angularjs-digest/6这创造了10000名观众。在现代浏览器上,这需要不到6毫秒的时间。在Internet Explorer 8上,大约需要40毫秒。正如你所看到的,即使是在现在速度较慢的浏览器上,这也不是问题。有一个警告:比较需要简单,以符合时间限制。。。不幸的是,在AngularJS中添加缓慢的比较太容易了,所以当你不知道自己在做什么时,很容易构建缓慢的应用程序。但我们希望通过提供一个检测模块来得到答案,它将向您显示哪些是比较缓慢的。

事实证明,视频游戏和GPU使用脏检查方法,特别是因为它是一致的。只要它们超过了监视器刷新率(通常为50-60 Hz,或每16.6-20 ms),任何超过这个速度的性能都是浪费,所以你最好画更多的东西,而不是提高FPS。

碰巧我需要将一个人的数据模型与表单链接起来,我所做的是将数据与表单直接映射。

例如,如果模型具有以下内容:

$scope.model.people.name

表单的控制输入:

<input type="text" name="namePeople" model="model.people.name">

这样,如果修改对象控制器的值,这将自动反映在视图中。

我传递的一个从服务器数据更新模型的例子是,当您根据与该视图相关联的殖民地和城市列表的书面加载请求邮政编码和邮编时,默认情况下会向用户设置第一个值。这一点我做得很好,确实发生了,angularJS有时需要几秒钟来刷新模型,为此,您可以在显示数据时放置一个微调器。

单向数据绑定是一种从数据模型中获取值并插入到HTML元素中的方法。无法从视图更新模型。它用于经典模板系统。这些系统仅在一个方向上绑定数据。Angular应用程序中的数据绑定是模型和视图组件之间数据的自动同步。

数据绑定允许您将模型视为应用程序中的唯一真实来源。视图始终是模型的投影。如果模型已更改,视图将反映更改,反之亦然。