Каков наилучший способ хранения нескольких значений для $ .data () jQuery?

Question

Если вы храните несколько (более 10) значений на большом количестве элементов div, лучше ли хранить их все в одном объекте или как отдельные значения?

Один объект:

$("#div_id").data("data", {foo:1, bar:2});

Отдельные значения:

$("#div_id")
  .data("foo", 1)
  .data("bar", 2);

Каковы компромиссы каждого метода? Некоторые из этих атрибутов будут доступны часто (например, во время обратных вызовов событий, таких как перетаскивание).

Answer 1

В версии 1.4 вы можете сделать это:

$('#somediv').data({ one : 1, two : 2, three : 3 });

Это отличный способ инициализации объекта данных. ОДНАКО, в 1.4.2, имейте в виду, что использование этой формы ЗАМЕНИТ ЛЮБЫЕ существующие данные по этому элементу. Итак, если вы попробуете это:

$('#somediv').data( 'one', 1 );

$('#somediv').data({ two : 2, three : 3 });

Вы будете отбрасывать значение 'one'.

(Лично я считаю, что это позор, поскольку jQuery уже широко использует слияние объектов со своим $ .extend. Мне не понятно, почему это не было использовано здесь.)

ОБНОВЛЕНИЕ (предложено пользователем: @ricka, спасибо):

1.4.3 и далее объединяет данные (http://api.jquery.com/data/#data-obj):

В jQuery 1.4.3 установка объекта данных элемента с помощью .data (obj) расширяет данные, ранее сохраненные с этим элементом. Сам jQuery использует метод .data () для сохранения информации под именами 'events' и «обрабатывать», а также резервирует любое имя данных, начиная с подчеркивание ('_') для внутреннего использования.

До jQuery 1.4.3 (начиная с jQuery 1.4) метод .data () полностью заменил все данные, вместо того, чтобы просто расширить данные объект. Если вы используете сторонние плагины, это не рекомендуется полностью заменить объект данных элемента, так как плагины могут также установить данные.

Answer 2

Если оба подхода так просты в использовании в вашем коде, перейдите к сохранению одного объекта. Это позволяет избежать дополнительных затрат на вызов метода data() каждый раз, когда вам нужно значение. Таким образом, вы можете получить объект сопоставления одним вызовом data(), а затем получить значения из этого объекта столько раз, сколько вам нужно, без необходимости повторного вызова data().

Метод data() использует объекты для сопоставления элементов с ключами / значениями, находящимися под капотом, поэтому он не предлагает каких-либо улучшений производительности по сравнению с самостоятельным управлением отображаемым объектом.

Answer 3

Я бы, наверное, сделал что-то вроде:

var data = $("#div_id").data();   
data.foo=1;  
data.bar=2;