AngularJS框架中的数据绑定是如何工作的?
我还没有在他们的网站上找到技术细节。当数据从视图传播到模型时,它是如何工作的,这或多或少是清楚的。但是AngularJS如何在没有setter和getter的情况下跟踪模型财产的更改?
我发现有JavaScript观察者可能会做这项工作。但Internet Explorer 6和Internet Explorer 7不支持它们。那么AngularJS如何知道我更改了例如以下内容,并将此更改反映在视图上?
myobject.myproperty="new value";
Misko已经很好地描述了数据绑定的工作方式,但我想补充一下我对数据绑定性能问题的看法。
正如Misko所说,大约2000个绑定是您开始发现问题的地方,但无论如何,页面上的信息不应该超过2000条。这可能是正确的,但并不是每个数据绑定都对用户可见。一旦开始使用双向绑定构建任何类型的小部件或数据网格,就可以很容易地达到2000个绑定,而不会出现糟糕的UX。
例如,考虑一个组合框,您可以在其中键入文本以筛选可用选项。这种控件可能有150个项目,并且仍然非常有用。如果它有一些额外的特性(例如,当前所选选项上的特定类),则开始为每个选项提供3-5个绑定。在一个页面上放置三个小部件(例如,一个用于选择国家,另一个用于在所述国家中选择城市,第三个用于选择酒店),您已经绑定了1000到2000个绑定。
或者考虑企业web应用程序中的数据网格。每页50行不是不合理的,每行可以有10-20列。如果您使用ng重复进行构建,和/或在某些使用某些绑定的单元格中有信息,那么仅使用此网格就可能接近2000个绑定。
在使用AngularJS时,我发现这是一个巨大的问题,到目前为止,我能找到的唯一解决方案是在不使用双向绑定的情况下构造小部件,而不是使用ngOnce、注销观察者和类似的技巧,或者构造用jQuery和DOM操纵构建DOM的指令。我觉得这一点一开始就违背了使用Angular的目的。
我很想听听关于处理这个问题的其他方法的建议,但也许我应该自己写一个问题。我想在评论中发表这一点,但事实证明这太长了。。。
TL;博士数据绑定可能会导致复杂页面的性能问题。
Misko已经很好地描述了数据绑定的工作方式,但我想补充一下我对数据绑定性能问题的看法。
正如Misko所说,大约2000个绑定是您开始发现问题的地方,但无论如何,页面上的信息不应该超过2000条。这可能是正确的,但并不是每个数据绑定都对用户可见。一旦开始使用双向绑定构建任何类型的小部件或数据网格,就可以很容易地达到2000个绑定,而不会出现糟糕的UX。
例如,考虑一个组合框,您可以在其中键入文本以筛选可用选项。这种控件可能有150个项目,并且仍然非常有用。如果它有一些额外的特性(例如,当前所选选项上的特定类),则开始为每个选项提供3-5个绑定。在一个页面上放置三个小部件(例如,一个用于选择国家,另一个用于在所述国家中选择城市,第三个用于选择酒店),您已经绑定了1000到2000个绑定。
或者考虑企业web应用程序中的数据网格。每页50行不是不合理的,每行可以有10-20列。如果您使用ng重复进行构建,和/或在某些使用某些绑定的单元格中有信息,那么仅使用此网格就可能接近2000个绑定。
在使用AngularJS时,我发现这是一个巨大的问题,到目前为止,我能找到的唯一解决方案是在不使用双向绑定的情况下构造小部件,而不是使用ngOnce、注销观察者和类似的技巧,或者构造用jQuery和DOM操纵构建DOM的指令。我觉得这一点一开始就违背了使用Angular的目的。
我很想听听关于处理这个问题的其他方法的建议,但也许我应该自己写一个问题。我想在评论中发表这一点,但事实证明这太长了。。。
TL;博士数据绑定可能会导致复杂页面的性能问题。
数据绑定:
什么是数据绑定?
每当用户更改视图中的数据时,范围模型中就会出现该更改的更新,反之亦然。
怎么可能?
简短回答:借助消化循环。
说明:Angular js在作用域模型上设置观察者,如果模型发生变化,它会触发监听器函数。
$scope.$watch('modelVar' , function(newValue,oldValue){
//使用新值更新Dom代码
});
那么何时以及如何调用观察程序函数?
作为摘要循环的一部分调用观察程序函数。
摘要循环是作为angular js内置指令/服务的一部分自动触发的,如ng model、ng bind、$timeout、ng click等。。让你触发消化周期。
摘要循环功能:
$scope.$digest() -> digest cycle against the current scope.
$scope.$apply() -> digest cycle against the parent scope
即$rootScope.$apply()
注:$apply()等于$rootScope$digest()这意味着脏检查从根或顶部或父作用域开始,一直到angular js应用程序中的所有子$scopes。
上述功能适用于上述版本的浏览器IE,只需确保您的应用程序是angular js应用程序,这意味着您使用的是脚本标记中引用的angularjs框架脚本文件。
非常感谢。
AngularJS借助三个强大的函数来处理数据绑定机制:$watch()、$digital()和$apply()。大多数时候AngularJS都会调用$scope$watch()和$scope$digest(),但是在某些情况下,您可能需要手动调用这些函数来更新新值。
$watch():-
此函数用于观察$scope上变量的变化。它接受三个参数:表达式、监听器和相等对象,其中监听器和相等对象是可选参数。
$digest()-
此函数迭代$scope对象中的所有手表,及其子$scope对象(如果有)。当$digest()迭代时在手表上,它检查表达式的值是否改变。如果值已更改,AngularJS将使用新值和旧值。调用$digest()函数每当AngularJS认为有必要时。例如,在按钮之后或者在AJAX调用之后。在某些情况下,AngularJS不会为您调用$digest()函数。在这种情况下,你必须你自己说吧。
$apply()-
Angular确实会自动神奇地更新那些在AngularJS上下文中。当您在Angular上下文(如浏览器DOM事件、setTimeout、XHR或第三个party库),则需要通过手动调用$apply()。当$apply()函数调用完成时AngularJS在内部调用$digital(),因此所有数据绑定都是更新。