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

Question

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

A: {{ variable | filter }}

和

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

这些是我的问题:

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

如有错误，请指正。

Answer 1

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

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

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

情况A:变量|大写

情况B:'静态字符串' |过滤器

这两种情况添加的观察者数量没有区别，因为正在观察的是节点的组合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; }

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

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

在 AngularJS 1.3.0-rc.2 中，默认情况下过滤器是无状态的，这是一个重大的性能改进。

看下面的例子:

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

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

再次有点简化，但您可以阅读更多相关信息 here .

然而，过滤器可以覆盖它并变得有状态，Angular Translate 中的 translate 过滤器已经做到了这一点。这是必需的，因为您可以更改语言运行时，并且 hello 的值显然不会在每种语言中翻译为相同的值。

我对 Angular Translate 的了解还不够，无法评价它的性能，但明天我会仔细研究它并编辑我的答案。