javascript - 在 Angular 中定义类范围之外的变量是一个好习惯吗？

Question

在 Angualr 中经常会看到这些代码:

import { Component, OnInit } from '@angular/core';

@Component({
    selector: 'app',
    template: '<div *ngFor="let item of data"></div>'
})
export class App {
    // we define variable here
    data = [1, 2];
    tempData = [3, 4]; //temporary data, not involved in view rendering
}

正如我们所看到的，有一个临时变量不会参与 View 渲染，但是临时变量对于我们的应用程序临时存储数据来说也是必需的。

这样写怎么样:

import { Component, OnInit } from '@angular/core';
const tempData = [3, 4]; //temporary data, not involved in view rendering
@Component({
    selector: 'app',
    template: '<div *ngFor="let item of data"></div>'
})

export class App {
    // we define variable here
    data = [1, 2];
}

由于临时变量不会在 View 渲染中使用，因此我可以在类外部定义它。而且在我看来，它会优化性能(因为它减少了 Angular 检测变量，我不知道是否正确)。

那么哪种代码风格更好，并且它们之间有性能差异？

Answer 1

在第一个示例中，类的每个实例都有一个tempData(它不是变量，而是属性)。在第二个示例中，one tempData 被类的所有实例重用(在本例中，它不是属性，而是常量)。

您使用哪一种取决于您是否需要每个实例 tempData 还是共享一个。

如果它是私有(private)信息并且您不需要按实例声明它，那么在模块的顶层(组件外部)声明它是绝对没问题的。它将对该模块私有(private)。

So which code style is better, and it has performance difference between them ?

两者都不是更好；它们是不同的，并且做不同的事情，因此您可以根据需要执行的操作使用其中之一。它们之间的任何性能差异都可以完全忽略不计，无需考虑。