Angular/Typescript 模型——如何组织

Question

我正在创建这个小型 Angular 应用程序，以便创建一个包含节点和链接的图形，这些节点和链接显示在 SVG 元素中，并且我可以将其保存在数据库中并加载回来。

我创建了 3 个主要类模型来表示我的图形对象:图、节点、链接

为了构建我的图表，我可以使用不同类型的节点，并在节点类中使用字符串属性“type”来识别它们。可以是“圆形”、“方形”、“矩形”……等等因此，我可以根据其类型属性在我的 Angular NodeComponent 中显示节点。

在我的环境中，不同类型的节点列在配置对象中。每个节点的图形特征也列在配置中(颜色，大小，边缘或射线或L ...等)

现在我的问题来了。我要为每个节点执行多项检查。这些检查的逻辑取决于节点的类型。例如，如果我计算节点的面积，公式将因类型而异。

我现在所做的是在服务中创建一个函数。它在计算之前检查节点类型。

calculateArea(node: Node) {

switch (node.type) {
      case 'circle': {
        ...
      }
      case 'square': {
       ...
      }
      case 'rectangle': {
        ...
      }
      default: {
        break;
      }
    }
  }

我有几个这样的功能。其中一些编辑我的对象的属性，其他的只用于在 HTML 中显示信息，不应该在我的对象中写入任何数据(将保存在数据库中)

问题是，当我想添加一种新类型的节点时，我需要去编辑我的代码中的很多东西:- 列出不同类型节点的配置- 具有我的新节点类型的图形特征的配置- 每个服务中的不同功能，添加案例代码等等……

这似乎不是很理想。

有没有一种方法可以组织和构建代码，以便我可以更轻松地创建新型节点。

我考虑过创建不同的类 Circle、Square、Rectangle...等等...具有静态属性(颜色、光线、边缘...)并且可能让它们实现一个接口(interface)(使用多种方法:calculateArea. ..).我还考虑过让它们扩展 Node 类。

但是我会在我的不同对象和我的数据库中重复图形属性(当前在我的配置中)，我将不得不实现所有方法，尽管其中一些不需要实现(我们可以使用默认方法)

组织代码的最佳解决方案是什么？这个想法是......如果我想创建一个新类型的节点“Star”，我会创建一个新的 ts 文件(带有一个类)，其中包含所有信息，我会在我的代码中的某个地方引用这个文件(所以我的应用程序知道存在这种新型节点)

在某些时候，最终目标也是在用户决定向图中添加一个节点时延迟加载那些不同类型的节点(具有图形特征、代码块和功能......)。

如果不清楚，请告诉我。另外，我希望我的问题不是太微不足道。谢谢

Answer 1

即使您不创建单独的不同类，您仍然可以在 Node 类上定义 calculateArea，这样您的服务就不必负责计算任何给定节点上的这些属性，并且因此，只要您支持的节点集发生变化，您的服务就无需更改。

这并不一定意味着 Node 是一个抽象基类，不同的类 Circle、Square 和 Rectangle 从中派生出来。即使您只是根据 Node 中的 this.type 进行切换，出于代码组织的考虑，这也可能更好。然后，您可以选择读取 Node 内部的配置文件或 Node 工厂(静态方法或根据需要创建 Node 实例的单独类)。

但是，考虑到您的问题，我认为圆形、方形和矩形需要不同的代码:它们计算面积的方式不同。因此，我认为很难编写一个配置文件来代表您的节点的所有变化方式。相反，我认为您应该坚持为每个节点类型创建单独的具体类的想法，因为无论如何您都需要更改代码以支持新的节点类型。对于不需要改变代码的类似问题——例如，您支持基于配置的汽车品牌、模型和颜色的驾驶游戏——您绝对可以在模型对象中放置自包含逻辑，而无需创建多态子类。