在 Web 应用程序中使用 Custom Elements 进行页面构建

简介

Web 应用程序的界面构建是其中一个最基本的部分。而传统 Web 开发只有 HTML、CSS 和 JavaScript，无法做到更高级别的抽象，使得组件化复用成为一件非常困难的事情。而随着 Web Components 规范被提出，我们可以使用 Custom Elements 来实现真正的组件化复用，将页面结构、样式和行为从代码中解耦出来，形成一份通用的组件资源，再把这些组件拼接起来构成我们的 Web 页面。

Custom Elements 是 Web Components 的一部分，它提供了使用自定义元素扩展 HTML 的能力。我们可以使用它来创建一个自己的 HTML 元素，其中既包含了功能的 JavaScript 代码，也包含了样式和模板。

本文将深入探讨如何使用 Custom Elements，在 Web 应用程序中实现更高级别的抽象。

自定义元素的基础

在使用 Custom Elements 前，我们需要对它提供的基础 API 有一些了解。

customElements.define()

使用自定义元素我们需要先定义它，这可以通过调用 customElements.define() 方法来实现。

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

第一个参数是自定义元素的名称，必须由连字符分隔的 minuscule 命名。

第二个参数是具体对应的实现类。实现类必须继承自 HTMLElement 或其子类，以便自定义元素的正确呈现和行为。

constructor() 方法

定义后，就可以使用自定义元素了。当一个该自定义元素第一次出现在文档中的时候，constructor() 方法将被调用。这时我们可以在此做一些初始化的工作，比如初始化一些属性值和监听事件。

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

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

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

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

如果希望在定义时指定属性，可以使用 connectedCallback() 方法。

connectedCallback() 方法

connectedCallback() 方法被调用时，custom element 已经被加入到了文档的 DOM 中，正式对外可见了。那么我们可以在这里实现一些挂载到元素上的行为，比如渲染模板、事件监听等。

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

disconnectedCallback() 方法

disconnectedCallback() 方法在 custom element 从文档移除时被调用。此处我们可以做一些善后工作，比如清理定时器和取消监听器等。

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

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

observedAttributes() 方法

observedAttributes() 方法用于观察 custom element 上的属性变化，并在属性变化时执行某些操作。

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

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

在调用 observedAttributes() 方法时，需要使用 static 修饰符，表示该方法是静态方法。返回一个属性名称数组，用于通知浏览器哪些属性应该被观察和监听变化。

attributeChangedCallback() 方法

当被观察指定的属性值发生变化时，attributeChangedCallback() 方法将被调用。

自定义元素的应用

Custom Elements 最常见的应用场景就是实现复杂多层级的组件。我们将编写一个 example-counter 组件来演示 Custom Elements 的应用。

示例代码

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

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

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

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

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

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

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

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

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

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

说明

在上面这个示例中，我们先定义了一个 ExampleCounter 类，该类实现了自定义元素基础 API：constructor()、connectedCallback()、disconnectedCallback()、observedAttributes()、attributeChangedCallback()。它有一个 value 属性和一些操作它的方法，还包含一个简单的模板和一些事件监听器。

最后我们可以通过调用 customElements.define() 来注册 ExampleCounter 类为 example-counter 自定义元素，在应用时只需要在 DOM 中添加 example-counter 的标签，即可显示出实现组件的效果。

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

结论

Custom Elements 是 Web Components 中最为基础的部分，它可以用来扩展 HTML 元素，定义我们自己的标记，并将其行为和样式封装在一起以便在项目中复用。使用 Custom Elements 在页面构建中应用组件化思想，将代码的重用性、可读性，以及可维护性都提升到了更高的层面。它的出现让我们更好的控制界面的交互，让代码更加简单、直观、优美，提升开发效率和代码可靠性。

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

阅读全文

