Custom Elements 如何正确地使用属性和自定义事件

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

前言

Web Components 是一种新的技术，它可以帮助我们创建可重用的定制化的 HTML 元素。在 Web Components 中，Custom Elements 就是其中的一种。Custom Elements 使我们可以创建自己的 HTML 元素，并为这些元素定义自己的属性和方法。其中，属性和事件都是 Custom Elements 中非常重要的部分，本文主要讲解 Custom Elements 中如何正确地使用属性和自定义事件。

属性

在 Custom Elements 中，属性就是一个元素的状态，它们的值可以从外部赋值，也可以在元素内部进行修改。在 Custom Elements 中，属性通常由用户自定义，并在元素的定义中声明。下面是一个简单的示例，演示了如何在 Custom Elements 中定义属性：

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

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

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

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

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

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

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

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

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

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

在上面的示例中，定义了一个 Custom Element，它有一个属性 content，该属性控制元素显示的内容。在元素的定义中，声明了这个属性，并在属性的 get 和 set 方法中定义了其行为。

它也声明了 observedAttributes 方法，该方法返回一个数组，包含 Custom Element 所观察的所有属性。在 attributeChangedCallback 方法中，当 Custom Element 中观察到属性的变化时，就会调用此方法，从而更新元素的状态。

自定义事件

在 Custom Elements 中，自定义事件是元素供外界与其进行交互的重要手段之一。通过自定义事件，我们可以让元素触发、监听和响应事件，从而实现与其他组件间的交互。下面是一个示例，它定义了一个 Custom Element，并定义了一个自定义事件 change。

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

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

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

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

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

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

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

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

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

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

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

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

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

在上面的示例中，定义了一个 Custom Element，并在其中定义了自定义事件 change。在元素的代码中，我们定义了事件的触发方式 _onClick，并在 connectedCallback 中将其添加到元素上。当点击元素时，会触发自定义事件 change，从而向外界发送消息。

总结

在本文中，我们通过示例介绍了 Custom Elements 的两个重要组成部分：属性和自定义事件。通过正确地使用属性和自定义事件，我们可以很方便地实现自定义的 HTML 元素，并且与其他组件进行交互。同时，Custom Elements 为我们提供了更加灵活易用、可重用的解决方案，让我们的前端开发变得更加便捷高效。

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

阅读全文

