Скрытые входы и атрибуты данных HTML5

Ответ 1

Одним из основных недостатков является доступность.

Поскольку эти атрибуты не отправляются на сервер в POST, вам нужно иметь в виду, что происходит в браузерах с отключенным JavaScript. Если ваша страница также должна быть грамотно деградирована и выполнять те же функции, запрашиваемые AJAX, при необходимости, используя традиционные формы, скрытое поле по-прежнему будет необходимо.

Тем не менее, я большой поклонник атрибутов данных, когда они имеют смысл, особенно на сайтах строго "приложений", где вы можете спокойно указывать JavaScript. Гораздо лучше пометить строку таблицы атрибутом идентификатора данных, например, скрытым полем в одной из его ячеек. Особенно в сочетании с хорошей поддержкой атрибутов jQuery для метода .data(), который делает чистый, интуитивно понятный код в ситуациях, когда скрытые поля могут быть немного грязными.

Ответ 2

Вот мой прием:

• Скрытые input предназначены для использования в формах как способ передачи данных обратно на сервер, не делая их видимыми или редактируемыми на странице.
• Атрибуты предназначены для описания свойства элемента. data- предназначены для передачи информации об элементе JavaScript на странице.

Исходя из этого, атрибут data- в элементе html или body представляется наиболее подходящим.

Альтернативным, хотя и менее смысловым, решением является сериализация метаданных вашей страницы как JSON и использование тега script, чтобы установить его как глобальную переменную на странице. Вы можете увидеть это в действии, например, репозитории GitHub, где глобальный объект GitHub создается в верхней части страницы, а некоторые информация (имя репо, текущая ветвь, последняя фиксация) добавляется к ней для легкого доступа.

Ответ 3

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

Как указывали другие, атрибуты Data предназначены для хранения данных в самой DOM, и до HTML5 были разные способы обойти эту потребность, используя скрытые вложенные в DOM вложения или используя другие атрибуты.

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

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

Итак, вот набор рекомендаций, которые я задал себе, когда речь идет о выборе между скрытыми вводами и атрибутами данных.

• Выберите атрибуты данных, когда данные предназначены только для интерфейса функциональность (нет необходимости отправлять обратно)
• Выберите атрибуты данных, когда вам нужны данные большого масштаба для хранения (пример: координата графа, большие списки с несколькими параметры)
• Выберите скрытые входы при хранении больших фрагментов данных или данных с помощью специальные символы

Ответ 4

Поскольку атрибуты данных новы, я не думаю, что существует реальный консенсус относительно того, когда они подходят или какие лучшие практики. Мое личное чувство, если они имеют большой смысл, когда вы прикрепляете данные к элементам DOM дальше на странице, потому что они логически согласуются с этими элементами DOM. Когда вы смотрите на их использование в теге body, мне интересно, почему вы не сохраняете эти значения в обычных переменных javascript. Я подозреваю, что у вас будет более высокая производительность с использованием обычных переменных javascript. Все эти переменные будут легко просматриваться в Firebug и т.д., Поэтому маловероятно, что в этом смысле он более или менее безопасен.

Что касается начального состояния страницы, похоже, вы могли бы, вероятно, поместить переменную javascript прямо на страницу, а не в скрытое поле с тем, как вы ее используете. Если вы отправляете форму на сервер, скрытый элемент может быть полезен там, вот для чего скрыты скрытые элементы.

Его хороший открытый вопрос относительно того, какие лучшие практики на этом.

Ответ 5

основываясь на том, как вы используете "id" для идентификации страницы, возможно, было бы лучше разместить идентификатор в URL-адресе

как http://www.example.com/page/123

где 123 - id

Ответ 6

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

В основном атрибут данных был создан для добавления дополнительной информации к элементам DOM, которые не могут быть привязаны к нему другими существующими атрибутами, такими как класс или старый добрый идентификатор.

Это затрагивает в основном веб-приложения или, более конкретно, Saas, для которых потребность в атрибутах, управляемых данными, намного более обширна, чем обычный веб-сайт (даже с CMS за ним).

Раньше я мечтал об этом атрибуте много лет назад, когда у вас было только 2 варианта:

• Используйте атрибуты html для чего-то, чего мы не знаем изначально созданный или разработанный
• Используйте атрибуты html с токенами в них, чтобы их декодировать с клиентской или серверной функцией (разделение, сращивание, взорвание).

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

Html - это язык разметки, поэтому он, естественно, не имеет атрибутов, управляемых данными с которыми вы не можете работать, чтобы обрабатывать обработку и поведение данных.

Основным сценарием, который у меня был, является то, что я хотел иметь один jQuery Dialog для загрузки всех форм ввода данных (клиентов, продуктов, поставщиков и т.д.) Каждая форма имеет разную ширину и высоту. Таким образом, клиентская сторона script будет намного меньше, и мне нужно будет добавить новый диалог для каждой новой формы, которая была бы добавлено в приложение, запрошенное клиентом.

Вот как я это делал до появления атрибута данных:

Нажмите, чтобы добавить новый продукт

В марке id у меня было 3 значения:

• Форма, загружаемая с сервера
• Ширина диалогового окна
• Высота диалогового окна

Другим подходом было бы использовать атрибут href, но это намного хуже, чем использование id просто потому, что атрибут href предназначен для указания элемента DOM или другого источника, а не для хранения данных, которые нужно обработать.

Один из подходов включает разбиение токена с использованием split или аналогичной функции.

Вот как я делаю это сейчас с удивительным атрибутом данных:

Нажмите, чтобы добавить новый продукт

Таким образом, мне не нужен токен, я могу просто получить каждое значение атрибута с хорошим старым $(this).attr('data-form');, $(this).attr('data-dwith'); и т.д.

IMHO Я думаю, что лучше добавить немного дополнительных данных в элементы html, чем создавать гораздо более длинный файл javascript, таким образом, более тяжелый и сложный.