set/attach invisible/unseen attribute/value 通过 vanilla js 转换为 html 元素

Question

编辑

为什么我要实现这个？

封装目的。一般每个程序员都会封装his/her代码。还考虑加密 url 或 slug url 并且程序员也使用 uuid（通用唯一标识符）而不是 id（整数 id）。

编辑结束

我将数据属性设置为我的 html 元素的 id，当我控制台日志或调试 html 元素时，我可以看到数据 id (1,2)....

我想如果有人调试我的 html 他看不到我的数据 id(1,2) ...

我怎么让它隐形或不可见？或者有什么办法让它不可见或不可见？

下面的例子..

 const list = document.querySelectorAll('.item');
        for(let x = 0; x < list.length; x++){
            // list[x].setAttribute('data-id',(x+1));
            list[x].dataset.id = x+1;
            console.log( list[x]);
            list[x].addEventListener('click',goCategoryPage)
        }
       function goCategoryPage(e){
           e.preventDefault()
          //    
       }

<ul class="list">
        <li class="item">Category 1</li>
        <li class="item">Category  2</li>
    </ul>

Answer 1

简短的答案是：使用类似 list[x].myId = x+1; 的东西来设置自定义属性。与属性相反，属性不会反映在 DOM.

中

这就完成了工作。但被认为是不好的做法。因为有一些注意事项：

您今天的习惯属性，将来可能会成为标准属性，但意义完全不同。为确保这不会成为未来的问题，请确保为您的属性.
可以用这种方式存储数字、布尔值或字符串等原始数据。但是如果您开始存储更复杂的数据，您可能会遇到内存泄漏问题。特别是如果您开始存储对其他 DOM 节点的引用。

此处讨论了有关自定义属性主题的更多详细信息：Can I add arbitrary properties to DOM objects?我认为这是个人品味的问题，您确实需要确保不会产生（未来的）名称冲突并且不要'存储复杂的数据。

对于像您的 ID 这样的原始数据，我看不出有什么理由不将其存储为数据属性。应该没有什么好羞愧的。在浏览器中 JavaScript 也很难保密。

如果我必须存储更复杂的数据，我会考虑其他两种方法。

使用 WeakMap。您将 WeakMap 放在中心位置。它以 DOM 节点作为键，您的数据作为值。如果节点被垃圾收集，你的数据也是。
为每个节点创建一个新函数（closure），其中包含 ID 并将其附加到节点的点击事件。事件侦听器也被垃圾收集。

关闭方法的详细信息如下：

const list = document.querySelectorAll('.item');
for(let x = 0; x < list.length; x++){
    console.log(list[x]);
    list[x].addEventListener('click', function () {
        const id = x+1;
        e.preventDefault();
        // stuff to be done on click
    });
}

对于循环的每次迭代，都会创建一个新函数（带有一个新闭包）。在此闭包内，x 的值是当前迭代中 x 的值 - 创建函数的位置。

set/attach invisible/unseen attribute/value 通过 vanilla js 转换为 html 元素

set/attach invisible/unseen attribute/value into html element through vanilla js

html

javascript

hidden

dom

custom-data-attribute