Какой из этих методов считается лучшей практикой?

Question

У меня есть массив данных, который возвращается как ответ JSON. Данные будут регулярно обновляться, а также будут доступны очень часто.

Данные содержат список комментариев/ответов для каждой отображаемой песни и доступны, когда пользователь наводится на определенный элемент, а конкретный комментарий/ответ затем отображается в шаблоне.

Список песен также динамически фильтруется, поэтому массив будет постоянно обновляться.

Учитывая частый доступ и обновления этих данных, какие из следующих будет считаться лучшей практики: -

A. Храните весь массив в глобальной переменной и постоянно манипулировать/доступ к нему.

или

Б. Хранить массив в DOM с помощью метода JQuery в $ .data и получить доступ к нему таким образом.

Что было бы лучше всего и почему ... Если опция A, пожалуйста, помните, что переменная должна храниться в памяти на протяжении всего сеанса пользователей. Также есть ли что-то, что мне нужно, чтобы следить за потенциальными утечками памяти и т. Д.?

РЕДАКТИРОВАТЬ: Просто чтобы предоставить дополнительную информацию: в среднем я ожидаю, что данные будут находиться в диапазоне от 2 до 5 килобайт в любой момент времени.

Answer 1

Я должен сказать вариант B здесь. В то время как преимущества производительности при манипулировании чистым массивом звучат очень привлекательно, из-за того, что это звучит, ваше использование рода данных требует привязки ваших данных к отдельным элементам DOM, к которым они применяются.

С $.data вы прикрепляете данные к элементу, к которому они относятся. Представьте себе рабочий процесс вашего hover события:

// with option A 
$('.song').mouseover(function (e) { 
    // read the relevant index value of the data from this element 
    // (probably through some attribute?) 

    // get the data from the global array 

    // show that data on hover 
}); 

// with option B 
$('.song').mouseover(function (e) { 
    // show the $(this).data() on hover 
}); 

Это, конечно, чище, и я не могу себе представить, как вы делаете ваши DOM элементы помнить связанные с ними данные в глобальном массиве, за исключением подключали его на элемент DOM самостоятельно через атрибут или где-то есть ссылка на объект.

Во-вторых, глобальные объекты являются злыми. К некоторым значительным, склонным к аргументам и дебатам пламени.

В-третьих, похоже, что элементы вашей песни сортируются и фильтруются самим DOM. Если вы прикрепляете свои данные через $.data, они сортируются и фильтруются вместе с элементами DOM без какого-либо дополнительного отслеживания. Элемент песни должен быть удален из DOM? Просто позвоните .remove() на нем --- ассоциированные удаляются также. Бесплатная функциональность!

Наконец, $.data также оптимизирован для предотвращения циркулярных ссылок и утечек памяти (исправьте меня, если я ошибаюсь на этом).

Кроме того, 2-5kb данных не звучат как много.

Только мои два цента.

Answer 2

A) был бы моим предпочтительным выбором, так как вы должны стараться избегать постоянно расширяющегося dom.

Direct DOM manipulation is rather slow, поэтому старайтесь избегать его, когда это возможно.

Answer 3

IMO это зависит от вашего кода JS/JQ. Если он компонентный, то сохранение локальных данных каждого компонента с использованием .data является более чистым. Если это не так, это может быть неважно, но сохранение его в одном месте может облегчить ситуацию. Я не сталкивался с конкретными проблемами, используя множество вложений .data, но мне, возможно, повезло.

Вы определили, что абсолютно необходимо постоянно хранить данные на странице? Произвольное, неограниченное увеличение в хранилище страниц могло бы немного нервничать по сравнению с добавлением/удалением больших кусков, к которым может обратиться дерево комментариев.