步骤1

Question

在我的工作中，所有旧代码都将每个模型导入到使用模型的所有组件中。他们将执行以下操作，而不是仅导入组件所需的模型：

import * as models from '../../view-models/models'
.......
let parrot: models.Bird;

在models.ts中，它们只是汇总所有模型导出：

export * from './Bird'
export * from './Mammal'
export * from './Amphibian'
.......

在我看来，您应该只导入将在组件中使用的模型，所以我想知道这样做是否有任何优点/缺点？

Answer 1

对于您的问题以这种方式进行操作是否有优点/缺点？

似乎很容易知道所有模型都在同一个文件中。但是，再说一次，简单的快捷方式通常不是好习惯。

有一个称为Barreling的Angular模式，可以帮助轻松地组织组件和模块。许多主要的第三方都以这种方式组织代码，以便其他人更轻松地导入他们需要的内容。

但是，YAGNI的基本编码原理似乎也正是您要问的。为什么要将所有这些模型类导入到每个只需要一个或两个组件的组件中？

那么有优势吗？是的。

这是标准做法吗？？不，不是真的。

好吗？您和您的团队应该决定。

Answer 2

我真的不认为这是一个好习惯。始终建议仅导入将在组件中使用的模块。

从您的例子来看，它显然是在各处导入不必要的模块。

一种更好的方法是从模型文件本身进行命名导出。这样就不会从文件中导出所有内容。

所以bird.model.ts可能看起来像这样：

export interface Bird {
  birdId: number;
  birdName: string;
}

步骤2

现在，如果您在一个文件夹（例如，名为model）中拥有所有这些接口，则可以在index.ts文件夹中创建一个model文件。该文件的内容如下所示：

export { Bird } from './bird.model'
export { Mammal } from './mammal.model'
export { Ambhibian } from './amphibian.model'

请注意，我们只是导出模型接口名称而不是export（*）。

最后，当组件需要使用模型（例如，Bird）时，可能有两种方式import来Bird。

import { Bird } from './models';

执行此操作将加载index.ts文件在models文件夹中导出的所有内容，然后导入Bird。

但是如果我们只想要Bird，我们可以更深入一点，然后从Bird导入./model/bird.model，看起来像这样：

import { Bird } from './models/bird.model';

现在，这样做更好，因为在这种情况下，它不会加载index.ts文件夹中models文件导出的所有内容，而只会加载{{1}导出的任何内容}，然后导入bird.model。

希望可以帮助您更好地了解其工作原理。