javascript - Angular:服务与组件中的功能？

Question

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

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

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

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

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

想法？

Answer 1

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

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

实现

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