Как хранить данные сложных типов для использования в Javascript?

Question

Это повторяющаяся тема: либо AJAX вызывает запрос данных с сервера, а затем данные показываются пользователю, либо страница предварительно заполняется (т. Е. Отображается) данными, имеющими какое-то взаимодействие с Javascript..

Вот несколько возможностей, которые я вижу, как хранить и обрабатывать (сложные) данные:

• Хранить данные просто в DOM и использовать Javascript для полученияfrom-DOM, сделайте что-нибудь с данными и соответствующим образом управляйте DOM, чтобы показать результаты.Извлечение и хранение данных (несколько скрытых полей) может стать настоящим беспорядком, а несколько селекторов могут быть медленными по сравнению с получением данных из Javascript.В сценариях с предварительным заполнением преимущества заключаются в том, что данные индексируются / сканируются пауками поисковых систем, а страница работает без включенного Javascript (изящно ухудшается).

• Использование Javascript в качестве контейнерадля хранения данных и использовать DOM только для визуализации данных.Когда запускается какое-то действие, единственное, что извлекается из DOM, это что-то вроде идентификатора сущности, поэтому мы знаем, на какой объект мы ссылаемся в Javascript.Но как предварительно заполненные данные передаются в Javascript?Если мы просто отобразим их в DOM, мы вернемся к сценарию извлечения из DOM.Мы можем отобразить строку JSON в теги <script> страницы, а затем заполнить DOM (но это может иметь проблемы с кэшированием?).Или мы могли бы лениво запрашивать данные, используя AJAX (но это вызывает ненужную загрузку сервера).

• Использовать готовый контейнер, например, какой-нибудь плагин таблицы jQuery (jqGrid).Но не всегда возможно использовать такой плагин, потому что требуется большая настройка, или компонент просто перебор для вашего сценария.

• Кроме того, вы склонны рендерить столько, скольковозможно на стороне сервера (с использованием RenderPartial) и, возможно, возвращать оба вместе данные вместе с их отображаемым HTML / Javascript?

Я пытался искать статьи на эту тему без особого успеха,Любые указания, советы и указатели приветствуются.

Answer 1

Мой (текущий) подход заключается в том, чтобы поддерживать JavaScript как можно более минимальным.Очевидно, что также целесообразно иметь только одно место, которое обрабатывает макет контента.Таким образом, я стараюсь отображать макет так, как он должен быть для данного места, где он будет использоваться.Так что да, метод Render будет затем отображать все соответствующим образом (не только необработанные данные, то есть некоторую строку JSON или что-то еще).Это, для меня, имеет свои преимущества, так как тогда, как правило, тривиально реализовать сценарий «не-JavaScript», когда контент загружается не через Ajax, а просто как встроенный контент на какой-то другой странице.

Однако этоэто только мой подход.Это не обязательно лучший способ, и может быть изменено.Я надеюсь, что это дает некоторое представление о процессе принятия решений, которое можно использовать для достижения конкретной модели.

Answer 2

проверить хранилища данных extjs, например JSONStore

Answer 3

вы также можете использовать элемент jQuery.data

jQuery.data( element, key, value )

: элемент DOM, связанный с данными.

ключ: строка, в которой указывается часть данных для установки.

значение: новое значение данных.

Answer 4

Javascript по умолчанию является невероятно мощным динамическим языком. Хранение сложного объекта как переменных в Javascript не проблема. Возьмем для примера:

var o = [new Object({ name: 'Test1', value: 1 }), 
         new Object({ name: 'Test2', value: 2 })];
alert(o[0].name) // Returns Test1 as a string

Добавление или удаление объектов из массива с помощью вызовов Ajax, возвращающих объекты JSON, - один из относительно простых способов. Я не вижу причины хранить больше, чем просто идентификатор в DOM, для поиска значений в Javascript, независимо от того, насколько быстро работает механизм DOM в браузере, более элегантно хранить их в Javascript.