AngularJS:为什么ng-bind在角度方面比{{}}好?

2020/09/28 20:01 · javascript ·  · 0评论

我参加了一次有角度的演讲,会议中提到的一位参加者ng-bind胜于{{}}约束力。

原因之一是ng-bind将变量放在监视列表中,并且仅当发生模型更改时,才将数据推送到视图中查看;另一方面,{{}}每次都会对表达式进行插值(我猜这是角周期)并推送值,即使值更改或不更改。

也有人说,如果屏幕上没有太多数据,则可以使用{{}},并且性能问题将不可见。有人可以帮我阐明一下这个问题吗?

如果您没有使用ng-bind,则类似以下内容:

<div>
  Hello, {{user.name}}
</div>

您可能会Hello, {{user.name}}user.name解决之前(在加载数据之前看到一秒钟的实际

你可以做这样的事情

<div>
  Hello, <span ng-bind="user.name"></span>
</div>

如果这对您来说是个问题。

另一个解决方案是使用ng-cloak

能见度:

当您的angularjs启动时,用户可能会在html中看到您放置的括号。可以使用来处理ng-cloak但是对我来说,这是一种变通方法,如果我使用的话,则不需要使用ng-bind


性能:

{{}}慢得多

ng-bind是一条指令,它将在传递的变量上放置观察者。因此,ng-bind仅当传递的值确实发生更改时,才会应用

在另一方面括号将脏检查,并刷新在每一个 $digest,即使是没有必要的


我目前正在构建一个大型单页应用程序(每个视图约500个绑定)。从{{}}更改为strict ng-bind确实可以为我们节省大约20%的费用scope.$digest


建议

如果您使用诸如angular-translate之类的转换模块,请始终在括号注释之前使用指令

{{'WELCOME'|translate}} => <span ng-translate="WELCOME"></span>

如果您需要过滤器功能,最好选择一个指令,该指令实际上只是使用您的自定义过滤器。 $ filter服务的文档


2014年11月28日更新(但可能不在主题范围内):

在Angular 1.3x bindonce中引入功能。因此,您可以一次绑定一个表达式/属性的值(当!='undefined'时将被绑定)。

当您不希望绑定更改时,这很有用。

用法:::在装订前放置

<ul>  
  <li ng-repeat="item in ::items">{{item}}</li>
</ul>  
<a-directive name="::item">
<span data-ng-bind="::value"></span>

例:

ng-repeat在表中输出一些数据,每行具有多个绑定。翻译绑定,过滤器输出,将在每个作用域摘要中执行。

ng-bind 胜过 {{...}}

例如,您可以这样做:

<div>
  Hello, {{variable}}
</div>

这意味着将Hello, {{variable}}包围其中的整个文本<div>并将其存储在内存中。

相反,如果您执行以下操作:

<div>
  Hello, <span ng-bind="variable"></span>
</div>

仅该值的值将存储在内存中,而angular将注册仅包含变量的监视程序(监视表达式)。

基本上,double-curly语法更自然易读,并且需要更少的键入。

两种情况都产生相同的输出,但是..如果选择继续使用{{}},则用户有可能会看到几毫秒的时间,{{}}然后才能通过角度渲染模板。因此,如果您发现有任何{{}}更好的用法ng-bind

同样非常重要的是,只有在角度应用程序的index.html中,您才能取消渲染{{}}如果使用指令,则使用模板,那么就没有机会看到它,因为angular首先渲染模板,然后将其附加到DOM。

{{...}}是指双向数据绑定。但是,ng-bind实际上是用于单向数据绑定的。

使用ng-bind将减少您页面中观察者的数量。因此ng-bind将比快{{...}}因此,如果您只想显示一个值及其更新,并且不想将其更改从UI反映回控制器,那么请使用ng-bind这将提高页面性能并减少页面加载时间。

<div>
  Hello, <span ng-bind="variable"></span>
</div>

这是因为使用{{}}角度编译器会同时考虑文本节点及其父节点,因为可能会合并两个{{}}节点。因此,还有其他链接程序会增加加载时间。当然,对于少数这种情况,差异并不重要,但是在大量项目的中继器中使用它时,会在较慢的运行环境中产生影响。

在此处输入图片说明

Ng-Bind之所以更好的原因是,

当您的页面未加载或互联网速度缓慢或网站加载了一半时,您会看到这些类型的问题(检查带有已读标记的屏幕快照)将在完全奇怪的屏幕上触发。为了避免这种情况,我们应该使用Ng-bind

ng-bind也有问题。当您尝试使用角度滤镜限制或其他功能时,如果使用ng-bind可能会遇到问题但是在其他情况下,ng-bindUX方面更好。当用户打开页面时,他/她将看到(10ms-100ms)打印符号({{...}}),这就是ng-bind更好的原因。

{{}}中存在一些闪烁的问题,例如刷新页面后会看到一小段时间的垃圾邮件,因此我们应该使用ng-bind而不是表达式进行数据描述。

ng-bind也更安全,因为它表示html为字符串。

因此,例如,'<script on*=maliciousCode()></script>'将显示为字符串而不执行。

根据Angular Doc的说法:

由于
ngBind是元素属性,因此它使页面加载时用户看不到绑定...这是主要区别...

基本上,直到每个DOM不装的元素,我们看不到他们,因为ngBind是元素属性,它会等待直到延迟性肌肉酸痛发挥作用... 下面更多信息

ngBind
-指令在模块纳克


ngBind属性告诉AngularJS替换与给定表达式的值指定的HTML元素的文本内容,并更新文本内容时的表达的改变的值。

通常,您不直接使用ngBind,而是使用类似{{expression}}的双重卷曲标记,它虽然相似,但比较冗长。

如果模板在AngularJS编译之前由浏览器暂时以原始状态显示,则最好使用ngBind代替{{expression}}。由于ngBind是元素属性,因此它使页面加载时用户看不到绑定。

解决此问题另一种方法是使用ngCloak指令。拜访这里

有关ngbind的更多信息,请访问以下页面:https : //docs.angularjs.org/api/ng/directive/ngBind

您可以将ng-bind作为属性来执行以下操作

<div ng-bind="my.name"></div>

或如下进行插值:

<div>{{my.name}}</div>

或者用AngularJs中的ng-cloak属性的这种方式:

<div id="my-name" ng-cloak>{{my.name}}</div>

ng-cloak避免在dom上闪烁并等待所有准备就绪!这等于ng-bind属性...

您可以参考此站点,它将向您解释哪种方法更好,据我所知{{}},它比ng-bind慢。

http://corpus.hubwiz.com/2/angularjs/16125872.html
引用此站点。

本文地址:http://javascript.askforanswer.com/angularjsweishenmeng-bindzaijiaodufangmianbihao.html
文章标签: ,   ,  
版权声明:本文为原创文章,版权归 javascript 所有,欢迎分享本文,转载请保留出处!

文件下载

老薛主机终身7折优惠码boke112

上一篇:
下一篇:

评论已关闭!