使用 Custom Elements 和 Shadow DOM 创建有意义的 Web 组件

阅读时长 9 分钟读完

Web 组件是构成 Web 应用程序的基本单元之一，它们使得开发者能够编写可重复使用、高度可组合的代码片段。在本文中，我们将介绍如何使用 Custom Elements 和 Shadow DOM 创建 Web 组件。

Custom Elements

Custom Elements 是一项 Web 标准，它使我们能够在 Web 中定义自定义元素。这些自定义元素可以像使用内置元素一样使用，并具有类似的语义。使用自定义元素可以让我们创建组件，而不是将代码分散在整个应用程序中。

要创建自定义元素，我们需要使用 customElements.define() 方法。该方法接受两个参数：元素名称和一个类。该类必须继承自 HTMLElement，并实现自定义元素的行为。例如，下面的代码创建了一个自定义元素 x-counter，该元素可以对应一个计数器：

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

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

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

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

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

在上面的代码中，我们创建了一个名为 XCounter 的类，并在其中实现了自定义元素的行为。在 constructor() 方法中，我们初始化了一个计数器变量 count。在 connectedCallback() 方法中，我们调用了 render() 方法，以在元素被插入到文档中时渲染元素。在 render() 方法中，我们使用 innerHTML 属性设置了元素的内容，然后侦听了两个按钮的 click 事件，并且根据这些按钮的操作更新了计数器，并重新渲染元素。

现在，我们就可以像使用内置元素一样使用 x-counter 了：

Shadow DOM

Shadow DOM 使我们能够创建私有 DOM 树，它与主文档的 DOM 分离，从而使得我们的组件可以更好地封装。通常，我们将域(host)元素称为包含(shadow)根(shadow)节点的“容器”，我们可以通过将 shadow DOM 附加到元素容器中，来创建自定义元素的 Shadow DOM。这提供了安全性和可靠性，因为开发者可以更好地控制组件的样式和行为。

要创建 Shadow DOM，我们可以使用 attachShadow() 方法。该方法接受一个对象作为参数，其中 mode 属性用于设置 Shadow DOM 的模式。通常，我们使用 'open' 模式来让开发者可以访问 Shadow DOM。

下面是一个示例代码片段：

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

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

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

在上面的代码中，我们创建了一个名为 XButton 的自定义元素，它包含了一个 Shadow DOM 树。在 constructor() 方法中，我们使用 attachShadow() 方法创建了一个 Shadow DOM。在 connectedCallback() 方法中，我们使用 innerHTML 属性设置了 Shadow DOM 的内容，并为按钮应用了一些样式。

创建有意义的 Web 组件

现在我们已经知道了如何使用 Custom Elements 和 Shadow DOM 创建自定义元素和 Shadow DOM，下面让我们考虑如何创建有意义的 Web 组件。在创建 Web 组件时，我们应该遵循以下几个原则：

  • 尽量设计组件的系统性和可扩展性，组件应该是可重用的，且可以自由组合，便于我们进行快速开发。
  • 良好的可读性和可维护性，这使得组件开发的过程更具生产力，降低开发难度和时间成本。
  • 高效的性能和卓越的用户体验，这是实际应用中最为关键的部分。

下面是一些建议：

  • 基本功能。为了让组件真正的实用，我们需要尽可能实现最基本的功能，从文字的简单展示、到图片的展示和放大缩小等等都可以从基础出发。
  • 自定义属性。需要根据业务，添加特定的功能和属性，而同样的一些全局控件可能有一些个性化的部分，如 x-carousel 组件的循环和自动滚动开关、x-pagination 组件的静态样式和滚动效果、x-modal 组件的自定义蒙层样式等。
  • 响应式。考虑不同尺寸屏幕的适配，根据不同的设备屏幕自适应调整界面布局和样式。
  • 国际化。为了让组件在国际化的环境下具有良好的体验，增加多语言支持，同时添加右到左（RTL）支持等功能。
  • 动画效果。对于一些需要指引用户的界面或提示用户的交互体验，提升或弱化一些元素的可见程度或互动提示性都可以考虑到。

下面是一个图片放大缩小的示例：

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

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

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

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

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

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

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

在上述示例中，我们使用了观察者模式，当 x-image 的 src 属性改变时调用 attributeChangedCallback() 方法来更新页面上的图片。我们在组件的 Shadow DOM 中定义了一个名为 .overlay 的元素，使其在放大时具有半透明的遮罩，可以通过点击遮罩来隐藏图片。此外，我们在放大后，使用了一个 <img> 元素来展示图片，并将其置于页面的中心。

总结

在本文中，我们介绍了如何使用 Custom Elements 和 Shadow DOM 创建 Web 组件。同时，我们介绍了一些关于如何创建有意义，高效，具有卓越用户体验的 Web 组件的建议。我们希望通过本文的介绍，可以让读者掌握这项技术，并能够创建出更有质量和价值的 Web 组件。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6479ad45968c7c53b05a79e7

纠错
反馈
相关推荐
精选内容