前言
在前端开发中，我们经常需要模块化地管理我们的代码，这一点尤其重要，尤其是对于 Web Components。对于 Web Components 的开发，公开的状态数据和方法必须被保持最小化并仅仅用于 DOM 事件和方法之间的通信。但此举并不等于我们需要牺牲某些功能。因此，我们可以使用 JavaScript 闭包机制在 Custom Elements 中创建私有状态数据。
闭包机制简介
闭包是指函数和函数内部它能访问到的外部变量、内部变量和外部函数的联合体。一个简单的闭包示例：
-- -------------------- ---- -------
-------- ------- -
----- -------- - -- -- --------
-------- ------- -
----- -------- - -- -- --------
------ -------- - ---------
-
------ --------
-
--------在这个示例中，outer 函数可以被正常地返回执行结果，但是在 inner 函数内部，它可以访问到 outerVar 的作用域。这就是闭包。
使用闭包在 Custom Elements 中创建私有状态数据
在 Web Components 中，我们可以使用 constructor 构造函数来创建一个元素实例。使用函数名称并继承 HTMLElement 类以创建一个新的 HTMLElement。在创建自定义元素时，您需要定义一个 constructor 和初始化方法。这些方法简单地转发传递给超类的构造函数。然后我们可以使用 getProperty 方法来定义我们想要暴露的方法。例如，我们要创建一个时间戳元素，显示它最后更改时间的“数据绑定”。我们会用到闭包的功能来实现。
-- -------------------- ---- -------
----- ---------------- ------- ----------- -
------------- -
--------
--- ---------- - -----------
----- ------ - ------------------- ----- ------ ---
------------------- ------------
-
------ - -------- ----------- -- -
----- --- - ------------------------------
------------- - ----- --------- ----- ------------------------------------
------------------------
--
-
------------------------------------------ ------------------在上面的示例中，我们定义了一个名为“TimestampElement”的自定义元素，该元素继承自 HTMLElement 并在 constructor 的末尾初始化了 _timestamp 变量。我们可以将 d 作为原想传递给 HTMLElement 的参数，并在 shadow 树中渲染静态 HTML。此时，每个 TimestampElement 实例都将引用不同的 _timestamp 变量。他们二者不会相互影响。
案例分析
下面是一个更复杂的示例，其目的是创建一个名为“ImageWithPlaceholder”的自定义元素。该元素的源图像将作为 Web 组件的属性传递，并显示一个占位符，直到源图像下载完成并准备渲染。
-- -------------------- ---- -------
----- -------------------- ------- ----------- -
------------- -
--------
------------ - ------
--------- - ---
----- ------ - ------------------- ----- ------ ---
--------------------
-
--- ----- -
------ ----------
-
--- ------ -
-- ---------- --- -- -------
--------- - --
----- ----------- - ----------------------------------------------
----- ----- - -------------------------------------
------------------------------------
--------- - ----------
-
------ - -------- -- -
----- -------- - -------------------------------
---------------------------- --------------
----------------------------- ------------------------------
----- ---------- - ------------------------------
------------------------------------
----- ----- - ------------------------------
------------------------------ -- -- -
------------------------------
---------------------------------------
---
------------------------------
----- ------------- - ------------------------------
-------------------------------- ---------------
--------------------------------------
----------------------- - -------------
--------------------------------------
-----------------------------
-------------------------------
--
-
----------------------------------------------- ----------------------在上面的示例中，我们使用字段 _loaded 和 _src 来存储下载状态和源 URL 图像的路径。然后我们通过自定义访问器 src 来对 _src 进行操作。如果当前元素中的值等于传递的值，请跳过操作。否则，我们从 shadow 元素中检索 placeholder 和 img，并更新 src，到 _src 的值。最后，我们在img元素的' load '事件侦听器中，删除 placeholder元素，并使img` 元素可见。
结论
在本文中，我们学习了如何使用 JavaScript 闭包机制在 Custom Elements 中创建私有状态数据。这是一个很好的技术，可以让我们从 Web 组件的设计中受益，尤其是在创建易于管理、灵活和动态的元素时。语法也很容易理解，需要一些使用经验。这个技术不是为了消除类之间的任何耦合关系。与一个类相比，闭包更适合用于识别私有数据，而不是进行修改，例如访问器实现的模式。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6774a5736d66e0f9aaeee762