用data-*存数据好么？

Question

场景是类似这样的：
屏幕上有许多“石头”，每个“石头”都有自己的属性，例如质量，分数和速度等等。当鼠标点击石头的时候，显示出石头的各个属性。
我现在的解决方法是讲所有属性都放在dom上，用data-*来保存。

<div class="rocks" data-gram="10" data-score="100" data-speed="10"></div>

我想知道这样使用data-*对么，会有什么缺点么？
还有其他更好的方法么？

Answer 1

你存在一个json里就好了，这样写不麻烦么？你可以用数组序列的方式来对应起来，也可以自己添加一个id对应起来

var stone = [
    { id: stone1,
      gram: 10,
      score: 100,
      speed: 10 },
    { id: stone2,
      gram: 10,
      score: 100,
      speed: 10 },
    { id: stone3
      gram: 10,
      score: 100,
      speed: 10 },
      ...
]

// 比如这样对应
<div class="rocks" data-item="stone1"></div>
  ...

Answer 2

data-*可以避免自定义属性混乱，但视图和模型混在一起了。
比如，将某个石头的属性放到视图中的某个位置，我们需要先从石头div中读取data并将其写到指定的位置。
当石头的属性渐渐变多，html代码中就多了很多和视图无关的东西，显得好乱。

认为@看不懂未来 同学的答案是一个好方法。
模型放到javascript中会更明确，如果使用angularJS，效果会更好。

例如:

<script>
    angular.module('ohMyStone',[])
    .controller('StoneCtrl',['$scope',function($scope){
        $scope.stone = {gram: 10,score: 100,speed: 10};
    }]);
</script>

<div ng-controller="StoneCtrl">
    <p>我有个重达{{stone.gram}}的石头，它的速度可以达到{{stone.speed}}km/s</p>
</div>

Answer 3

使用data-*可以解决自定义属性管理混乱的问题

虽然IE浏览器需要11以上版本才支持（原生Javascript代码获取）

但是

通过jQuery可以很方便的获取到这个属性：

<ul>
    <li data-animal-type="bird">Owl</li>
    <li data-animal-type="fish">Salmon</li> 
    <li data-animal-type="spider">Tarantula</li> 
</ul>

///////////////////////////////////////////
$('li:first').data('animal-type'); //bird

Answer 4

同一个问题的英文版，可以对比下，有点意思。
http://stackoverflow.com/questions/34214840/is-it-right-to-put-data-in-html5-data

Answer 5

非常可以，这样做是现在主流做法。
除非你用React之类有自己一套数据管理方式的框架，否则这是比较优雅的方式。