Custom Elements 如何实现折叠面板组件

面试官：小伙子，你的数组去重方式惊艳到我了

前言

Custom Elements 是 Web Components 中的一部分，它的作用是让我们可以自定义 HTML 标签，使我们的代码更加可读、可维护和可重用。在本文中，我们将使用 Custom Elements 来实现一个折叠面板组件，以便学习如何使用 Custom Elements 及其相关技术。

技术要点

在我们实现折叠面板组件之前，我们需要先了解一些与 Custom Elements 相关的技术要点：

Shadow DOM

Shadow DOM 翻译为「影子 DOM」，是指一种独立的 DOM 树结构，它与主文档 DOM 树结构隔离，有自己的子节点和样式。通过使用 Shadow DOM 可以实现组件的封装，防止样式和 HTML 结构的污染。在 Custom Elements 中，每一个自定义元素都可以绑定一个 Shadow DOM。

HTML Templates

HTML Templates 是定义了一个 HTML 片段的 JavaScript 物件，它与 HTML 标签的定义相似（但却不是标签），可以用来重复使用和定义可重用的 HTML 片段。在 Custom Elements 中，我们将使用 HTML Templates 来定义自定义元素的 HTML 结构和样式。

Custom Elements

Custom Elements 是一组使开发人员能够自定义 HTML 标签、标签的行为和属性的 Web API，它提供了四个生命周期回调：connectedCallback，disconnectedCallback，attributeChangedCallback 和 adoptedCallback，这些生命周期回调可以让我们与自定义元素的生命周期进行交互。

实现折叠面板组件

定义组件

首先，我们需要定义一个自定义元素，并绑定一个 Shadow DOM，我们可以使用 window.customElements API 来定义一个自定义元素，如下所示：

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

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

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

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

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

在上面的代码中，我们定义了一个名为 CollapsiblePanel 的类，并将其继承于 HTMLElement 类，这意味着我们的 CollapsiblePanel 类将具有所有 HTML 元素的特性。

在构造函数中，我们首先获取一个 HTML 模板，并使用 cloneNode 方法来克隆这个模板，然后使用 attachShadow 方法将 Shadow DOM 绑定到自定义元素上，并将模板节点添加到 Shadow DOM 中。

在我们的 CollapsiblePanel 类中，我们还需要实现四个生命周期回调：connectedCallback、disconnectedCallback、attributeChangedCallback 和 adoptedCallback。在这个例子中，我们暂时不需要用到这些生命周期回调，因此内部没有实现任何逻辑。

定义模板

在定义组件后，我们需要定义我们的折叠面板组件的 HTML 结构和样式。为了做到这一点，我们可以使用 HTML Templates。我们可以在 HTML 文件中定义一个模板，并使用 querySelector 方法获取它，如下所示：

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

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

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

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

在上面的代码中，我们定义了一个具有 id 为 collapsible-panel-template 的 HTML 模板，里面包含了折叠面板的 HTML 结构和样式。其中，我们通过 slot 来给折叠面板组件添加内容占位符。

实现折叠面板逻辑

为了使我们的折叠面板组件实际工作，我们需要添加一些 JavaScript 代码，并将组件的状态存储在自定义元素的属性中。

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

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

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

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

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

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

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

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

在上面的代码中，我们添加了一个 collapsed 属性来表示折叠面板组件是否处于折叠状态。我们还在构造函数中获取了 label 和 body 元素，并使用 addEventListener 方法在 label 元素上添加了点击事件，当用户点击时，我们将 collapsed 属性取反，并使用 classList.toggle 方法来添加或删除 expanded 类，以根据 collapsed 变量的 true/false 来控制 body 元素的高度。

Demo

最后，让我们看一下如何使用这个自定义元素：

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

在这个例子中，我们将一个段落标签包含在折叠面板组件中，并通过将组件与 Web 页面上其他元素结合来使用。

结论

在本文中，我们通过 Custom Elements 让 Web 开发人员可以自定义 HTML 标签来构建可重用的组件，并利用 Shadow DOM 和 HTML Templates 来实现对组件内部的私有 HTML 和样式的封装。同时，我们还学习了在自定义元素类中的四个生命周期回调方法：connectedCallback、disconnectedCallback、attributeChangedCallback 和 adoptedCallback，这些方法能够让我们与自定义元素的生命周期进行交互。

在开发应用程序时，使用 Custom Elements 可以使代码更加具有可读性、可维护性和可重用性。通过本文，我们学会了如何使用 Custom Elements 实现一个折叠面板组件，我们期望您能将这些技术应用到您自己的 Web 开发项目中。

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

阅读全文

