HTML5入门教程：自定义数据

在学习HTML5（http://www.maiziedu.com/course/web/228-2627/）中，会遇到这样一个需求，针对不同view上的input，对其input的value加上特定的修饰符（~~, {}等）。

一看到这个，我的直觉就是在JS中判断view类型，然后根据类型为取得的input value添加这个修饰符。但lead跟我说这样做必须引入大量的条件判断，并使业务逻辑和特定的view tight coupling。他告诉我可以针对不同的DOM使用自定义data来存储这些修饰符，于是就可以写一个抽象、通用的方法了。

让我们一起来看看这个非常有用的data属性吧。曾几何时，当我们需要存储一些与DOM相关的元数据的时候，我们只能选择class或rel作为媒介：

<div id="msglist" class="user_bob list-size_5 maxage_180"></div>

这会让class过于臃肿，而且使用JS解析这个class属性，取出其中的值也比较复杂，容易出错。于是在HTML5中，我们有了data属性来解决这个问题。同样的元数据，现在可以用data-前缀引导来命名：

<div id="msglist" data-user="bob" data-list-size="5" data-maxage="180"></div>

注意data-前缀是必须的，否则数据可能会被浏览器忽略。自定义data-属性可以存储任何合法的string，包括JSON。所有的data数据都属于页面私有，不会被搜索引擎等外部系统引用。好了，数据保存进去了，怎么对这些元数据进行操作呢？可以看到，data-属性本质上还是DOM的属性，因此常见的getAttribute和setAttribute对他们同样适用。但在HTML5中有一个更方便的API对其进行操作，这就是dataset API。dataset返回一个DOMStringMap对象，其中包含了所有的自定义data属性的值。在这个对象中，属性名中的data-前缀被自动去掉了，而-连接符也被自动转化为驼峰连接，更符合JS的习惯：data-user => userdata-list-size => listSize使用dataset可以非常方便的对data属性进行操作了：

var msglist = document.getElementById("msglist");var size = msglist.dataset.listSize;

msglist.dataset.listSize = +size + 3;

除了你们知道的那个谁，其他现代浏览器都支持dataset API了。真喜欢那个谁能借着新版本迎头赶上啊！