最近遇到這樣一個需求，針對不同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了。真喜歡那個誰能借著新版本迎頭趕上啊！
引用：
