将对象绑定到元素的适当位置

Question

Data Attributes 是将字符串存储到 DOM 元素的安全位置，因为可以保证您的属性命名永远不会与未来的 [=30= 冲突] 添加到 DOM 规范中。

但是，如果您想将非 JSON javascript 对象作为属性绑定到 DOM 元素怎么办？

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Bind Custom Object to DOM Element</title>
    <style>
            div{ border: solid #333333 1vmin; padding:1vmin; 
                display:inline-block; font-size:4vmin}
    </style>
    <script type="text/javascript">
        function main()
        {
            let obj = {}
            obj.name = "Lonnie";

            let div = document.createElement("div");
            div.textContent = "Click Me";
            div.myCustomObject = obj;
            div.addEventListener('click',function()
            {
                alert(this.myCustomObject.name);
            });
            document.body.appendChild(div);
        }
        window.addEventListener('load', main);
    </script>
</head>
<body>
</body>
</html>

数据属性旨在保存字符串，而不是对象。可以将它们用于非 JSON 对象属性，还是规范建议将对象属性添加到 DOM 节点的不同位置？

Answer 1

我会使用 ES6 的 WeakMap 解决方案：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Bind Custom Object to DOM Element</title>
    <style>
            div{ border: solid #333333 1vmin; padding:1vmin; 
                display:inline-block; font-size:4vmin}
    </style>
    <script type="text/javascript">
        async function main()
        {
            let obj = {}
            obj.name = "Lonnie";
            let obj2 = {}
            obj2.name = "Mark"

            let div = document.createElement("div");
            div.textContent = "Click Me";
            div.myCustomObject = obj;

            const wm = new WeakMap();

            wm.set(div, obj);
            wm.set(div, obj2);
            console.log(wm.get(div)); // "my value"

            div.addEventListener('click',function()
            {
                alert(wm.get(div).name);
            });
            document.body.appendChild(div);
        }
        window.addEventListener('load', main);
    </script>
</head>
<body>
</body>
</html>

此方法确保属性名称之间没有冲突。

我个人认为将其绑定到属性没有任何问题，而且似乎也没有任何反对这样做的建议，数据属性应该包含字符串

Answer 2

Data attributes are designed to hold strings, not objects.

但是你没有使用属性。因此，您可以在常规属性.

下存储您想要的所有内容

Is it ok to use them for nonJSON object-properties,

当然可以。

or does the specification recommend a different location for adding object-properties to DOM nodes?

不，不是。 DOM 规范是语言中立的，因此它并没有真正描述 JS 中的对象如何实现该规范的行为。

将对象绑定到元素的适当位置

Proper Place to Bind Object to Element

javascript

dom

ecmascript-next