通过香草js设置/附加不可见/看不见的属性/值到html元素

如何解决通过香草js设置/附加不可见/看不见的属性/值到html元素

编辑

为什么我要实现这一目标？

封装目的。通常，每个程序员都封装他/她的代码。还要考虑加密url或slug url，程序员还使用uuid（通用唯一标识符）代替id（整数id）。

END EDIT

我将data属性设置为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>

解决方法

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

这可以完成工作。但是被认为是不好的做法。因为有一些警告：

1. 您今天的自定义属性可能在将来成为标准属性，但含义完全不同。为确保将来不会成为问题，请确保为您的媒体资源添加前缀，例如您的应用名称或至少“ my”。
2. 可以以这种方式存储原始数据，例如数字，布尔值或字符串。但是，如果您开始存储更复杂的数据，则可能会遇到内存泄漏的问题。特别是如果您开始存储对其他DOM节点的引用。

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

对于像您的id这样的原始数据，我看不出没有将其存储为数据属性的原因。应该没有什么可耻的。在浏览器中保存JavaScript的秘密也是非常困难的。

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

1. 使用WeakMap。您可以将WeakMap放在中央位置。它以DOM节点为键，您的数据为值。如果节点是垃圾收集，那么您的数据也是。
2. 为每个节点创建一个新函数（closure），该函数包含ID，并将其附加到Node的click事件。事件侦听器也会被垃圾收集。

有关封闭方法的详细信息：

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的值。