資料模型和 Web 元件

想像一下：您可能多次聽說過 Web 元件 — 它們的魔力，它們透過 Shadow DOM 進行隔離的獨特能力。有無數的文章、無盡的網路研討會，感覺整個 Web 開發社群只專注於一件事：隔離樣式和標記。但如果我告訴你這只是冰山一角呢？ Web 元件具有更多功能，遠遠超出了 Shadow DOM？

今天，我想帶您深入了解一些經常被忽略的事情：Web 元件如何處理資料。為什麼這個話題很少受到關注？也許是因為官方規範沒有強調這種潛力。但一旦你開始探索，你就會意識到有多少東西被忽略了。

如果我開始緩慢並且變得有點乏味，我提前道歉。這是手頭任務所必需的。

為什麼 Web 元件需要資料？

Web 元件被設計為獨立的元素，可以獨立於系統的其他部分運作。這種自主性簡化了它們與應用程式不同區域的集成，並允許在不同項目之間輕鬆重複使用。這種獨立性的關鍵是封裝，它不僅隱藏了組件的外觀，還隱藏了其內部行為。反過來，這種行為與元件管理和使用資料的方式緊密相關。

例如，考慮一個設計用於執行基本算術運算的計算器元件。此元件管理諸如顯示目前結果、儲存先前結果和執行計算等行為。為了實現這一目標，它維護當前結果、先前結果等數據以及輸入值限制等設定。

Web 元件使用的資料可以描述為「本地狀態」。此本地狀態儲存組件操作的基本資訊。它可以包含臨時資料、中間計算結果或在元件內執行特定任務所需的其他值。

首先，讓我們來看一個簡單的範例，了解元件屬性如何儲存基本資料：

class SimpleCalculator extends HTMLElement {

  constructor() {
    super();
    this._data = {
      result: 0,
      previous_result: 0
    };
    …
  }
  undo(){
    this._data.result = this.data.previous_result;
  }
  add(value) {
    this._data.previous_result = this.data.result;
    this._data.result += value;
  }
  …
  displayResult() {
    this.innerHTML = `<p>The result is: ${this._data.result}</p>`;
  }
  …
}

此範例中的資料通常稱為「啞」資料模型。它的主要目的只是儲存訊息，不涉及任何複雜的邏輯。儘管很簡單，但這是向前邁出的一步，因為組件操作所需的資料儲存在內部，避免了使用全域變數。

透過將資料保存在元件內部，我們確保它與外部系統隔離，這意味著元件可以獨立運作。此外，為了強調資料的封裝，我們在屬性名稱前添加下劃線。此約定表示該屬性僅供內部使用，不應從外部存取。

那麼，使用組件內的這個「啞」模型還能實現什麼？一項有用的功能是快取。透過在元件內儲存數據，我們可以避免不必要的重新計算、冗餘網路請求或其他佔用大量資源的操作。在我們的範例中，保存先前的計算結果可以實現撤消功能，從而提高效能和使用者體驗。

厚型

「啞」資料模型是適用於所有情況的通用解決方案嗎？當使用簡單的組件時，這確實足夠了。該模型易於實現，可以很好地處理基本的資料儲存和處理任務。然而，隨著組件的邏輯變得更加複雜，維護「啞」模型變得越來越困難。當一個元件涉及多個資料操作（包括修改和分析）時，透過將該邏輯分成不同的類別來簡化結構是有意義的。其中一種方法是使用「厚」資料模型將所有與資料相關的流程與元件本身隔離。

讓我們考慮一個例子。 「厚」模型可以由儲存資料並提供修改資料的方法的單獨類別來表示。在這個模型中，我們不僅可以儲存結果和先前的值，還可以添加輔助邏輯，例如在任何計算之前自動儲存先前的結果。這大大簡化了元件，使其免於直接管理資料。

class SimpleCalculator extends HTMLElement {

  constructor() {
    super();
    this._data = {
      result: 0,
      previous_result: 0
    };
    …
  }
  undo(){
    this._data.result = this.data.previous_result;
  }
  add(value) {
    this._data.previous_result = this.data.result;
    this._data.result += value;
  }
  …
  displayResult() {
    this.innerHTML = `<p>The result is: ${this._data.result}</p>`;
  }
  …
}

透過使用厚模型，我們不僅將資料封裝在組件內，而且還向組件本身隱藏了一些行為。該組件現在不知道資料結構以及如何設定、修改和檢索資料的詳細資訊。它自己的行為被簡化了。

