Data

Если по какой-то причине вы еще не знакомы с data() — то советую прочитать и усвоить незамедлительно. Если же в двух словах — это реестр данных, и все данные привязанные к какому-либо элементу лучше хранить в нём, это же правило касается и плагинов. Если вам надо сохранить состояние плагина — используйте data(), если необходим кеш — используйте data(), если вам необходимо сохранить … ну думаю понятно. Приведу еще примерчик связанный с инициализацией:

function() { // функция init

var init = $(this).data('mySimplePlugin'); if (init) {

return this; } else {

$(this).data('mySimplePlugin', true);

return this.bind('click.mySimplePlugin', function(){ $(this).css('color', options.color);

});

}

}

По стечению обстоятельств, в HTML5 появились data-атрибуты, и для доступа к ним jQuery использует тот же метод data(), но вот дела, jQuery.data() – не манипулирует атрибутами HTML, а работает со своим реестром, и лишь при отсутствии там данных пытается заполучить атрибут data-*, не попадитесь:

<div id="my" data-foo="bar"></div> $("#my").data("foo"); // >> bar $("#my").attr("data-foo"); // >> bar

$("#my").data("foo", "xyz"); $("#my").data("foo"); // >> xyz $("#my").attr("data-foo"); // >> bar

$("#my").attr("data-foo", "def"); $("#my").data("foo"); // >> xyz $("#my").attr("data-foo"); // >> def <div id="my" data-foo="def"></div>

93

События data

Ещё чуть-чуть информации «к сведению» – при вызове метода data() происходит ряд событий:

—getData – когда вы пытаетесь получить значение какого-либо значения

—setData – когда устанавливаете значение

—changeData – сразу после изменения значения

При этом только обрабатывая событие getData вы можете хоть как-то повлиять на происходящее:

$('#my').on('getData', function(event, prop) { this; // наш искомый элемент

event; // jQuery.Event prop; // ключ

return 42; // возвращаем другое значение

})

При обработке события setData мы лишь в роли наблюдателей:

$('#my').on('setData', function(event, prop, value) { prop; // ключ

value; // значение

})

При обработке события changeData нам тоже выпала роль наблюдателей, но изменить происходящее мы всё же можем:

$('#my').on('changeData', function(event, prop, value) {

// workaround

jQuery.data(this, prop, 42);

})

События setData, getData и changeData не всплывают.

Для «обхода» этих событий можно использовать jQuery.data()

Наглядный пример на странице events.data.html

94