【问题标题】：Is it bad practice to import all models in all components?在所有组件中导入所有模型是不好的做法吗？
【发布时间】：2018-11-16 03:44:47
【问题描述】：

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

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

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

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

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

【问题讨论】：

【解决方案1】：

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

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

第一步

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

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

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

第 2 步

现在，如果您将所有这些接口都放在一个文件夹中（例如名为 model），您可以在您的 model 文件夹中创建一个 index.ts 文件。该文件的内容将类似于：

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

请注意，我们只是导出模型接口名称，而不是 exporting (*)。

最后，当一个组件需要使用一个模型时（例如Bird），可以有两种方式importing Bird。

import { Bird } from './models';

这样做将加载由index.ts 文件在models 文件夹中导出的所有内容，然后将导入Bird。

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

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

现在，这更好，因为在这种情况下，它不会加载由 models 文件夹中的 index.ts 文件导出的所有内容，它只会加载由 bird.model 导出的所有内容，然后将导入 @ 987654344@.

希望这能帮助您更好地理解这一切是如何运作的。

这里有一个Sample StackBlitz 供您参考。

【讨论】：

【解决方案2】：

对于你的问题这样做有什么好处/坏处？

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

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

然而，还有YAGNI 的基本编码原则，这似乎就是您要问的。为什么要将所有这些模型类导入到每个只需要一两个的组件中？

那么有优势吗？是的。

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

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

【讨论】：