猜你喜欢

  • Angular 中 RxJS 的使用和常见问题解决方案

    在现代前端开发中，数据流和状态管理是非常重要的一个部分。RxJS 是一个流式编程库，可用于处理异步数据流操作。在 Angular 中，RxJS 成为了其主要的异步处理技术。

    1 年前
  • 使用 Jest 测试 React 或 Vue 应用的最佳实践

    前言 在开发前端应用的过程中，我们不可避免地需要面临各种各样的问题，而其中一个重要的问题就是如何测试我们的应用。特别是在大型项目和团队中，测试的重要性不言而喻。Jest 是一种流行的 JavaScri...

    1 年前
  • 如何在 Enzyme 中测试 React 组件与 Redux 的结合使用

    React 是一种流行的前端框架，它被广泛使用于 Web 应用程序的开发中。随着应用程序越来越复杂，使用 Redux 管理应用程序的状态已经成为标准做法。在进行 React 和 Redux 开发的过程...

    1 年前
  • 详解 Sass 编译后源码问题

    在前端开发过程中，CSS 是必不可少的一部分。但是 CSS 的书写方式相对繁琐，难以维护。为了解决这个问题，Sass（Syntactic Awesome StyleSheets）应运而生。

    1 年前
  • ES9 Async 迭代器和生成器详解

    前言 ES9 在异步方面的改进中，最主要的特性就是引入了 Async 迭代器和生成器。 对于每一个 JavaScript 程序员来说，理解迭代器和生成器是非常重要的，因为它们是使用 JavaScrip...

    1 年前
  • Node.js 中如何使用 WebSocket 进行实时通讯

    WebSocket 是一种在网页浏览器和服务器之间进行实时通讯的技术。与传统的 HTTP 请求不同，WebSocket 允许服务器向客户端发送任意数据，而不需要客户端发送请求。

    1 年前
  • Mongoose 中如何使用 $set 和 $addToSet 修改数组

    Mongoose 是一个 Node.js 的 MongoDB 驱动程序和对象模型工具，它为开发者们提供了一些非常便利的 API，可以轻松地对 MongoDB 操作进行抽象和接口封装。

    1 年前
  • 利用 Socket.io 和 Node.js 实现前端实时应用程序

    前言 随着互联网的不断发展，人们对于实时交互的需求也越来越高，对于前端工程师来说需要处理的问题也不再局限于渲染页面和获取数据，而是需要实现更加复杂的实时应用程序。本文将介绍如何利用 Socket.io...

    1 年前
  • 解决 Tailwind CSS 使用步骤中的一些问题

    什么是 Tailwind CSS Tailwind CSS 是一种用于构建现代化网页界面的低级 CSS 框架。它提供了一组命名用法，可以大大缩减开发人员编写 CSS 的时间和工作量。

    1 年前
  • 在 Node.js 和 Express.js 中使用 EJS 模板引擎

    EJS 是一种简单的 JavaScript 模板引擎，用于将数据呈现为 HTML 页面。它易于使用、可扩展，并且与 Node.js 和 Express.js 兼容。

    1 年前
  • 优化 Headless CMS 性能的几种方法

    最近，越来越多的开发者开始使用 Headless CMS 作为他们的站点内容管理器。这种 CMS 在实现多渠道发布的同时，也可以增强站点性能，但如果不注意优化，可能会导致站点性能下降。

    1 年前
  • 使用 ECMAScript 2017 (ES8) 中的 padStart() 和 padEnd() 方法来填充字符串

    在前端开发中，字符串处理是一个必不可少的环节。ECMAScript 2017 (ES8) 中新增了 padStart() 和 padEnd() 方法，它们主要用于填充字符串。

    1 年前
  • Redis 持久化机制及如何避免数据丢失

    Redis 是一个非常流行的高性能 Key-Value 存储数据库，但在数据持久化方面，Redis 有着自己特殊的需求和难点。本文将讨论 Redis 的两种持久化机制以及如何应用它们来避免数据丢失。

    1 年前
  • MongoDB 教程：如何使用 MongoDB Atlas

    介绍 MongoDB是一个基于NoSQL的开源文档型数据库。它具有高度可扩展性、性能优良和灵活的数据模型，支持多种语言和平台。在前端开发中，我们常常会使用MongoDB存储和操作数据。

    1 年前
  • PWA 打开缓慢的问题分析与解决

    前言 PWA（Progressive Web App，渐进式Web应用程序）是一种结合了Web应用程序和原生应用程序的技术，能够将Web应用程序更好地集成到移动设备中，提供更高质量和更原生的用户体验。

    1 年前
  • Babel-runtime 的作用及使用方法

    Babel-runtime 是 Babel 提供的一个工具库，提供了一些在开发过程中常用的函数和对象，能够帮助开发者解决运行时的兼容性问题。在这篇文章中，我们将探讨 Babel-runtime 的作用...

    1 年前
  • Flexbox 解决在 IE11 中子元素宽度超过父元素的 bug

    在前端开发过程中，我们经常会遇到子元素宽度超过父元素的情况。这通常会导致页面元素布局混乱，影响用户体验。特别是在 IE11 中，这个问题经常出现，给开发带来了很多麻烦。

    1 年前
  • ECMAScript 2020 (ES11) 中的 Object.fromEntries() 使用指南

    ECMAScript 2020（简称 ES11）是由 JavaScript 社区制定的一项新的标准，其中包含了许多有用的新特性。其中一个非常有用的新特性是 Object.fromEntries() 方...

    1 年前
  • 在 Deno 中使用 WebSocket 时遇到问题？这些提示可能会有所帮助

    WebSocket 是一种用于客户端和服务器之间进行实时双向通信的协议。在前端领域中，我们经常使用 WebSocket 来开发聊天室、游戏等实时应用。而在 Deno 中使用 WebSocket 也是很...

    1 年前
  • ES6 Generator 异步编程的使用方法及其应用

    随着前端技术的不断发展，异步编程已经成为了一个不可避免的话题。在过去，我们通常使用回调函数来处理异步任务，但是随着项目越来越复杂，回调嵌套的层数也越来越深，代码的可读性和可维护性变得越来越差。

    1 年前

相关推荐

    暂无文章