数据绑定在AngularJS框架中如何工作?
AngularJS
我尚未在其网站上找到技术细节。数据从视图传播到模型时,或多或少地清楚了它是如何工作的。但是,AngularJS如何在没有设置者和获取者的情况下跟踪模型属性的变化?
我发现有些JavaScript观察程序可以完成这项工作。但是Internet Explorer 6和Internet Explorer 7不支持它们。那么AngularJS如何知道我更改了以下内容并在视图中反映了此更改?
myobject.myproperty="new value";
AngularJS会记住该值并将其与先前的值进行比较。这是基本的脏检查。如果值发生更改,则将触发更改事件。
$apply()从非AngularJS世界过渡到AngularJS世界时,你调用的方法就是调用$digest()。摘要只是普通的脏检查。它适用于所有浏览器,并且完全可以预测。
$apply()
$digest()
对比脏检查(AngularJS)与更改侦听器(KnockoutJS和Backbone.js):尽管脏检查似乎很简单,甚至效率很低(我稍后会解决),但事实证明,它一直在语义上是正确的,变更侦听器有很多奇怪的极端情况,并且需要诸如依赖性跟踪之类的东西才能使其在语义上更加正确。KnockoutJS依赖项跟踪是AngularJS所没有的问题的一项聪明功能。
变更侦听器的问题:
性能如何?
因此,由于脏检查效率低下,因此我们似乎很慢。这是我们需要查看实数而不是仅具有理论参数的地方,但是首先让我们定义一些约束。
人类是:
慢 -任何比50毫秒都快的速度是人类所无法察觉的,因此可以视为“即时”。
受限 -你在一个页面上不能真正显示超过2000条信息。除此之外,还真是糟糕的UI,人类无论如何都无法处理。
因此,真正的问题是:你可以在50毫秒内在浏览器上进行多少次比较?这是一个很难回答的问题,因为有许多因素在起作用,但这是一个测试用例:http : //jsperf.com/angularjs-digest/6,它创建了10,000个观察者。在现代浏览器上,这仅需不到6毫秒。在Internet Explorer 8上,大约需要40毫秒。如你所见,即使这些天在缓慢的浏览器上,这也不是问题。需要注意的是:比较必须很简单才能适应时间限制…不幸的是,将慢速比较添加到AngularJS中太容易了,因此当你不知道自己要做什么时,很容易构建慢速应用程序是做。但是我们希望通过提供一个检测模块来解决这个问题,该模块将向你展示哪些是比较慢的比较。
事实证明,视频游戏和GPU使用脏检查方法,特别是因为它是一致的。只要它们超过了监视器的刷新率(通常为50-60 Hz,或每16.6-20 ms),任何超过该频率的性能都是浪费,因此,与提高FPS相比,最好消耗更多的资源。