场景是类似这样的:
屏幕上有许多“石头”,每个“石头”都有自己的属性,例如质量,分数和速度等等。当鼠标点击石头的时候,显示出石头的各个属性。
我现在的解决方法是讲所有属性都放在dom上,用data-*来保存。
<div class="rocks" data-gram="10" data-score="100" data-speed="10"></div>
我想知道这样使用data-*对么,会有什么缺点么?
还有其他更好的方法么?
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>
使用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