在前端开发中，我们经常需要将 JavaScript 对象与 HTML 元素绑定，以便于操作和管理页面上的数据。虽然这可以通过各种方式实现，但是我们需要一种简单、优雅且易于维护的方法。
方式一：使用自定义属性
我们可以使用 HTML 元素的 data-* 属性将 JavaScript 对象附加到元素上。通过这种方式，我们可以轻松地将对象、数组或其他数据类型存储在元素上，并随时在需要时访问它们。
<div id="myDiv" data-my-data='{"name": "John", "age": 30}'></div>以上代码将一个名为 my-data 的自定义属性添加到 div 元素上，并将一个包含名字和年龄的 JavaScript 对象作为属性值附加到该元素上。
我们可以使用以下 JavaScript 代码来访问并操作该对象：
const myDiv = document.getElementById('myDiv');
const myData = JSON.parse(myDiv.dataset.myData);
console.log(myData.name); // 输出：John
// 更新对象
myData.age = 31;
myDiv.dataset.myData = JSON.stringify(myData);请注意，在从 data-* 属性读取值时，浏览器会将其转换为小写字母形式。因此，在 JavaScript 中，我们需要将属性名称从 my-data 转换为 myData，并使用 dataset 属性来访问该属性。
方式二：使用闭包
另一种将 JavaScript 对象附加到 HTML 元素的方法是使用闭包。通过将对象存储在闭包中，我们可以访问和操作该对象，同时又不会污染全局命名空间。
<div id="myDiv"></div>
-- -------------------- ---- -------
----- ----- - ---------------------------------
--------- -- -
----- ------ - - ----- ------- ---- -- --
------------------------------- ---------- -
------------------------- -- -------
---
-----以上代码使用立即调用的函数表达式（IIFE）创建了一个闭包，并将一个对象存储在其中。然后，我们添加了一个事件监听器，并在其中访问了该对象。
需要注意的是，由于闭包中的变量不会被垃圾回收，因此在使用这种方式时需要特别小心，以避免内存泄漏。
方式三：使用数据属性
如果您正在使用 jQuery 或其他类似库，则可以使用 .data() 方法将 JavaScript 对象附加到 HTML 元素上。这种方式使用了 HTML5 新增的 data-* 属性。
<div id="myDiv"></div>
const myDiv = $('#myDiv');
myDiv.data('myData', { name: 'John', age: 30 });
console.log(myDiv.data('myData').name); // 输出：John以上代码使用了 jQuery 的 .data() 方法，将一个对象附加到 myDiv 元素上，并在后续代码中访问了该对象。
总结
以上三种方式都可以用来将 JavaScript 对象附加到 HTML 元素上。使用自定义属性和数据属性的方式适用于纯 JavaScript 开发，而闭包则是一种更为优雅的方式，适用于需要隔离变量作用域的情况。无论您选择哪种方式，记得避免内存泄漏，并保持您的代码易于理解和维护。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/12081
