Angular/Typescript 模型 - 如何組織

我正在創建這個小型的 Angular 應用，以便創建一個圖，其中有節點和連接，這些節點和連接會顯示在 SVG 元素中，並且我可以將其保存到資料庫中並重新加載。

我已經建立了三個主要的類別模型來表示我的圖表中的物件：Graph、Node、Link

為了建立我的圖表，我可以使用不同類型的節點，並且我在節點類別中使用一個字串屬性「type」來識別它們。它可以是「circle」、「square」、「rectangle」……等等。多虧了這個，我可以根據節點的 type 屬性在我的 Angular NodeComponent 中顯示節點。

在我的環境中，不同類型的節點列在一個配置對象中。每個節點的圖形特徵也列在配置中（顏色、大小、邊緣或射線或 L 等等）。

現在這是我的問題。我需要對每個節點執行多個檢查。而這些檢查的邏輯取決於節點的類型。例如，如果我計算節點的面積，公式將根據類型而不同。

我現在所做的是在一個服務中創建一個函數。它在計算之前會檢查節點類型。

calculateArea(node: Node) {

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

我有好幾個這樣的函數。其中一些會編輯我的物件的屬性，其他的只是用來在 HTML 中顯示資訊，不應該對我的物件寫入任何資料（那些資料將會被儲存在資料庫中）

事情是這樣的，當我想要添加一種類型的新節點時，我需要去編輯我代碼中的很多內容：\n- 列出不同節點類型的配置\n- 包含我新節點類型圖形特徵的配置\n- 每個服務中的不同函數，添加一個帶代碼的情況等等……

這似乎不是很理想。

有沒有辦法組織和構造程式碼，以便我可以更容易地創建一種新的節點類型。

我曾經想過創建不同的類別，例如 Circle、Square、Rectangle... 依此類推…，並給它們設置靜態屬性（顏色、半徑、邊長…），也可能讓它們實現一個介面（擁有多個方法：calculateArea…）。我也想過讓它們繼承 Node 類別。

但那樣一來，我在不同的物件和資料庫中，會重複我目前在設定中擁有的圖形屬性，而且我還得實作所有的方法，儘管其中一些方法不需要被實作（我們可以使用預設方法）

組織我的程式碼的最佳解決方案是什麼？想法是……如果我想創建一種類型的新節點「Star」，我只需創建一個新的 ts 文件（包含一個類）來存放所有資訊，然後在我的程式碼中的某個地方引用這個文件（這樣我的應用就知道這種類型的新節點存在）

最終目標也是，在某個時刻，當使用者決定在圖中添加一個節點時，懶加載那些不同類型的節點（具有圖形特徵、功能代碼塊……）。

請告訴我這是否不清楚。另外，我希望我的問題不是太瑣碎。謝謝

答案＃1

即使你沒有建立獨立的不同類別，你仍然可以在你的 Node 類別上定義 calculateArea，這樣你的服務就不必負責計算任何給定 Node 的這些屬性，而且當你支持的節點集合變化時，你的服務也不需要更改。

這並不一定意味着 Node 是一個抽象基類，Circle、Square 和 Rectangle 這些不同的類是從它派生的。即使你只是基於 this.type 在你的 Node 中進行切換，出於代碼組織的考量，這可能會更好。然後你有一個選擇，可以在 Node 內部或 Node 工廠（一個靜態方法或單獨的類，按需創建 Node 實例）中讀取配置文件。

不過，想一想你的問題，我覺得 Circle、Square 和 Rectangle 需要 不同的程式碼 是合理的：它們計算面積的方式並不相同。正因如此，我認為寫一個單一的配置檔來表示所有節點可能的變化方式會很困難。相反地，我認為你應該採用將每種類型的節點建立成獨立具體類別的方式，因為你無論如何都需要修改程式碼來支援新的節點類型。對於那些不需要程式碼變化的相似問題——例如一個駕駛遊戲，你支援基於配置的汽車品牌、型號和顏色——你完全可以將自包含的邏輯放在模型對象中，而無需創建多態子類別。