猜你喜欢

  • Chai 库中 expect 和 should 使用场景对比

    Chai 是一个流行的 JavaScript 断言库，常用于前端测试环境。它有三种断言风格：expect、should 和 assert。本文主要比较 expect 和 should 使用场景的不同，...

    9 天前
  • 如何在使用 Enzyme 测试 React 组件时模拟异步数据请求？

    在使用 React 进行前端开发时，我们常常需要使用异步数据请求来获取后端数据。而在测试 React 组件时，如何模拟异步数据请求来测试组件的正确性呢？这就需要用到 Enzyme，一个用于 React...

    9 天前
  • 如何使用 React 封装 Web Components

    在前端开发中，React 是目前最热门的 JavaScript 库之一。如果你熟悉 React，并且想要将其用于封装 Web Components，则本文将提供一些指导和示例。

    9 天前
  • PM2 之进程守护

    前言 现在，很多公司都会选择使用 PM2 来进行进程管理和守护。PM2 是一个强大的进程管理工具，可以方便地管理和监控你的 Node.js 应用程序。本文将介绍 PM2 的使用方法以及进程守护的实现。

    9 天前
  • 无障碍设计与 AR 技术的结合 —— 探索未来的视觉体验

    随着 AR 技术不断发展，我们已经看到了如此多优秀的 AR 应用，它们给我们带来了不同凡响的体验，使得我们对于未来视觉体验有了更加丰富的想象。然而，即使 AR 技术可以为用户带来更加逼真的体验，但如果...

    9 天前
  • Next.js 与 Firebase 集成指南：让您的应用程序更快、更高效

    在前端开发中，我们经常需要使用各种工具和技术来保证我们的应用程序能够运行得更快、更高效。在这方面，Next.js 和 Firebase 无疑是相当值得使用的两个工具。

    9 天前
  • React Hooks 与 Redux：配合构建更好的应用

    React Hooks 和 Redux 是两个前端领域非常流行且不可缺少的技术，它们的组合使用可以大幅提高应用的可维护性、可拓展性和可读性。本文将介绍如何使用 React Hooks 和 Redux ...

    9 天前
  • 面对 Angular 常见的 10 个错误，你需要这样解决

    Angular 是一个流行的前端 JavaScript 框架，它为应用程序提供了一种以模块化方式组织代码的方法，使其更容易维护和扩展。然而，在使用 Angular 时，您可能会遇到一些常见的错误。

    9 天前
  • ES8（ES2017）中的尾调用优化与栈溢出问题的解决方案

    在过去的几年中，JavaScript语言一直是Web前端开发中的主流。随着ES8（即ES2017）的到来，JavaScript的实现又迎来了一次新的变化，其中尾调用优化和解决栈溢出的问题是开发者所关注...

    9 天前
  • Deno 中出现 cannot find module 的解决方法

    Deno 是一个现代化的 JavaScript/TypeScript 运行时环境，可以用于构建高效的 Web 应用程序和命令行工具。然而，有些情况下，当我们在 Deno 中使用模块时，可能会遇到 "c...

    9 天前
  • 如何使用 Mocha 和 Sinon 来测试 Node.js 应用

    Mocha 和 Sinon 是 Node.js 应用中常用的测试框架和库。它们可以协同工作来帮助我们编写测试代码，以验证我们的程序在不同情况下表现是否符合预期。本文将介绍如何使用 Mocha 和 Si...

    9 天前
  • 在 Node.js 中如何使用 Multer 实现文件上传？

    在 Node.js 中如何使用 Multer 实现文件上传？ Node.js 作为一种流行的服务器端技术，充分发挥了 JavaScript 的优势，受到了广泛的关注和支持。

    9 天前
  • MongoDB 中导入数据出现 “Invalid character error” 的解决方案

    在使用 MongoDB 存储大数据量时，我们常常需要通过导入数据来快速地初始化数据库。然而，当我们在导入数据时，很容易遇到 “Invalid character error” 的错误，导致导入失败。

    9 天前
  • Angular2 项目使用 TypeScript 创建时可能遇到的问题及解决方法

    Angular2 是一款流行的前端框架，它是使用 TypeScript 编写的。TypeScript 是一种超集语言，它扩展了 JavaScript，并且具有强类型和面向对象的特性。

    9 天前
  • 如何使用 Next.js 优化动态路由页面的性能

    Next.js 是一个流行的 React 框架，它提供了一种简单的方式来构建服务器渲染和静态站点应用程序。其中一个最强大的功能是动态路由，它使开发人员可以使用路由参数来构建动态页面。

    9 天前
  • webpack 编辑器 es 配置详解及相关插件推荐

    简介 Webpack 是现代 JavaScript 开发过程中必不可少的一个工具，由于其强大的打包能力、模块化的支持，越来越多的开发者开始将 Webpack 用于前端项目开发中。

    9 天前
  • 怎样用 Express.js 做一个酷炫的 web 应用

    简介 Express.js 是 Node.js 中最受欢迎的 web 框架之一，它提供了一些特性和强大的 API，可以帮助开发者快速构建可扩展的 web 应用程序。

    9 天前
  • 如何处理 React 中的异步请求？

    在 React 中，我们常常需要从后端获取数据并在页面中渲染。这就需要进行异步请求。而正确地处理异步请求是很重要的，因为它涉及到用户体验、性能和代码的可维护性。在本篇文章中，我将分享如何在 React...

    9 天前
  • 使用 Custom Elements 在网页中实现无限滚动效果

    在现代 Web 开发中，实现无限滚动效果是一个常见的需求。它可以帮助我们展示大量数据，同时减少用户的操作次数，提升用户体验。本文介绍了如何使用 Custom Elements 在网页中实现无限滚动效果...

    9 天前
  • RESTful API 如何处理异步请求

    前言 RESTful API 是一种广泛使用的 Web API 设计风格，它通过 CRUD（增删改查）操作对资源进行管理。在实际应用中，RESTful API 经常需要处理异步请求，这种情况下，我们需...

    9 天前

相关推荐

    暂无文章