前言
在前端开发中，我们常常需要使用到提示框。提示框可以起到提醒用户、提示操作结果等作用，是一个非常常用的组件。本文将介绍如何基于 Custom Elements 实现一个简单的 toast 提示框，并通过优化提高其性能。
Custom Elements 简介
Custom Elements 是一项 Web Component 标准，允许开发者创建自定义的 HTML 元素，可以扩展功能、改善可维护性和实现代码重用。
Custom Elements API 主要包含两个重要的接口：
customElements.define()：用于定义一个自定义的 HTML 元素。HTMLElement: 自定义元素继承该接口，从而可以在 HTML 代码中使用。
实现 toast 提示框
下面我们就来使用 Custom Elements 实现一个简单的 toast 提示框。
HTML 骨架
首先，我们需要添加 HTML 骨架，定义一个 toast-message 元素。
-- -------------------- ---- -------
---- ------------------ ---
----------
-------
----- -
--------- ------
------- -----
----- ----
---------- -----------------
-------- ---- -----
----------------- -----
------ -----
-------------- ----
---------- -----
-------- --
----------- ------- ---- ------------
-
------------ -
-------- --
-
--------
-------------
-----------
--------
----- ------------ ------- ----------- -
------------- -
--------
----- -------- - -----------------------------------------
----- ------- - ---------------------------------
------------------- ----- ------ ------------------------
-
------------------- -
------------
-
------ -
---------------------------
------------- -- -
------------
-- ------
-
------ -
------------------------------
-
-
-------------------------------------- --------------
---------在这个骨架中，我们定义了一个 template 标签，里面嵌套了 CSS 样式和插槽（slot）。在 JavaScript 中，我们继承了 HTMLElement 接口，并在 constructor 中获取模板的内容，并将其挂载到 shadow DOM 中。然后在 connectedCallback 中，我们默认隐藏 toast-message 元素。为了方便使用，我们为 ToastMessage 添加了两个方法：show 和 hide，分别用于显示和隐藏 toast-message 元素。
使用示例
我们可以将 toast-message 元素放到任何需要的位置，并在需要的时候调用其 show 方法。
-- -------------------- ---- -------
---- ---------- ---
--------- -----
------
------
----- --------------- --
------------- -------- ------------
----- ---------------- --------------------------- --
-------
------
------- -------------------------- --------------
---- ---------------
------- --------------
------ -----------------------
-------- ----------- -
----- ------------ - ----------------------------------------
------------------------ - ------ --------
---------------------------------------------------------
--------------------
------------- -- -
---------------------------------------------------------
-- ------
-
---------
-------
-------在这个示例中，我们在 button 的点击事件中，创建了一个 toast-message 元素并添加到 app 容器中。然后调用其 show 方法，显示 Hello World! 消息。在 3 秒后，调用其 hide 方法，隐藏 toast-message 元素。
优化
虽然通过 Custom Elements 实现 toast 提示框比传统的方式更加直观、容易理解，但是其性能并不是最优的。我们需要对其进行优化，以提高性能和用户体验。
尽量减少扩展作用域
在 Custom Elements 中，每一个元素都会创建独立的作用域。因此，为了减少扩展作用域所带来的性能开销，我们应该尽量减少使用类方法来绑定事件等操作，同时也要避免使用闭包。
使用事件委托
由于每个 toast-message 元素都是独立的，因此为每个元素绑定事件可能会带来更大的开销。为避免这种情况，我们可以使用事件委托。将事件绑定在父容器上，通过事件对象的 target 属性来判断触发事件的元素。
使用懒加载
在使用 Custom Elements 时，由于每个自定义元素都会创建一个独立的作用域，因此页面中使用的元素越多，加载所需的时间也就越长。为了避免这个问题，我们可以将元素进行懒加载。只有在需要使用时才会加载，从而加快页面的加载速度。
总结
本文介绍了如何使用 Custom Elements 实现一个简单的 toast 提示框，并通过优化提高了其性能。Custom Elements 是一个非常强大的 Web Component 技术，有助于提高代码的可维护性和可重用性。在实际开发中，我们可以根据需求进行灵活使用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/649d63d148841e9894a2709c
