Fatal编程技术网
  • javascript/
  • Javascript 将对象绑定到元素的适当位置

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

javascript dom

Javascript 将对象绑定到元素的适当位置,javascript,dom,ecmascript-next,Javascript,Dom,Ecmascript Next,是将字符串存储到DOM元素上的安全位置，因为可以保证属性命名不会与添加到DOM规范中的未来属性发生冲突 但是，如果要将非JSON javascript对象作为属性绑定到DOM元素，该怎么办 将自定义对象绑定到DOM元素 分区{边框：实心#333 1vmin；填充：1vmin； 显示：内联块；字体大小：4vmin} 函数main（） { 设obj={} obj.name=“Lonnie”； 设div=document.createElement（“div”）； div.textContent=

是将字符串存储到DOM元素上的安全位置，因为可以保证属性命名不会与添加到DOM规范中的未来属性发生冲突

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


将自定义对象绑定到DOM元素
分区{边框：实心#333 1vmin；填充：1vmin；
显示：内联块；字体大小：4vmin}
函数main（）
{
设obj={}
obj.name=“Lonnie”；
设div=document.createElement（“div”）；
div.textContent=“单击我”；
div.myCustomObject=obj；
div.addEventListener（'click'，function（）
{
警报（this.myCustomObject.name）；
});
文件.正文.附件（div）；
}
window.addEventListener（'load'，main）；
我会使用使用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>


将自定义对象绑定到DOM元素
分区{边框：实心#333 1vmin；填充：1vmin；
显示：内联块；字体大小：4vmin}
异步函数main（）
{
设obj={}
obj.name=“Lonnie”；
设obj2={}
obj2.name=“标记”
设div=document.createElement（“div”）；
div.textContent=“单击我”；
div.myCustomObject=obj；
const wm=新的WeakMap（）；
wm.set（div，obj）；
wm.set（div，obj2）；
console.log（wm.get（div））；/“我的值”
div.addEventListener（'click'，function（）
{
警报（wm.get（div.name）；
});
文件.正文.附件（div）；
}
window.addEventListener（'load'，main）；
此方法确保属性名称之间没有冲突

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

我将使用使用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>


将自定义对象绑定到DOM元素
分区{边框：实心#333 1vmin；填充：1vmin；
显示：内联块；字体大小：4vmin}
异步函数main（）
{
设obj={}
obj.name=“Lonnie”；
设obj2={}
obj2.name=“标记”
设div=document.createElement（“div”）；
div.textContent=“单击我”；
div.myCustomObject=obj；
const wm=新的WeakMap（）；
wm.set（div，obj）；
wm.set（div，obj2）；
console.log（wm.get（div））；/“我的值”
div.addEventListener（'click'，function（）
{
警报（wm.get（div.name）；
});
文件.正文.附件（div）；
}
window.addEventListener（'load'，main）；
此方法确保属性名称之间没有冲突

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

数据属性用于保存字符串，而不是对象

但您没有使用属性。因此，您可以将所需的一切存储在常规属性下

可以将它们用于非JSON对象属性吗

当然

或者规范是否建议将对象属性添加到DOM节点的不同位置

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

数据属性用于保存字符串，而不是对象

但您没有使用属性。因此，您可以将所需的一切存储在常规属性下

可以将它们用于非JSON对象属性吗

当然

或者规范是否建议将对象属性添加到DOM节点的不同位置

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

我认为HTMLElements不应该保持您的状态。为什么不创建元素ID和自定义对象的
映射呢。在事件处理程序中，可以通过元素id检索状态。这不是一个数据属性，而是一个。而且…我仍然不知道这个问题的答案！（但是是的，如果您可以依赖
WeakMap
支持，它是等效的。）@Reijo我知道这可以通过地图来完成。我的问题仍然存在。@Lonnie那么你是在请求许可吗？当然，您可以使用自己的属性扩展元素，但如果您可以使用Map或WeakMap或任何已被证明可以解决此问题的状态管理解决方案，您为什么要这样做呢？我主要希望有人能在规范中指导我找到一个正式解决“未来命名冲突”问题的地方当您实际向DOM节点添加对象属性时（与
数据属性
为添加到DOM节点的基于字符串的属性解决此问题的方式相同）。这样做的能力不会消失，所以我希望有一种更正式的方法来避免未来命名冲突，而不是“不太可能的未来属性”命名。我不认为HTMLElements应该保持您的状态。为什么不创建元素ID和自定义对象的
映射呢。在事件处理程序中，可以通过元素id检索状态。这不是一个数据属性，而是一个。而且…我仍然不知道这个问题的答案！（但是是的，如果您可以依赖
WeakMap
支持，它是等效的。）@Reijo我知道这可以通过地图来完成。我的问题还没有解决。@LonnieB