2 февраля 2014 г.

Скользкие моменты при работе c data атрибутами в Jquery

Когда вы задаете или получаете какое-нибудь значение хранящееся в data-атрибуте DOM элемента JQuery  делает часть грязной рутинной работы за вас.
Что бы было понятно о чем речь, пример Data атрибута data-text-value
<div data-text-value="abc" id="example">...</div>
Вы можете получить значение или задать:
$("#example").data("text-value")
$("#example").data("text-value","123")

Метод $.data является оберткой над объектом dataset DOM элемента. При этом когда вы пытаетесь считать хранимое значение (строку), Jquery конвертирует значение в ближайший по смыслу тип:
"true" => true,
"123" => 123
и т.п. При этом еще кэширет значение чтобы не парится с распарсиванием в будущем.

Вот здесь и можно подскользнутся на банановой кожуре. Если через дата data атрибут задать такое число выходящее за 32 бита 83735748785296303. То можно получить что нибудь отличное, к примеру 83735748785296300. По всей видимости для приведения строки в число используется функция parseInt:
parseInt("83735748785296303")
#: 83735748785296300

Код для доказательства:
var d = document.createElement('div')
d.innerHTML = '<div data-value="83735748785296303"></div>';
$(d).data('value') == 83735748785296300