基于 Web Components 和 shadow DOM 实现复杂下拉框组件

随着前端交互需求的不断增加，下拉框作为常见的UI组件之一，在多种场景中得到了广泛的应用。但是，由于业务复杂度的提升，部分场景需要实现一些特殊的下拉框组件，比如多级联动的下拉框、下拉框的宽度高度可变化、下拉框需要自定义样式等。这些特殊的需求，往往需要我们自己定制组件，而Web Components 和 shadow DOM 的出现，使得我们更加容易实现复杂的UI组件和更好的进行组件重用。

Web Components 和 shadow DOM

Web Components 是一种标准化的组件实现方式，它可以形成一套独立的自定义组件库，每个组件自包含其样式和代码，完全独立维护，不与其他组件产生影响。Web Components 内置了三个标准技术：

  1. Custom Elements —— 自定义元素：以前，我们只能使用内置元素来构建 UI，现在，我们可以通过定义自定义元素来创建新的 UI 组件。
  2. Shadow DOM —— 影子 DOM：在 Web Components 内部，我们可以使用 Shadow DOM 构建一些样式和行为的封装，Shadow DOM 会将这些封装性的内容与页面其他内容分离。
  3. HTML Templates —— HTML 模板：我们可以使用 HTML 模板作为自定义元素的内容，这在设计 Web Components 组件时非常有用。

以上三个技术化解了原先组件重用，维护和生命周期的繁琐性，使得 Web Components 实现更加便捷。

实现一个复杂下拉框组件

Web Components 和 shadow DOM 的出现，为实现复杂下拉框组件提供了更好的方法，下面我们针对特殊需求，实现一个复杂下拉框组件。

我们需要达到两个目的：

  1. 多级联动的下拉框；
  2. 下拉框的宽度高度可变化；

步骤一：创建自定义元素

我们首先创建一个继承自 HTMLElement 的下拉框类 SelectBox，这个类负责在页面中创建自定义元素 ，使用交互组件的时候：

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

是我们需要的唯一代码。

步骤二：添加 Shadow DOM

我们在自定义元素内部，添加 Shadow DOM，同时，向 Shadow DOM 中添加 HTML 模板和样式，如下：

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

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

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

这里我们简单定义下组件的结构：

  1. .select-container 为下拉框的外层容器，使用 flex 实现布局；
  2. .selected-value 为展示当前选中选项的容器；
  3. .chevron 为下拉箭头，用于点击后展开下拉菜单；
  4. .dropdown-menu 为下拉菜单容器，初始状态下隐藏；
  5. .dropdown-menu__wrapper 为下拉菜单项容器。

步骤三：添加交互逻辑

这里我们在自定义元素内部添加下发交互逻辑，包括初始化、渲染选项、下拉框样式控制等操作，如下：

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

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

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

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

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

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

这里关键点主要有：

  1. 使用 renderOptions 方法，渲染下拉菜单项；
  2. 使用 setAttribute、removeAttribute 开关下拉菜单状态；
  3. 通过判断事件源 target 的 type，找到对应的点击处理内容。

一些细节内容，可以看下完整组件代码。

示例代码

下面是组件的完整代码：

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

总结

本文通过介绍 Web Components 和 shadow DOM，实现了一个复杂下拉框组件的示例。Web Components 和 shadow DOM 的出现，为实现组件复用，组件设计，样式隔离和更好的SEO 提供了便利，有着很多实际应用场景，比如在 DashBoard、只含前端发布物的工程中甚至可以成为统一的组件设计标准。

如果你有更多 Web Components 的设想或实际项目中的应用，原作者非常期待你能够将你的应用与经验分享给我们。

来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/64f7c644f6b2d6eab3ff675e

阅读全文

