- masyarakat
- Belajar
- Perpustakaan Alatan
- Masa lapang
Rumah > Soal Jawab > teks badan
平时会看到这样的代码，由于本地没有 Model，需要存取的数据就只好放在DOM上，最常见的莫过于列表项了：
<p class="list-item" data-name="{{name}}">
data-name 作为 JS-Hook（钩子）可以很方便的被JS取到。
var name = $('.list-item').attr('data-name');
但是，在大谈 MV 应该分开的今天，在 DOM 上存放数据：
这是否仍然是一个好方法？
该如何理解？
是否有其无可替代的优势？
ringa_lee2017-04-10 14:45:41
SegmentFault 用得不多，过来补充一下在知乎提问得到的高票答案，非常赞同：
贺老答的，答案链接：http://zhi.hu/aLuG
贺师俊，Web开发者
既然标准增加了 data- 就是表示，在DOM存放数据是合理的 use cases。但是，具体案例中，使用 data- 是不是合适，不能一概而论。
常见的误用 data-* 的情况：
在HTML中已有更适合的特定属性。比如语义细化应该用class，而不是data-*；已经有title属性，不需要用data-tooltip。
data-是特定于网站/应用的，如果是要作为通用协议的（比如提供给第三方），不应该用data-，而应该考虑microdata、rdfa或microformats。
库用 data-* 应该加入 namespace 以避免冲突。这一点许多库（比如bootstrap）做得不好。
前端MV框架通常并不需要你手动用data-，因为DOM和数据的关联是由框架管理的，但是框架可能内部使用data-作为实现手段。而你用MV框架的同时又使用bootstrap，那么bootstrap中component所需的data-你还是得写，因为那些data-是bootstrap的私有属性，跟MV*没有关系。
PHP中文网2017-04-10 14:45:41
优势我觉得就是在逻辑比较简单时，可以直接塞到dom上；
如果dom被复制了，这部分数据也就复制过去了；
如果复杂的话，还是自己想个合适的数据结构来存，这样效率高些；操作dom的开销还是比直接操作JS对象高的。
PHP中文网2017-04-10 14:45:41
个人的建议是结构化数据在DOM上存放数据的“主键”，具体数据还是放在JS变量里，通过“主键”去捞对应的数据
这里”主键“可以是数据库主键，也可以是临时的，view里面的idx
伊谢尔伦2017-04-10 14:45:41
之所以写成data-是因为jquery有个data方法可以拿到data()，当然也可以换作其他的例如saf-fer，fes-asf同样可以利用attr来拿到，而jquery的data方法则避免的网dom上存数据，直接用jquery.data('key','value')来设置数据和jquery.data('key')来取数据都不会存在dom上
http://www.w3school.com.cn/jquery/data_jquery_data.asp
PHP中文网2017-04-10 14:45:41
我有时候也会这么干，Bootstrap也有这么干过。这样只能存放文本格式的数据。
jQuery提供了data()函数来处理这种事，兴许更合适。它自己实现了某种缓存机制，可以直接存放对象。
大家讲道理2017-04-10 14:45:41
我认为这个不是存放不存放数据的问题，如果是存放数据可以讨论下cookies和webstorage这些
这完全是一种编码习惯，如果你想让框架使用者完全用html的标签控制一个组件的参数，那么写成data-你的属性名 这种未尝不可
当然如果在标签里写很复杂的东西，比如涉及引号的字符串，还是源生js比较好
至于性能 只要不是太复杂的渲染和回流 近代浏览器下这点开销可以忽略不计了吧 前提是不要拿这个attribute当选择器就行
