Angular：服务与组件中的功能？答案

【问题标题】：Angular: function in service vs components?Angular：服务与组件中的功能？
【发布时间】：2020-01-11 11:46:42
【问题描述】：

我们有一个 Angular 应用程序，由类似 excel 的网格组成。至少有 20 个组件，每个组件都有一个独特的网格。

每个组件都有一个save() 函数，该函数循环浏览任何添加、编辑或删除的项目并相应地保存它们。 save() 是一个很大的函数，存在于每个组件的 .ts 文件中，因为每个 save() 之间存在差异。

我想重构save()，所以我从其中一个组件开始。然后我意识到，如果我将功能集中在一个服务中，并且整个应用程序只有一个 save()，而不是 20 个（每个组件一个），这可能会更容易。但是，我也看到了这一点。 我希望其他 Angular 开发人员可以让我深入了解将功能放入服务的原因，而不是将其留在每个组件中。

优点
- 可能使开发更容易 - 也就是如果需要重构，只需要在一个地方重构。但是，情况可能并非如此：

缺点
- 可能会使开发/维护更加变得困难，或者不会变得更容易。因为，每个组件上save() 之间的差异有时相当显着，并且：
- 可能会降低save() 的性能，因为差异将需要额外的switch case 语句来确定哪个组件正在调用save()。它可能不会对性能造成明显的影响，但会受到影响。
- 这将需要数周时间来巩固和测试 - 现在一切正常，如果破坏某些东西会很可惜

想法？

【问题讨论】：

标签： javascript angular typescript service components

【解决方案1】：

为 save 功能创建服务的一种方法是拥有一个 BaseSave 类，该类将具有 protected 方法（与 private 相同，但可用于扩展它的类）具有不同保存场景共有的所有功能。 BaseSave 本身不会作为服务提供

对于每个不同的组件（保存会有所不同），您将创建一个扩展 BaseSave 的可注入服务。这些将使用 protected 方法，但也会提供自己独特的 public save() 函数实现

可以为BaseSave 类以及每个扩展实现编写单元测试

【讨论】：