Як зберігати довільні дані для деяких тегів HTML

Я створюю сторінку, яка має деяку взаємодію, яку забезпечує JavaScript. Як приклад: посилання, які надсилають запит AJAX, щоб отримати вміст статей, а потім відобразити ці дані у діві. Очевидно, що в цьому прикладі мені потрібно кожне посилання, щоб зберігати додатковий біт інформації: ідентифікатор статті. Як я поводився з ним у випадку, коли я ставлю цю інформацію у href посилання на це:

<a class="article" href="#5">

Потім я використовую jQuery, щоб знайти елементи a.article і приєднати відповідний обробник подій. (не зациклюйтесь на зручності чи семантиці тут, це лише приклад)

У будь-якому випадку цей метод працює, але він трохи пахне і зовсім не розширюється (що відбувається, якщо функція клацання має більше одного параметра? Що робити, якщо деякі з цих параметрів необов’язкові?)

Одразу очевидною відповіддю було використання атрибутів на елементі. Я маю на увазі, для чого вони потрібні, правда? (Типу).

<a articleid="5" href="link/for/non-js-users.html">

У своєму нещодавньому запитанні я запитав, чи цей метод є дійсним, і виявляється, що не визначено мого власного DTD (я не знаю), то ні, це не є дійсним або надійним. Поширеною відповіддю було введення даних у classатрибут (хоча це могло бути через мій погано вибраний приклад), але для мене це пахне ще більше. Так, це технічно справедливо, але це не чудове рішення.

Інший метод, який я використовував у минулому, полягав у тому, щоб фактично генерувати деякий JS та вставляти його на сторінку в <script>тег, створюючи структуру, яка асоціюється з об'єктом.

var myData = {
    link0 : {
        articleId : 5,
        target : '#showMessage'
        // etc...
    },
    link1 : {
        articleId : 13
    }
};

<a href="..." id="link0">

Але це може бути справжнім болем у задника, щоб підтримувати, і, як правило, дуже безладно.

Отже, щоб перейти до питання, як ви зберігаєте довільну частину інформації для тегів HTML ?

Яку версію HTML ви використовуєте?

У HTML 5 цілком справедливо мати власні атрибути з префіксом даних , наприклад

<div data-internalid="1337"></div>

У XHTML це насправді не вірно. Якщо ви перебуваєте в режимі XHTML 1.1, браузер, ймовірно, скаржиться на це, але в режимі 1.0 більшість браузерів просто мовчки ігнорують його.

Якби я був ти, я би дотримувався сценарію, заснованого на сценарії. Ви можете зробити це автоматично згенеровано на стороні сервера, щоб не було болю в спині для підтримки.

Якщо ви вже використовуєте jQuery, вам слід скористатися методом "data", який є рекомендованим методом для зберігання довільних даних на елементі dom з jQuery.

Щоб щось зберігати:

$('#myElId').data('nameYourData', { foo: 'bar' });

Щоб отримати дані:

var myData = $('#myElId').data('nameYourData');

Це все, що є, але подивіться документацію jQuery для отримання додаткової інформації / прикладів.

Ще один спосіб, я особисто не використовував би це, але це працює (запевняйте, що ваш JSON дійсний, оскільки eval () небезпечний).

<a class="article" href="link/for/non-js-users.html">
    <span style="display: none;">{"id": 1, "title":"Something"}</span>
    Text of Link
</a>

// javascript
var article = document.getElementsByClassName("article")[0];
var data = eval(article.childNodes[0].innerHTML);

Довільні атрибути не дійсні, але є абсолютно надійними в сучасних браузерах. Якщо ви встановлюєте властивості за допомогою JavaScript, вам також не доведеться турбуватися про перевірку.

Альтернативою є встановлення атрибутів у javascript. jQuery має приємний метод корисності саме для цієї мети, або ви можете прокатати свій власний.

Хак, який працюватиме з майже всіма можливими браузерами, - це використовувати відкриті класи на зразок цього: <a class='data\_articleid\_5' href="link/for/non-js-users.html>;

Це не все настільки елегантно для пуристів, але це універсально підтримується, відповідає стандартам і дуже легко маніпулювати. Це справді здається найкращим можливим методом. Якщо ви serialize, модифікуючи , копіюючи свої теги чи роблячи щось інше, dataзалишатиметься вкладеним, скопійованим тощо.

Єдина проблема полягає в тому, що ви не можете таким чином зберігати об'єкти, що не піддаються серіалізації , і можуть бути обмеження, якщо ви помістите туди щось дійсно величезне.

Другий спосіб - використання підроблених атрибутів, таких як:<a articleid='5' href="link/for/non-js-users.html">

Це більш елегантно, але зламає стандарт, і я не на 100% впевнений у підтримці. Багато браузерів підтримують його повністю, я думаю, що IE6 підтримує JSдоступ до нього, але це не так CSS selectors(що насправді тут не має значення), можливо, деякі браузери будуть повністю заплутані, вам потрібно це перевірити.

