数据模型和 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中文网其他相关文章！