猜你喜欢

  • 使用 Flask 开发 RESTful API 实践经验分享

    前言 在如今的 Web 应用开发中，RESTful API 已成为了一个非常流行且必备的组件。而对于前端开发者来说，通过使用 RESTful API 接口，可以实现前端与后端的分离，实现更轻盈更可维护...

    1 年前
  • Mocha + sinon-chai 如何测试 mock 生命周期事件

    Mocha + sinon-chai 如何测试 mock 生命周期事件 在前端开发中，我们经常会使用到各种测试框架和库，以保证代码的可靠性和稳定性。Mocha 是一款流行的 JavaScript 测试...

    1 年前
  • Koa.js 如何进行 AOP 编程

    AOP (Aspect-Oriented Programming) 编程是一种编程思想，它将代码按照功能进行分割，将全局性的功能抽象成一种横向的、可复用的代码组件，这些组件可以在任何地方调用。

    1 年前
  • ES2020 新特性：可选链操作符

    JavaScript 是一门十分灵活的语言，但在处理对象属性的时候可能会遇到一些问题。经常会发生的情况是：我们希望访问一个对象的属性，但是这个对象可能不存在或者这个属性可能不存在。

    1 年前
  • Angular 中使用 RxJS 实现响应式表单

    在 Angular 中，表单是非常重要的一部分。使用响应式表单，可以方便地处理表单输入和验证，并且能够提供更好的用户体验。而 RxJS 则是 Angular 中一个非常重要和流行的库，用于处理异步数据...

    1 年前
  • PM2 部署后出现远程连接不上的错误该怎么办

    前言 随着互联网的普及和发展，前端技术日新月异，越来越多的网站在使用 Node.js 框架进行开发。而 PM2 是 Node.js 的一个进程管理工具，被广泛应用于 Node.js 应用的线上部署，它...

    1 年前
  • 基于 Vue.js 和 Vuex 实现可维护扩展的 SPA 权限系统

    在现代 Web 开发中，单页面应用 (SPA) 在用户体验、交互响应速度和开发效率等方面具有很大优势。但是在实现复杂的权限系统时，可能会遇到一些挑战。本文将介绍如何基于 Vue.js 和 Vuex 实...

    1 年前
  • Serverless 架构遇到的坑与优化方案分享

    随着云计算技术的不断发展，Serverless 架构作为一种新型的云计算模型，具有无服务器化、按需计费和可扩展等特性，已经成为了前端开发的新趋势。但是，Serverless 架构也面临着一些挑战，尤其...

    1 年前
  • ECMAScript 2019 中的 Object.assign 与 Object.setPrototypeOf 方法的使用和优化

    ECMAScript 2019（简称 ES2019）引入了一些有用的新特性，其中包括 Object.assign 和 Object.setPrototypeOf 方法。

    1 年前
  • 解析 Kubernetes 中的 Service 映射机制

    在 Kubernetes 中，Service 是一种用于抽象和稳定 Pod 实例集的方式。它提供了一些便利，例如可以创建一个虚拟 IP 地址、负载均衡流量以及将请求转发给正确的 Pod。

    1 年前
  • 如何使用 Server-Sent Events 发送消息为 Javascript Loop 提供反馈

    在前端开发中，经常需要实时获取远端信息并实时更新页面，例如用户评论、即时聊天消息等，传统的轮询方式会给服务器带来很大的负担，而更好的解决方案是使用 Server-Sent Events。

    1 年前
  • TypeScript 使用 Webpack 和 Babel 构建工具链

    前言 在现代前端开发中，使用工具链来帮助管理和打包前端代码已经成为了标配。TypeScript 作为一种强类型的 JavaScript 趋势越来越明显，同时在工程师开发经验中已经成为了重要的一部分。

    1 年前
  • 如何在 JavaScript 中实现 Promise 的重试功能？

    在前端开发中，Promise 是一种常用的异步编程模式。然而，有时候 Promise 执行失败，我们希望可以进行重试，直到成功为止。本文介绍如何在 JavaScript 中实现 Promise 的重试...

    1 年前
  • MongoDB Compass 客户端使用指南

    MongoDB Compass 是一个强大的工具，用于管理和可视化 MongoDB 数据库。无论您是新手还是经验丰富的开发人员，了解 MongoDB Compass 的使用都是必备的技能。

    1 年前
  • Mongoose 中使用 aggregate 函数实现数据分组统计

    在实际的 web 开发过程中，我们常常需要对数据库中的数据进行分组统计。Mongoose 是一个 Node.js 的 MongoDB 数据库对象建模工具，它提供了很好的支持，使我们可以更加方便地操作 ...

    1 年前
  • 在 ECMAScript 2016 中使用 Array.prototype.reduce() 方法合并数组

    在 ECMAScript 2016 中使用 Array.prototype.reduce() 方法合并数组 Array.prototype.reduce() 方法在 JavaScript 中是一个非常...

    1 年前
  • 如何使用 TypeScript 配合 Web Components 进行项目开发

    Web Components 是一种新兴的前端技术，它能够在 Web 中创建可复用的自定义元素和组件。而 TypeScript 是一种强类型的 JavaScript 超集，在大型项目中提供了更好的类型...

    1 年前
  • Accelerate 库深度优化（一）：高性能线性代数库概览

    在前端开发中，我们经常需要对大量数据进行线性代数运算，如矩阵乘法、向量加减等。这些运算需要高效的算法和数据结构来实现，以便在大数据量和高并发场景下提供良好的性能。而在苹果的 macOS 和 iOS 平...

    1 年前
  • Flexbox 下三栏布局的优秀实现方法分享

    Flexbox 是一种很优秀的布局模式，它能够让我们更加方便地进行页面布局和排版。而在实际的开发中，我们经常会遇到需要实现三栏布局的需求。本文将为大家介绍基于 Flexbox 的三栏布局实现方法，分别...

    1 年前
  • LESS CSS 中如何实现网页打印效果？

    LESS CSS 中如何实现网页打印效果？ 随着移动互联网的普及，网站在许多场合下需要提供打印功能。例如，企业宣传资料、合同文件等需要在实体纸张上进行传递和邮寄。如何实现网页打印效果呢？我们可以利用 ...

    1 年前

相关推荐

    暂无文章