Робити такі смішні речі, як серіалізація та десяриалізація, було б ще небезпечніше.

Використання idsчистого JSхешу в основному працює, за винятком випадків, коли ви намагаєтесь скопіювати свої теги. Якщо у вас є tag <a href="..." id="link0">, скопіюйте його за допомогою стандартних JSметодів, а потім спробуйте змінити dataдодану лише одну копію, інша копія буде змінена.

Це не проблема, якщо ви не копіюєте tags або не використовуєте лише дані для читання . Якщо ви скопіюєте tags та вони модифікуються, вам потрібно буде обробити це вручну.

Використовуючи jquery,

зберігати: $('#element_id').data('extra_tag', 'extra_info');

щоб отримати: $('#element_id').data('extra_tag');

Я знаю, що ви зараз використовуєте jQuery, але що робити, якщо ви визначили обробник onclick inline. Тоді ви могли б зробити:

 <a href='/link/for/non-js-users.htm' onclick='loadContent(5);return false;'>
     Article 5</a>

Ви можете використовувати приховані вхідні теги. Я не отримую помилок перевірки на w3.org з цим:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang='en' xml:lang='en' xmlns='http://www.w3.org/1999/xhtml'>
  <head>
    <meta content="text/html;charset=UTF-8" http-equiv="content-type" />
    <title>Hello</title>
  </head>
  <body>
    <div>
      <a class="article" href="link/for/non-js-users.html">
        <input style="display: none" name="articleid" type="hidden" value="5" />
      </a>
    </div>
  </body>
</html>

За допомогою jQuery ви отримаєте ідентифікатор статті з чимось на зразок (не перевірено):

$('.article input[name=articleid]').val();

Але я б рекомендував HTML5, якщо це варіант.

Чому б не використовувати значущі дані вже там, а не додавати довільні дані?

