HTML 5のカスタムdata属性

最近,異なるview上のinputに対して,そのinputのvalueに特定の修飾子(~,{}など)を付ける必要がある.
これを見ると、私の直感はJSでviewタイプを判断し、取得したinput valueにタイプに基づいてこの修飾子を追加することです.しかし、leadは私にこのようにするには、多くの条件判断を導入し、ビジネスロジックと特定のview tight couplingをしなければならないと言った.彼は私に異なるDOMに対してカスタムdataを使ってこれらの修飾子を格納することができると教えてくれたので、抽象的で汎用的な方法を書くことができます.
この非常に役に立つdataプロパティを見てみましょう.かつて、DOMに関連するメタデータを格納する必要があった場合、classまたはrelをメディアとして選択するしかありませんでした.

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

注意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をサポートしています.あの新しいバージョンを借りて誰が間に合うのか本当に好きですね.
参照:

Using data attributes

How to Use HTML5 Data Attributes