HTML5 data-* attributes and jQuery.data() in examples

HTML5 data-* attributes and jQuery.data() в примерах:
1) загруженная страница содержит

<input id="test" type="text" data-data1="qwer" data-data2-test="asdf" value="test">

2) на Vanilla JS

document.getElementById("test").dataset.data1
"qwer"
document.getElementById("test").dataset.data2-test
NaN
document.getElementById("test").dataset.data2Test
"asdf"

-- для IE 10- dataset не доступен

>> document.getElementById("test").dataset.data1 
"Не удалось получить свойство "data1" ссылки, значение которой не определено или является NULL" 
>> document.getElementById("test").getAttribute("data-data1") 
"qwer" 
>> document.getElementById("test").getAttribute("data-data2-test") 
"asdf" 

используем jQuery для чтения, все универсально, и главное, в IE тоже работает как надо

$('#test').data('data1')
"qwer"
$('#test').data('data2-test')
"asdf"
$('#test').data('data2Test')
"asdf"

а сейчас попробуем сохранить данные используя jQuery.data(), и более того сохраним объект содержащий функцию
видим результат, с помощью jQuery можем легко воспользоваться сохраненным объектом
но эти данные не появляются в dataset, они сохраняются в кэше jQuery, при первой же попытке получить значение data элемента, jQuery создаст свойство в DOM структуре этого элемента «jQuery + $.now()» и присвоит ему уникальный идентификатор (или ранее), который и будет использоваться как ключ для доступа к кэшу, а так же, скопирует атрибуты data в свой кэш.

$('#test').data('data3', {tt: 10, fn1: function(n){ return this.tt * n + n } })

$('#test').data('data3').fn1(5)
55
document.getElementById("test").dataset.data3
undefined

jQuery1113024019371896630481: 63

jQuery.cache[63]
Object {data: Object, parsedAttrs: true}
jQuery.cache[63].data
Object {data2Test: "asdf", data1: "qwer", data3: Object}

$('#test').data()
Object {data2Test: "asdf", data1: "qwer"}
$.cache[63].data
Object {data2Test: "asdf", data1: "qwer"}
$('#test').attr('data-data1', 'qazwsx')
[<input id=​"test" type=​"text" data-data1=​"qazwsx" data-data2-test=​"asdf" value=​"test">​]
$('#test').data()
Object {data2Test: "asdf", data1: "qwer"}
$('#test')[0].dataset
DOMStringMap {data1: "qazwsx", data2Test: "asdf"}
$('#test').attr('data-data3', 'qazwsx')
[<input id=​"test" type=​"text" data-data1=​"qazwsx" data-data2-test=​"asdf" value=​"test" data-data3=​"qazwsx">​]
$('#test')[0].dataset
DOMStringMap {data1: "qazwsx", data2Test: "asdf", data3: "qazwsx"}
$('#test').data()
Object {data2Test: "asdf", data1: "qwer"}
$('#test').data('data1', 123)
[<input id=​"test" type=​"text" data-data1=​"qazwsx" data-data2-test=​"asdf" value=​"test" data-data3=​"qazwsx">​]
$('#test').data()
Object {data2Test: "asdf", data1: 123}
$('#test')[0].dataset
DOMStringMap {data1: "qazwsx", data2Test: "asdf", data3: "qazwsx"}
$('#test')[0].dataset.data1 = 777
777
$('#test')[0].dataset
DOMStringMap {data1: "777", data2Test: "asdf", data3: "qazwsx"}
$('#test').data()
Object {data2Test: "asdf", data1: 123}

Итоги:

1. data атрибуты загружаются в свойство attributes элемента
2. если браузер поддерживает DOMStringMap, то в свойство dataset дублируются все атрибуты data? имена приводятся в верблюжью нотацию, если в имени присутствуют «-«
3. jQuery сохраняет копию data атрибутов и более их не обновляет, ни в одну из сторон, jQuery использует javascript для хранения данных, а не DOM, вот тут то плагины jQuery и хранят свои экземпляры