隨著厚模型的引入，組件承擔了控制器的角色。它管理模型，但不需要了解其內部工作原理。因此，組件不再依賴資料結構或用於處理它的方法。它需要知道的是模型的介面——它提供的一組方法。這種方法可以輕鬆地將一種模型替換為另一種模型。

此外，厚模型變得可重複使用：它現在不僅可以在一個元件中使用，也可以在其他元件中使用，前提是它們使用類似的資料。

為了獲得更大的靈活性，可以使用適配器模式。此模式確保組件和模型之間的兼容性，即使它們的介面最初不同。例如，如果一個元件需要一個具有額外邏輯的模型，我們可以建立一個適配器來新增此邏輯，同時維護公共介面。

class SimpleCalculator extends HTMLElement {

  constructor() {
    super();
    this._data = {
      result: 0,
      previous_result: 0
    };
    …
  }
  undo(){
    this._data.result = this.data.previous_result;
  }
  add(value) {
    this._data.previous_result = this.data.result;
    this._data.result += value;
  }
  …
  displayResult() {
    this.innerHTML = `<p>The result is: ${this._data.result}</p>`;
  }
  …
}

現在，為了讓另一個元件能夠使用相同的模型，應用這個適配器就足夠了。如果我們需要使用不同的模型，我們可以覆寫其建立方法或連接不同的適配器。這確保了組件保持不變，而其行為由它所連接的模型控制。

因此，將邏輯分離到厚資料模型中可以實現幾個重要目標。首先，它使元件變得更輕、更容易理解，只留下管理任務。其次，模型成為系統內獨立且可重複使用的元素。第三，使用適配器等模式可確保靈活性和可擴展性，使資料處理邏輯能夠適應不斷變化的需求。雖然這在更簡單的情況下可能顯得有些過分，但它為將來建立更複雜和穩定的架構奠定了基礎。

SSOT的分解

讓我們來探索在組織組件及其互動方面更進一步的可能性。之前，我們討論了元素的自主性如何簡化它們與應用程式不同部分的集成，並使它們適合在其他項目中重複使用。然而，組件的自主性帶來了另一個有趣的機會：它允許分解全局單一事實來源（SSOT）並將其部分轉移到單獨的組件中。這意味著我們可以使用封裝部分邏輯和資料的本機 SSOT，而不是在系統中使用一個全域 SSOT。

這個想法是，將全局事實來源拆分為本地事實來源，使我們能夠創建不僅在視覺方面自主的組件，而且還具有執行其任務所需的自己的本地邏輯。這些元件不再只是視覺元素，而是成為管理自己的資料和行為的獨立迷你係統。這顯著增加了它們與應用程式其餘部分的獨立性，從而提高了穩定性並簡化了系統的演變。

此外，當我們談論元件時，我們並不局限於按鈕、表格或圖表等小型 UI 元素。元件可以指更複雜和更大的應用程式元素，例如組合了多種不同功能的設定面板、註冊或資料輸入表單，甚至是具有多個互動式圖表的部分。每個元件都可以有自己的本地事實來源，僅管理該特定元素內的狀態和邏輯。

將 SSOT 分解為本機部分簡化了應用程式狀態的管理。例如，我們可以將狀態封裝在表單中，從而確保其獨立於應用程式的其他部分，而不是對所有表單元素使用全域事實來源。這不僅降低了開發的複雜度，而且使系統更加靈活，允許更換或修改組件，而無需更改全局邏輯。

這種架構設計方法在大型應用程式中特別有用，在這種應用程式中，全域邏輯可能會過載，而對其中一部分的變更可能會對整個系統產生級聯影響。本地事實來源透過創建獨立的責任區域來幫助最大限度地減少此類風險，從而簡化維護並提高程式碼可讀性。

結論

Web 元件儲存自己資料的能力使我們能夠將它們視為不僅僅是介面的簡單視覺元素。現在，它們可以被視為整合了資料、邏輯和表示的獨立模組。這種方法使元件成為建立應用程式架構的有效工具。它們可以封裝複雜的行為，管理其內部狀態，並在更高層級上組織與系統其他元素的交互作用。這將 Web 元件轉變為用於創建靈活且可擴展的應用程式的多功能工具。

為了進一步開發此處描述的方法並顯著簡化我自己與介面創建相關的任務，我開發了 KoiCom 庫，它基於數據管理和組件之間的數據傳輸。

KoiCom 文件
KoiCom github

最終，我希望此類解決方案能夠幫助開發人員採用更現代的介面設計方法，使應用程式更具可擴展性且更易於維護。

以上是資料模型和 Web 元件的詳細內容。更多資訊請關注PHP中文網其他相關文章！