猜你喜欢

  • webpack 中的 babel-loader 串联通开启指南

    在前端开发中，我们经常会使用到 webpack 进行模块打包和构建。而对于使用 ES6 或者更高版本的 JavaScript 进行开发的人来说，我们会使用 Babel 将代码转换为 ES5，以兼容更多...

    2 个月前
  • ES6 及其 Promise 对象的异步编程方法

    ES6 是 ECMAScript 的一个重要版本，它引入了许多新特性，其中包括 Promise 对象。Promise 对象是 ES6 中处理异步编程的方法之一，它可以大大简化异步代码的编写和处理。

    2 个月前
  • 在 Cypress 中集成邮件验证功能测试

    前言 邮件验证是在现代网络应用程序中常见的重要操作之一，它是验证用户电子邮件和确认用户电子邮件的过程。如果您正在测试一个需要邮件验证的 Web 应用程序，您需要确保您的测试代码可以模拟这一功能。

    2 个月前
  • 在Deno中使用Google API

    介绍 Deno是一个安全的JavaScript和TypeScript运行时环境，可以用于编写Web应用程序，脚本和工具。 Google API是一组开放式API，用于创建Web，移动和桌面应用程序中的...

    2 个月前
  • Angular5：用最新 Angular 打造 SPA 应用

    介绍 Angular 是一个流行的前端框架，它已经成为许多应用程序的首选框架。而在 2017 年，Angular 推出了它的第五个主要版本。Angular5 加强了性能方面的许多方面，并增加了很多新功...

    2 个月前
  • 微信小程序在 qaixin 项目中调用 Chai

    在前端测试领域中，Chai 是一个非常有名的断言库，它支持多种语法风格，包括 BDD 和 TDD 等。同时，微信小程序也是近年来变得越来越流行的前端技术。 在本文中，我们将介绍如何在 qaixin 项...

    2 个月前
  • Enzyme 测试 React 兄弟组件通信的最佳实践

    Enzyme 是一个用于测试 React 组件的 JavaScript 库，它提供了简单易用的 API 和强大的断言功能，用于测试应用程序的行为和状态。本文将介绍如何使用 Enzyme 对 React...

    2 个月前
  • Angular 应用中 RxJS switchCase 的应用场景与实践

    前言 Angular 是一个流行的前端框架，利用它可以轻松地开发单页应用程序和移动应用程序。而且 Angular 在处理异步数据流方面十分强大，并且使用 RxJS 工具来实现这一点。

    2 个月前
  • PWA 的兼容性问题分析

    随着互联网技术的不断发展，PWA（渐进式 Web 应用程序）成为一种受欢迎的移动端解决方案。它可以让 Web 应用程序呈现类似原生应用程序的体验并提供离线访问能力，但是在实践中，我们会发现PWA存在着...

    2 个月前
  • Flexbox 学习笔记（一）

    引言 在前端开发中，页面布局是一个很重要的方面。传统的布局方式如浮动、定位等会带来一些问题，如不易控制元素间的间距、浮动高度问题等。而使用 Flexbox 布局则可以有效地解决这些问题，因此 Flex...

    2 个月前
  • 使用 Custom Elements 构建 Web 组件开发流程

    在现代 Web 应用程序中，Web 组件已成为构建现代 Web 应用程序不可或缺的重要组成部分之一。使用 Web 组件，您可以简化代码库并使开发更加可维护和可扩展。

    2 个月前
  • Vue.js 中过渡效果的实现方法及注意事项

    Vue.js 是一个流行的 JavaScript 框架，用于构建网页应用程序。Vue.js 通过指令和组件的方式提供了强大的过渡效果功能。本文将介绍 Vue.js 中过渡效果的实现方法及注意事项。

    2 个月前
  • 在 Web Components 中使用 Web Workers 的方法详解

    随着现代浏览器的出现，Web Components 正在越来越受到前端开发者的关注。Web Components 可以让我们以更加模块化、高效和可重用的方式构建 web 应用程序。

    2 个月前
  • Next.js 构建大规模应用程序最佳实践

    随着应用程序规模的增加，前端开发也面临越来越多的挑战。Next.js 是一个基于 React 的轻量级框架，提供了许多构建大规模应用程序的最佳实践。本文将深入探讨 Next.js 的技术特点和如何使用...

    2 个月前
  • Cypress 多浏览器测试实践

    在前端开发中，多浏览器测试是一个必不可少的环节，因为不同的浏览器可能会有不同的兼容性问题。Cypress 是一个流行的前端端到端测试框架，它支持多种浏览器的测试。本文将介绍使用 Cypress 进行多...

    2 个月前
  • Docker Hub: 存储与分享 Docker 镜像

    前言 在当前的软件开发中，Docker 已经成为了不可或缺的一部分。它们旨在通过创建轻量级、可重复、安全和可移植的容器来解决许多软件开发和部署的问题。而且，Docker 镜像是这一生态系统的核心组件。

    2 个月前
  • 使用 Serverless 构建 Time-based Workflow

    随着云计算的发展，Serverless 技术吸引了越来越多的开发者。Serverless 架构在减少了关注底层基础架构的工作的同时，也可以帮助开发者更快速地构建复杂的应用程序和工作流程。

    2 个月前
  • Bootstrap 框架中实现响应式表格的方法及优化

    响应式表格已经成为现代网页设计风格中不可或缺的一部分，它的功能不仅限于展示数据，还可以用于更好地呈现信息和提高用户体验。其中 Bootstrap 框架中的表格有许多优良的特性，包括响应式表格功能。

    2 个月前
  • Enzyme 和 React 中复杂条件子 UI 的测试方法

    Enzyme 和 React 中复杂条件子 UI 的测试方法 简介 在前端开发中，UI 交互是必不可少的一部分。但随着应用变得越来越复杂，测试 UI 交互的难度也在逐渐增加。

    2 个月前
  • LESS 中字符串抠取的方法详解

    前言 LESS 是一款非常实用的 CSS 预编译语言。它拥有许多强大的功能，其中包括字符串抠取的方法。通过使用这些方法，我们可以从一个字符串中取出一部分字符，并在样式中灵活地应用它们。

    2 个月前

相关推荐

    暂无文章