如何数据绑定在AngularJS工作？ [英] How does data binding work in AngularJS?
问题描述
如何在AngularJS框架数据绑定工作？
在我还没有发现技术细节href=\"http://angularjs.org\">他们的网站。这或多或少清楚它是如何工作当数据从视图模型传播。但如何做模特属性的AngularJS跟踪变化没有getter和setter方法？我发现里面有<一个href=\"http://stackoverflow.com/questions/1029241/javascript-object-watch-for-all-browsers\">JavaScript观察家可以做这项工作。资源管理器＆NBSP; 6 并的互联网＆NBSP支持/维基/ Internet_Explorer_7>互联网＆NBSP;＆浏览器NBSP; 7 。那么，如何AngularJS知道我改变，例如以下，反映在视图上这种变化？
myobject.myproperty =新价值;
AngularJS记住值，并将其比作previous值。这是基本的脏检查。如果有值的变化，那么它触发change事件。
的 $适用（）方法，这是当你从非AngularJS世界过渡到一个AngularJS世界里，你叫什么，叫 $摘要（）。摘要是只是普通的老脏检查。它适用于所有的浏览器，是完全predictable。
要比较脏检查（AngularJS）VS更改侦听器（ KnockoutJS 并的Backbone.js ）：虽然脏检查看似简单，甚至低效（即我将在稍后讨论），事实证明，这是语义正确的所有时间，而改变的听众有很多奇怪的角落案件和需要的东西像依赖性跟踪，使之更加语义正确。 KnockoutJS依赖性跟踪是其中AngularJS不会有问题一个聪明的功能。
变革听众的问题：
- 的语法是残酷的，因为浏览器不支持它本身。是的，有代理，但它们不是正确的语义在所有情况下，当然也有老的浏览器没有代理。底线是脏检查可以让你做 POJO ，而KnockoutJS和Backbone.js的力量，你从他们的继承班，并通过访问访问您的数据。
- 更改合并。假设你有一个项目数组。说你要添加项目到一个数组，因为你是循环添加，每次添加你射击变化事件，这是呈现UI的时间。这是表现非常糟糕。你想要的是只有一次更新UI，在年底。这种变化的事件过于细粒度。
- 更改听众立即触发一个二传手，这是一个问题，因为更改侦听器可以进一步转变数据，从而激发更多的变化事件。这是因为不好对你的堆栈，你可能有几个变化事件同时发生。假设你有两个数组这就需要保持同步无论出于何种原因。您只能添加到一个或其他，但每次添加您的时间触发一个事件的变化，现在拥有世界不一致的看法。这是螺纹的锁固，它的JavaScript避免，因为每个回调专门执行和完成一个非常类似的问题。更改事件打破了这个，因为制定者可以有不打算和非显而易见的，这一遍创建线程问题产生深远的影响。事实证明，你想要做的是延迟监听执行，并保证，只有一个监听器在同一时间运行，因此，任何code是随意更改数据，它知道没有其他code运行而它这样做。
怎么样的表现？
所以它可能看起来我们是缓慢的，因为脏检查是低效的。这是我们需要真正的数字来看看，而不是仅仅有理论上的争论，但首先我们定义一些限制。
人类是：
-
<青霉>慢的 - 任何大于50 NBSP更快;毫秒是觉察不到的人类，因此可以被认为是瞬时
-
的有限公司的 - 你不能真正表现出比约2000条信息更多的人在一个页面上。什么比这更是非常糟糕的用户界面，而且人类无法反正处理此。
因此，真正的问题是：有多少比较可以在50＆NBSP浏览器做; MS？这是一个很难回答的问题尽可能多的因素在起作用，但这里是一个测试案例： http://jsperf.com/angularjs创造万观察家-digest / 6 。在一个现代的浏览器这需要不到6＆NBSP;毫秒。在互联网＆NBSP;＆浏览器NBSP; 8 大约需要40 NBSP;毫秒。正如你所看到的，这是不是即使在慢的浏览器，这些天的一个问题。有一个警告：攀比需要简单以适应的时间限制......不幸的是太容易添加一个比较缓慢的进入AngularJS，所以很容易建立慢应用程序时，你不知道你是什么是做。但是我们希望通过提供一个仪表模块有一个答案，它会告诉你哪些是比较缓慢的。
原来，视频游戏和GPU的使用肮脏的检查方法，特别是因为它是一致的。只要他们得到了显示器的刷新频率（通常为50-60赫兹，或每16.6-20毫秒），比任何性能是一种浪费，所以你最好还是吸引更多的东西，比获得FPS更高。
How does data binding work in the AngularJS framework?
I haven't found technical details on their site. It's more or less clear how it works when data is propagated from view to model. But how does AngularJS track changes of model properties without setters and getters?
I found that there are JavaScript watchers that may do this work. But they are not supported in Internet Explorer 6 and Internet Explorer 7. So how does AngularJS know that I changed for example the following and reflected this change on a view?
myobject.myproperty="new value";
AngularJS remembers the value and compares it to a previous value. This is basic dirty-checking. If there is a change in value, then it fires the change event.
The $apply() method, which is what you call when you are transitioning from a non-AngularJS world into an AngularJS world, calls $digest(). A digest is just plain old dirty-checking. It works on all browsers and is totally predictable.
To contrast dirty-checking (AngularJS) vs change listeners (KnockoutJS and Backbone.js): While dirty-checking may seem simple, and even inefficient (I will address that later), it turns out that it is semantically correct all the time, while change listeners have lots of weird corner cases and need things like dependency tracking to make it more semantically correct. KnockoutJS dependency tracking is a clever feature for a problem which AngularJS does not have.
Issues with change listeners:
- The syntax is atrocious, since browsers do not support it natively. Yes, there are proxies, but they are not semantically correct in all cases, and of course there are no proxies on old browsers. The bottom line is that dirty-checking allows you to do POJO, whereas KnockoutJS and Backbone.js force you to inherit from their classes, and access your data through accessors.
- Change coalescence. Suppose you have an array of items. Say you want to add items into an array, as you are looping to add, each time you add you are firing events on change, which is rendering the UI. This is very bad for performance. What you want is to update the UI only once, at the end. The change events are too fine-grained.
- Change listeners fire immediately on a setter, which is a problem, since the change listener can further change data, which fires more change events. This is bad since on your stack you may have several change events happening at once. Suppose you have two arrays which need to be kept in sync for whatever reason. You can only add to one or the other, but each time you add you fire a change event, which now has an inconsistent view of the world. This is a very similar problem to thread locking, which JavaScript avoids since each callback executes exclusively and to completion. Change events break this since setters can have far-reaching consequences which are not intended and non obvious, which creates the thread problem all over again. It turns out that what you want to do is to delay the listener execution, and guarantee, that only one listener runs at a time, hence any code is free to change data, and it knows that no other code runs while it is doing so.
What about performance?
So it may seem that we are slow, since dirty-checking is inefficient. This is where we need to look at real numbers rather than just have theoretical arguments, but first let's define some constraints.
Humans are:
Slow — Anything faster than 50 ms is imperceptible to humans and thus can be considered as "instant".
Limited — You can't really show more than about 2000 pieces of information to a human on a single page. Anything more than that is really bad UI, and humans can't process this anyway.
So the real question is this: How many comparisons can you do on a browser in 50 ms? This is a hard question to answer as many factors come into play, but here is a test case: http://jsperf.com/angularjs-digest/6 which creates 10,000 watchers. On a modern browser this takes just under 6 ms. On Internet Explorer 8 it takes about 40 ms. As you can see, this is not an issue even on slow browsers these days. There is a caveat: The comparisons need to be simple to fit into the time limit... Unfortunately it is way too easy to add a slow comparison into AngularJS, so it is easy to build slow applications when you don't know what you are doing. But we hope to have an answer by providing an instrumentation module, which would show you which are the slow comparisons.
It turns out that video games and GPUs use the dirty-checking approach, specifically because it is consistent. As long as they get over the monitor refresh rate (typically 50-60 Hz, or every 16.6-20 ms), any performance over that is a waste, so you're better off drawing more stuff, than getting FPS higher.
这篇关于如何数据绑定在AngularJS工作？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