тобто використовувати <a href="https://stackoverflow.com/articles/5/page-title" class="article-link">, і тоді ви можете програмно отримати всі посилання статті на сторінці (через ім'я класу) та ідентифікатор статті (що відповідає регексу /articles\/(\d+)/проти this.href).

Як користувач jQuery я використовував би плагін Metadata . HTML виглядає чистим, він підтверджує, і ви можете вбудовувати все, що можна описати, використовуючи позначення JSON.

Тому для цього має бути чотири варіанти:

1. Помістіть дані в атрибут id.
2. Помістіть дані в довільний атрибут
3. Помістіть дані в атрибут класу
4. Помістіть свої дані в інший тег

http://www.shanison.com/?p=321

Я виступаю за використання атрибута "rel". XHTML перевіряє, сам атрибут використовується рідко, і дані ефективно отримуються.

Це хороша порада. Завдяки @Prestaul

Якщо ви вже використовуєте jQuery, вам слід скористатися методом "data", який є рекомендованим методом для зберігання довільних даних на елементі dom з jQuery.

Дуже вірно, але що робити, якщо ви хочете зберігати довільні дані у звичайному старому HTML? Ось ще одна альтернатива ...

<input type="hidden" name="whatever" value="foobar"/>

Введіть свої дані в атрибути імені та значення прихованого вхідного елемента. Це може бути корисно, якщо сервер генерує HTML (наприклад, скрипт PHP чи будь-який інший), і ваш код JavaScript буде використовувати цю інформацію пізніше.

Справді, не найчистіший, але це альтернатива. Він сумісний з усіма браузерами і є дійсним XHTML. НЕ слід використовувати спеціальні атрибути, а також не використовувати атрибути з префіксом 'data-', оскільки це може працювати не у всіх браузерах. Крім того, ваш документ не пройде перевірку W3C.

Ви можете використовувати префікс даних власного виготовленого атрибута випадкового елемента (<span data-randomname="Data goes here..."></span> ), але це дійсно лише в HTML5. Таким чином, браузери можуть скаржитися на дійсність.

Ви також можете використовувати <span style="display: none;">Data goes here...</span> тег. Але таким чином ви не можете використовувати функції атрибутів, і якщо css і js вимкнено, це теж насправді не акуратне рішення.

Але я особисто віддаю перевагу наступному:

<input type="hidden" title="Your key..." value="Your value..." />

Вхід у всіх випадках буде прихованим, атрибути є повністю дійсними, і він не буде надісланий, якщо він знаходиться в <form>тезі, оскільки він не отримав жодного імені, правда? Перш за все, атрибути дійсно легко запам'ятовуються, і код виглядає приємно і легко зрозуміти. Ви навіть можете помістити в нього атрибут ID, щоб ви могли легко отримати доступ до нього також і JavaScript та отримати доступ до пари ключ-значення input.title; input.value.

Однією з можливостей може бути:

• Створіть новий div для зберігання всіх розширених / довільних даних
• Зробіть щось для того, щоб цей div був невидимим (наприклад, CSS плюс атрибут класу div)
• Помістіть розширені / довільні дані в [X] HTML-теги (наприклад, як текст у клітинках таблиці або що-небудь інше, що вам може сподобатися) в цей невидимий роздільник

Іншим підходом може бути збереження пари ключ: значення як простого класу, використовуючи наступний синтаксис:

<div id="my_div" class="foo:'bar'">...</div>

Це дійсно і його можна легко отримати за допомогою селекторів jQuery або на замовлення.

У мого попереднього роботодавця ми весь час використовували власні теги HTML, щоб містити інформацію про елементи форми. Улов: Ми знали, що користувач змушений використовувати IE.

У той час це не добре працювало для FireFox. Я не знаю, FireFox змінив це чи ні, але пам’ятайте, що додавання власних атрибутів до елементів HTML може або не може підтримуватися браузером вашого читача.

Якщо ви можете керувати, який браузер використовує ваш читач (тобто внутрішній веб-аплет для корпорації), то, будь-ласка, спробуйте. Що може нашкодити, правда?

Ось як я роблю вам сторінки на ajax ... це досить простий метод ...

    function ajax_urls() {
       var objApps= ['ads','user'];
        $("a.ajx").each(function(){
               var url = $(this).attr('href');
               for ( var i=0;i< objApps.length;i++ ) {
                   if (url.indexOf("/"+objApps[i]+"/")>-1) {
                      $(this).attr("href",url.replace("/"+objApps[i]+"/","/"+objApps[i]+"/#p="));
                   }
               }
           });
}

Як це працює, це, в основному, розглядає всі URL-адреси, які мають клас 'ajx', і він замінює ключове слово і додає знак # ... тому, якщо js вимкнено, тоді URL-адреси діятимуть так, як вони зазвичай роблять ... все " програми "(у кожному розділі сайту) є своє ключове слово ... тому все, що мені потрібно зробити, - це додати до js масиву вище, щоб додати більше сторінок ...

Так, наприклад, мої поточні налаштування встановлені на:

 var objApps= ['ads','user'];

Тож якщо у мене є такий URL, як:

www.domain.com/ads/3923/bla/dada/bla

скрипт js замінить / ads / part, щоб моя URL-адреса виявилася

www.domain.com/ads/#p=3923/bla/dada/bla

Тоді я використовую плагін jquery bbq для завантаження сторінки відповідно ...

http://benalman.com/projects/jquery-bbq-plugin/

Я виявив, що плагін метаданих є прекрасним рішенням проблеми зберігання довільних даних за допомогою тегу html таким чином, що дозволяє легко отримати та використовувати за допомогою jQuery.

Важливо : Фактичний файл, який ви включаєте, становить лише 5 кб, а не 37 кб (що є розміром повного пакета завантаження)

Ось приклад його використання для зберігання значень, які я використовую під час генерації події відстеження аналітики google (зверніть увагу: data.label та data.value трапляються як необов'язкові параметри)

$(function () {
    $.each($(".ga-event"), function (index, value) {
        $(value).click(function () {
            var data = $(value).metadata();
            if (data.label && data.value) {
                _gaq.push(['_trackEvent', data.category, data.action, data.label, data.value]);
            } else if (data.label) {
                _gaq.push(['_trackEvent', data.category, data.action, data.label]);
            } else {
                _gaq.push(['_trackEvent', data.category, data.action]);
            }
        });
    });
});

<input class="ga-event {category:'button', action:'click', label:'test', value:99}" type="button" value="Test"/>

У html ми можемо зберігати власні атрибути з префіксом 'data-' перед назвою атрибута

<p data-animal='dog'>This animal is a dog.</p>. Перевірити документацію

Ми можемо використовувати цю властивість для динамічного встановлення та отримання атрибутів за допомогою jQuery, наприклад: Якщо у нас є тег ap, як

<p id='animal'>This animal is a dog.</p>

Потім, щоб створити атрибут під назвою "порода" для вищевказаного тегу, ми можемо написати:

$('#animal').attr('data-breed', 'pug');

Щоб отримати дані будь-коли, ми можемо написати:

var breedtype = $('#animal').data('breed');

Поки ви фактично працюєте на стороні, навіщо вам потрібна спеціальна інформація у тегах html у висновку? все, що вам потрібно знати на сервері, - це індекс будь-якого виду списку структур із вашою власною інформацією. Я думаю, ви шукаєте, щоб зберегти інформацію в неправильному місці.

Я визнаю, як не прикро, що в багатьох випадках правильне рішення не є правильним рішенням. У такому випадку я настійно пропоную створити javascript для збереження додаткової інформації.

Через багато років:

Це запитання було розміщено приблизно за три роки до того, як data-...атрибути стали дійсним варіантом із появою html 5, тому правда змінилася, і первісна відповідь, яку я дав, вже не актуальна. Тепер я б запропонував використовувати атрибути даних замість цього.

<a data-articleId="5" href="link/for/non-js-users.html">

<script>
    let anchors = document.getElementsByTagName('a');
    for (let anchor of anchors) {
        let articleId = anchor.dataset.articleId;
    }
</script>