Question

我一直想知道是否使用充满吸气剂的模板，或者只是使用旋转变压器预先构建整个物体，我似乎无法在任何地方找到明确的答案。

我在下面创建了两个简化的方案。

目前，我总是使用方案1，但是一旦应用/程序变得更加复杂，我就会注意到（巨大的）性能下降，因此我从现在开始考虑使用方案2。

场景1：获取功能

Pro：您只能在当前模板中获取/使用您需要的任何内容。添加新的getter不需要您更新接口。
Con：在单个模板中拥有数百/数千个吸气剂时对性能的影响（我认为）。

代码：

var devices = ['desktop', 'tablet', 'mobile'];

var icons = {
    desktop: 'icon-desktop',
    tablet: 'icon-tablet',
    mobile: 'icon-mobile'
}

var translations = {
    desktop: 'Desktop',
    tablet: 'Tablet',
    mobile: 'Mobile'
}

getIcon(item: string): string {
    return icons(type);
}

getTranslation(item: string): string {
    return translations(type);
}

模板：

<div *ngFor="device in devices">
    <i [class]="getIcon(device)"></i>
    <span>{{ getTranslation(device) }}</span>
</div>

场景2：预构建对象

Pro：使用resolve，可以轻松预构建整个对象，从而跳过模板中的所有getter。
Pro：对象永远不会改变，因此Angular不必观察＆＃39;它。
Con：对象可能变得庞大，并且可能永远不会使用许多属性。

代码：

var devices = [
    {
        item: 'desktop',
        translation: 'Desktop',
        icon: 'icon-desktop'
    },
    {
        item: 'tablet',
        translation: 'Tablet',
        icon: 'icon-tablet'
    },
    {
        item: 'mobile',
        translation: 'Mobile',
        icon: 'icon-mobile'
    }
]

模板：

<div *ngFor="device in devices">
    <i [class]="device.icon"></i>
    <span>{{ device.translation }}</span>
</div>

有谁能告诉我每种情况的利弊，为什么？性能如何（我的主要问题）？个人偏好或经历？

Answer 1

每次更改检测周期都会调用

getTranslation(device)。这提供了性能开销，但只要getTranslation本身并不昂贵，这是无关紧要的。

更常规的方法是使用像{{ device | translation }}这样的管道。这可以是纯管道，效率更高。但是，如果语言应该动态更改，那么管道应该是不纯的，因为即使device值不变，表达式也会计算为新值。

Answer 2

根据我的经验，使用模板中调用的getter将比函数调用近100％。您可以通过在每个中插入console.count()来测试。

取决于您的应用或组件使用OnPush更改检测策略，这将彻底切断通话。

Angular：预构造对象与模板getter

2 个答案: