angular.js中的静态与动态插值及其性能

static vs dynamic interpolations in angular.js and their performance

本文关键字：插值 性能 动态 js 静态 angular      更新时间：2023-09-26

简而言之，我想问一下之间的区别

A: {{ variable | filter }}

和

B: {{ 'static string' | filter }}

以下是我的问题：

  1. 它们都被称为插值还是仅被称为A
  2. A使用$interpolate，而B使用$parse——这是真的吗？（基于另一个SO问题）
  3. 性能差异是什么？当我使用A时，每次variable值发生变化时，都会更新模板（侦听变量的变化）。如果有大量的插值（如A），则可能会由于在模型上进行大量侦听而出现性能问题。B不同吗？特别是，我正在考虑使用http://angular-translate.github.io/，使用translate滤波器。某个地方有一个全局变量，包含接口中使用的实际语言，当它发生更改时，所有使用translate过滤器的B插值都将更新。但它是如何在下面工作的，什么是在听什么？语言变量值（保存在angular config中）上是否只有一个监听器，可以在语言更改时注册要翻译的多个i18n标签？或者有多个听众？如果我有500个{{ 'static string' | translate }}插值，它会因为侦听器而减慢我的应用程序吗

如果我哪里错了，请纠正我。

两者都是插值。无论何时涉及{{和}}（当然，除非您更改了符号），包装的内容都将通过插值服务。

如上所述，A和B都将使用$interpolate服务。$interpolate服务使用$parse服务，因此A和B都将"使用"这两种服务。

这些是将从$interpolate传递到$parse:的确切字符串

案例A：variable | uppercase

案例B：'static string' | filter

为这两种情况添加的观察者数量没有差异，因为正在观察的是节点的组合nodeValue。

例如，在这两种情况下添加的观察者数量也没有区别：

<div>{{one}}</div>
<div>{{one}} {{two}}</div>

情况A和B之间的性能差异归结为用于获取表达式左侧的函数。

在A的情况下，它基本上将是：

function (locals, scope) {
  return ((locals && locals.hasOwnProperty('variable')) ? locals : scope).variable;
}

在B的情况下（其中string被保存在clojure中并且具有值static string:

function() { return string; }

两者在执行时间上的差异应该不明显（除非你有大量的插值）。

一般来说，过滤器应该保持简单，因为它们可以多次执行。

在AngularJS1.3.0-rc.2中，过滤器默认为无状态，这是一个主要的性能改进。

举以下例子：

<div>{{ variable | uppercase }}</div>

当摘要循环运行时，它将检测variable的值并应用过滤器。下一次运行摘要循环时，variable的值可能没有更改。由于过滤器是无状态的，这意味着左侧的一个值应该始终从过滤器中生成相同的值，因此它不必再次应用过滤器，而是可以使用上次应用过滤器时的缓存值。

再次有点简化，但你可以在这里阅读更多关于它的信息。

然而，过滤器可以覆盖这一点并成为有状态的，这是Angular Translate中的translate过滤器所做的。这是必需的，因为您可以在运行时更改语言，而且hello的值显然不会在每种语言中转换为相同的值。

我对Angular Translate的了解还不足以说明它的性能，但我明天会仔细研究它，并编辑我的答案

相关文章：