Где хранить специфические для элемента дополнительные данные на веб-странице; data- или javascript

Question

У меня есть некоторые данные, которые мне нужно связать с конкретным элементом, например с отдельной строкой таблицы.Эти данные содержат информацию, такую ​​как текущее состояние, и уникальный идентификатор, который соответствует строке SQL.Когда пользователь взаимодействует с элементом, который я хочу считать уникальным идентификатором, и с этим идентификатором выполните запрос AJAX, чтобы позволить пользователю изменить состояние этого элемента.

После исследования кажется, что естьдва лагеря о том, как встраивать этот элемент в конкретную информацию.

1) Использование атрибута data в html5.Насколько я понимаю, это будет работать в современных веб-браузерах, а также в старых браузерах, которые не поддерживают HTML5.Но хотя это работает, оно не следует спецификации HMTL (менее HTML5) и поэтому не будет проверяться, если вы запустите его через средство проверки синтаксиса HTML.

2) Сохраните дополнительные данные в массиве javascript, объекте и т. Д. Теперь для дополнительной работы вам необходим способ соотнести данные javascript с элементом html.

плюсы и минусы использования этих двух разных подходов к хранению данных?И какой подход вы бы порекомендовали?

Спасибо!

Answer 1

Я бы не стал беспокоиться о том, что атрибуты данных не проходят валидаторы. Атрибут присутствует в HTML5, потому что люди долгое время использовали похожие, нестандартизированные атрибуты специально для решения этой проблемы. Идите дальше и начните писать «HTML5», используя работающие части спецификации, то есть не ломайтесь в определенном браузере, и используйте HTML5-тип документа. Валидатор W3C по крайней мере уже поддерживает тип документа.

Что касается того, какой метод использовать, я думаю, что он действительно сводится к тому, когда вы хотите проанализировать информацию в интерпретаторе JavaScript: при загрузке страницы или когда необходимы данные. Я полагаю, это зависит от того, сколько информации вы располагаете, какая из них будет наиболее эффективной. Но вы не ошибетесь, добавив его в HTML с атрибутом данных или двумя.

Лично мне нравится добавлять информацию в HTML с атрибутами данных. В описываемом вами сценарии я бы использовал data-state и data-rid (или аналогичные), чтобы мне не приходилось больше разбирать информацию (кажется, вы думаете о том, чтобы поместить два бита информации в один атрибут данных ). Таким образом, ваша таблица информации будет действительно полной: данные будут представлены пользователю, а разметка содержит дополнительную информацию, которая может понадобиться парсеру.

Answer 2

Вы отметили свой вопрос с помощью jQuery, поэтому я предполагаю, что он у вас есть.Вы можете использовать метод .data() для хранения произвольных данных и связывания их с элементом.

$("tr").first().data('sqlId', 1234);
assert($("tr").first().data('sqlId') === 1234);

Answer 3

В варианте (2) особой корреляции не требуется больше, чем в варианте (1) - скорее, меньше. Вы можете поместить данные в свойство объекта DOM, которое соответствует элементу. Почему бы не использовать базовую функцию JavaScript, которая позволяет добавлять свойства к объекту?

Answer 4

Я бы определенно выбрал вариант (1) и либо не беспокоился о том, что эти атрибуты не проверяют, либо просто проверял ваш документ как html5.Это просто.Это работает.

Теория «разделения интересов», которая приводит некоторых людей к варианту (2), бессмысленна для такого рода ситуаций, потому что если вы помещаете данные в объект JS какого-то вида, вам все равно нужен способпривязать его к фактическим элементам html, чтобы они не только не были на самом деле отдельными, они более сложны, чем должны быть на стороне клиента, а код на стороне сервера, необходимый для его создания, в первую очередь, болеесложный.