在 Custom Elements 中利用 Template 实现复杂 UI 组件

在 Custom Elements 中利用 Template 实现复杂 UI 组件

Web 开发中，构建复杂的用户界面经常需要使用多种 UI 组件。在传统的开发方式中，我们通常使用库或框架提供的组件来快速构建 UI 界面。然而，我们可能需要一些特殊的组件，而这些组件并不被库或框架提供，此时可以使用 Custom Elements 来构建自定义的 UI 组件。

Custom Elements 是 Web Component 的一部分，它可以让开发者自定义 HTML 标签，并创建具有自定义行为的元素。它提供了一种轻量级方式来创建组件，这些组件可复用，可维护，并且对开发者来说易于理解和调试。

当我们开始使用 Custom Elements 构建复杂的 UI 组件时，模板功能变得至关重要。它使我们可以深入组件并创建复杂的子组件，并在组件中共享代码。继续阅读本文，学习如何在 Custom Elements 中利用 Template 实现复杂 UI 组件。

理解 Web Components

Web Components 是一种在 Web 开发中用于构建复杂 UI 组件的标准。它由三个主要技术组成：

  • Custom Elements：这是一种创建自定义元素的技术。Custom Elements 允许开发者将自定义行为添加到元素中。
  • Shadow DOM：Shadow DOM 使得在页面上创建隔离的 DOM 树变得更加容易。它可以使得开发者将组件的样式和行为隐藏在组件内部。
  • HTML Templates：HTML Templates 是一种创建可重用 HTML 块的技术。它可以让开发者编写一次，多次使用。

当我们结合以上三种技术时，可以构建出一个自包含的、无需依赖第三方库的组件。

创建自定义元素

首先，我们需要创建自己的 Custom Element。我们可以使用 JavaScript 中的类来定义一个自定义元素。下面是一个自定义元素的基本模板：

----- --------- ------- ----------- -
  ------------- -
    -- ----------------- ------- --
    --------

    -- ---------------
  -
-

-- -- ---------------------------- ---------
------------------------------------------ -----------

这里我们定义了一个名为 MyElement 的类，并继承了 HTMLElement。然后我们通过调用 window.customElements.define() 方法来定义一个新的 HTML 标签 my-element。现在，我们可以在 HTML 页面中使用 <my-element> 标签了。让我们稍微修改一下上述代码，来添加一些属性和方法：

----- --------- ------- ----------- -
  ------------- -
    --------

    -- ------- ------ ---
    ----- ---------- - ------------------- ----- ------ ---
    ----- -------- - ---------------------------------------
    ----- -------- - ---------------------------------
    ---------------------------------

    -- - ------ --- --------
    ------------ - -----------------------------------------
    ----------- - ----------------------------------------

    -- -------
    -------------------------------------- --------------------------
  -

  -- ----
  ---------- -
    --- ----- - ----------------------------------
    ----------------------- - --------
  -

  -- ----
  ------ --- -------------------- -
    ------ ----------
  -

  --- ------- -
    ------ ---------------------------
  -

  --- ------------ -
    -------------------------- -------
  -

  -- -------
  ------------------------------ --------- --------- -
    -- ----- --- -------- -
      -- -----
    -
  -
-

------------------------------------------ -----------

这里，我们添加了一个 Shadow DOM，它允许我们在组件内部隐藏 HTML 和 CSS。然后我们在 Shadow DOM 中寻找需要使用的元素，监听元素事件，并在属性被更改时做一些事情。

我们还为组件添加了一个 title 属性，并定义了一个 observedAttributes() 静态方法，用于监听属性更改。

HTML Templates

HTML Templates 可以让我们编写可重用的 HTML。我们可以在 HTML 页面中添加一个 <template> 元素，并在其中编写 HTML。这个 HTML 不会在页面中立即展示，而是可以在需要时克隆到组件中。例如，下面是一个简单的、可重用的 HTML 模板：

--------- -----------------
  -------
    ------- -
      ---------- -----
      ----------------- -----------
      ------ ------
      -------- -----
      ------- --------
    -
  --------
  -----
    ---
      --- ------- ----- --- ----- ----------------------
    ----
    ------- ----------------------- --------------
  ------
-----------

在上述代码中，我们使用了一个 <template> 元素，并给它一个特定的 ID my-template。模板中定义的 CSS 和 HTML 可以在组件中重复使用。现在，我们可以在组件的构造函数中克隆这个模板：

----- ---------- - ------------------- ----- ------ ---
----- -------- - ---------------------------------------
----- -------- - ---------------------------------
---------------------------------

这里，我们使用 querySelector('#my-template') 来从文档中查找模板，然后使用 content.cloneNode() 复制模板内容。最后，我们将复制的内容附加到当前自定义元素的 Shadow DOM 中。

实现复杂 UI 组件

通过使用 Custom Elements 和 HTML Templates，我们可以构建出更复杂的 UI 组件。例如，我们可以在模板中包含其它模板或者在模板和自定义元素之间使用嵌套。下面是一个简单的、可重用的 my-table 自定义元素：

--------- --------------
  -------
    -------
      ----
        -------------
        ------------
      -----
    --------
    -------
      ----------
        ----
          --------- ------------------------
          --------- -----------------------
        -----
      -----------
    --------
  --------
-----------

--------- --------------
  ----
    --------- ------------------------
    --------- -----------------------
  -----
-----------

----------
  --------- --------------
    ----- -----------------------
    ----- --------------------
  -----------
  --------- --------------
    ----- -----------------------
    ----- --------------------
  -----------
-----------

在上述代码中，我们定义了一个 my-table 自定义元素，并使用两个嵌套的 HTML 模板来定义表格头和表格行。然后我们通过使用 <template is="user-row"> 元素，来添加新行到表格中。每行都是一个另一个嵌套的模板，它可以被 <template> 使用。结果是一个高度可重用、可维护的组件，可以在项目中的其它地方重复使用。

结论

Custom Elements 和 HTML Templates 使得在 Web 开发中构建可维护、可重用、可测试和可扩展的 UI 组件变得更加简单。当你需要使用一些特殊的组件时，通过使用这些技术，你可以构建自己的组件，让开发变得更加容易。此外，你可以使用 webpack、gulp 或者其它打包和构建工具来打包和部署这些组件。现在，你可以开始使用 Custom Elements 和 HTML Templates 来构建复杂的 UI 组件了！

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/673577ac0bc820c5824e9a66

阅读全文

精选内容

相关推荐

    暂无