问题描述
编辑
为什么我要实现这一目标?
封装目的。通常,每个程序员都封装他/她的代码。还要考虑加密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中。
这可以完成工作。但是被认为是不好的做法。因为有一些警告:
- 您今天的自定义属性可能在将来成为标准属性,但含义完全不同。为确保将来不会成为问题,请确保为您的媒体资源添加前缀,例如您的应用名称或至少“ my”。
- 可以以这种方式存储原始数据,例如数字,布尔值或字符串。但是,如果您开始存储更复杂的数据,则可能会遇到内存泄漏的问题。特别是如果您开始存储对其他DOM节点的引用。
在此处讨论有关自定义属性的更多详细信息:Can I add arbitrary properties to DOM objects?我认为这是个人品味的问题,您确实需要确保不会产生(将来的)名称冲突并且不会存储复杂数据。
对于像您的id这样的原始数据,我看不出没有将其存储为数据属性的原因。应该没有什么可耻的。在浏览器中保存JavaScript的秘密也是非常困难的。
如果必须存储更复杂的数据,我会考虑另外两种方法。
- 使用WeakMap。您可以将WeakMap放在中央位置。它以DOM节点为键,您的数据为值。如果节点是垃圾收集,那么您的数据也是。
- 为每个节点创建一个新函数(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
的值。