Пользовательские атрибуты - да или нет?

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

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

Кажется, что это действительно может упростить и серверный и клиентский код, но он также не совместим с W3C.

должны ли мы использовать пользовательские атрибуты HTML в наших веб-приложениях? Почему или почему нет?

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

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

обновление: меня больше всего интересует мышление за различными методами, а также как указывает на то, почему один метод лучше другого. Я думаю, что мы все можем придумать 4-5 разных способов добиться одного и того же. (скрытые элементы, встроенные скрипты, дополнительные классы, анализ информации из идентификаторов и т. д.).

обновление 2: кажется, что HTML 5 data- функция атрибута имеет большую поддержку здесь (и я склонен согласиться, это выглядит как твердый вариант). До сих пор я не видел много опровержений для этого предложения. Есть ли какие-либо проблемы/подводные камни беспокоиться об использовании этого подхода? Или это просто "безвредное" аннулирование текущих спецификаций W3C?

246
custom-attribute html javascript xhtml

14 ответов

HTML 5 явно разрешает пользовательские атрибуты, начинающиеся с data. Так, например, <p data-date-changed="Jan 24 5:23 p.m.">Hello</p> действителен. Поскольку он официально поддерживается стандартом, я думаю, что это лучший вариант для пользовательских атрибутов. И это не требует от вас перегрузки других атрибутов с помощью хаков, поэтому ваш HTML может оставаться семантическим.

источник: http://www.w3.org/TR/html5/dom.html#embedding-custom-non-visible-data-with-the-data-*-attributes

245

вот техника, которую я использовал в последнее время:

<div id="someelement">

    <!-- {
        someRandomData: {a:1,b:2},
        someString: "Foo"
    } -->

    <div>... other regular content...</div>
</div>

объект комментария связывается с родительским элементом (т. е. #someelement).

вот парсер: http://pastie.org/511358

чтобы получить данные для любого конкретного элемента, просто вызовите parseData со ссылкой на этот элемент передается как единственный аргумент:

var myElem = document.getElementById('someelement');

var data = parseData( myElem );

data.someRandomData.a; // <= Access the object staight away

это может быть более кратким, чем что:

<li id="foo">
    <!--{specialID:245}-->
    ... content ...
</li>

доступ к нему:

parseData( document.getElementById('foo') ).specialID; // <= 245

единственным недостатком использования этого является то, что он не может использоваться с самозакрывающимися элементами (например,<img/>), так как комментарии должны быть внутри элемент, который следует рассматривать как данные этого элемента.

редактировать:

заметные преимущества этой техники:

  • легко реализовать
  • тут не недействительным HTML / XHTML
  • простота в использовании / понимании (базовая нотация JSON)
  • ненавязчиво и семантически чище, чем большинство альтернатив

вот код парсера (скопированный из http://pastie.org/511358 гиперссылка выше, если она когда-либо станет недоступной на pastie.org):

var parseData = (function(){

    var getAllComments = function(context) {

            var ret = [],
                node = context.firstChild;

            if (!node) { return ret; }

            do {
                if (node.nodeType === 8) {
                    ret[ret.length] = node;
                }
                if (node.nodeType === 1) {
                    ret = ret.concat( getAllComments(node) );
                }
            } while( node = node.nextSibling );

            return ret;

        },
        cache = [0],
        expando = 'data' + +new Date(),
        data = function(node) {

            var cacheIndex = node[expando],
                nextCacheIndex = cache.length;

            if(!cacheIndex) {
                cacheIndex = node[expando] = nextCacheIndex;
                cache[cacheIndex] = {};
            }

            return cache[cacheIndex];

        };

    return function(context) {

        context = context || document.documentElement;

        if ( data(context) && data(context).commentJSON ) {
            return data(context).commentJSON;
        }

        var comments = getAllComments(context),
            len = comments.length,
            comment, cData;

        while (len--) {
            comment = comments[len];
            cData = comment.data.replace(/\n|\r\n/g, '');
            if ( /^\s*?\{.+\}\s*?$/.test(cData) ) {
                try {
                    data(comment.parentNode).commentJSON =
                        (new Function('return ' + cData + ';'))();
                } catch(e) {}
            }
        }

        return data(context).commentJSON || true;

    };

})();
95

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

например:

Addthis

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:addthis="http://www.addthis.com/help/api-spec">
...
<a addthis:title="" addthis:url="" ...>

Facebook (даже теги)

<html xmlns:og="http://opengraphprotocol.org/schema/" xmlns:fb="http://www.facebook.com/2008/fbml">
...
<fb:like href="http://developers.facebook.com/" width="450" height="80"/>
15

самый простой способ избежать использования пользовательских атрибутов-использовать существующие атрибуты.

используйте значимые, соответствующие имена классов.
Например, сделайте что-то вроде: type='book' и type='cd', представлять книги и компакт-диски. Классы намного лучше для представления чего-то IS.

например class='book'

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

чтобы дать более конкретный пример, Предположим, у вас есть сайт, дающий ссылки на различные виды магазинов. Вы можете использовать следующее:

<a href='wherever.html' id='bookstore12' class='book store'>Molly's books</a>
<a href='whereverelse.html' id='cdstore3' class='cd store'>James' Music</a>

CSS стиль можно использовать такие классы, как:

.store { }
.cd.store { }
.book.store { }

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

10

встроить данные в dom и использовать метаданных на jQuery.

все хорошие Плагины поддерживают плагин метаданных (позволяя параметры тегов).

Он также позволяет бесконечно сложные структуры данных/данных, а также пары ключ-значение.

<li class="someclass {'some': 'random,'json':'data'} anotherclass">...</li>

или

<li class="someclass" data="{'some':'random', 'json': 'data'}">...</li>

или

<li class="someclass"><script type="data">{"some":"random","json":"data"}</script> ...</li>

затем получить данные вот так:

var data = $('li.someclass').metadata();
if ( data.some && data.some == 'random' )
alert('It Worked!');
6

Я не вижу проблем в использовании существующих функций XHTML без нарушения чего-либо или расширения пространства имен. Давайте рассмотрим небольшой пример:

<div id="some_content">
 <p>Hi!</p>
</div>

Как добавить дополнительную информацию в some_content без дополнительных атрибутов? Как насчет добавления следующего тега?

<div id="some_content">
 <div id="some_content_extended" class="hidden"><p>Some alternative content.</p></div>
 <p>Hi!</p>
</div>

он сохраняет отношение через хорошо определенный идентификатор / расширение "_extended" по вашему выбору и по его положению в иерархии. Я часто использую этот подход вместе с jQuery и без фактического использования Ajax - подобных методов.

4

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

в качестве альтернативы пользовательским атрибутам, в основном я нахожу атрибуты id и class (например, как упоминалось в других ответах) достаточными.

кроме того, рассмотрим следующее:

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

  • Если он не должен быть читаемым человеком, то, возможно, его можно закодировать с помощью невидимка HTML-теги и текст.

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

2

нет. Попробуйте что-то вроде этого:

<div id="foo"/>

<script type="text/javascript">
  document.getElementById('foo').myProperty = 'W00 H00! I can add JS properties to DOM nodes without using custom attributes!';
</script>
1

мы создали веб-редактор, который понимает подмножество HTML - очень строгое подмножество (которое понимается почти повсеместно почтовыми клиентами). Нам нужно выразить такие вещи, как <td width="@INSWIDTH_42@"> в базе данных, но мы не можем иметь это в DOM, иначе браузер, в котором работает редактор, сходит с ума (или скорее сходит с ума, чем сходит с ума по пользовательским атрибутам). Мы хотели перетащить и падение, поэтому положить его чисто в DOM было вне, как и jQuery .data() (дополнительные сведения не скопировали должным образом). Нам, вероятно, также нужны были дополнительные данные, чтобы приехать для поездки в .html(). В конце концов мы остановились на использовании <td width="1234" rs-width="@INSWIDTH_42@"> во время процесса редактирования, а затем, когда мы публикуем все это, мы удаляем width и выполните регулярное выражение search-and-destroy s/rs-width=/width=/g.

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

Лично Мне предпочитаю иметь вещи чистыми и проходить валидаторы etc., но как сотрудник компании я должен помнить, что моя основная ответственность заключается в продвижении дела компании (как можно больше денег как можно быстрее), а не в моем эгоистическое стремление к технической чистоте. Инструменты должны работать на нас, а не мы на них.

1

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

<a href="test.html" mine-one="great" mine-two="awesome">Test</a>

затем вы можете запустить этот код, чтобы вернуть объект так же, как jquery.данных() делает.

var custom_props = {} ;
$.each($(".selector")[0].attributes, function(i,x) {
    if (this.specified && x.name.indexOf("mine-") !== -1) 
        self.new_settings[x.name.replace("modal-","")] = x.value;
});
1

Spec:создать ASP.NET элемент управления TextBox, который динамически автоматически форматирует свой текст как число, согласно свойствам "DecimalSeparator" и "ThousandsSeparator", используя JavaScript.


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

<input type="text" id="" decimalseparator="." thousandsseparator="," />

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


Я!--14-->только используйте этот подход, когда я хочу связать простые типы, такие как строки и целые числа, с элементами HTML для использования с JavaScript. Если я хочу упростить идентификацию HTML-элементов, я буду использовать класс и id свойства.

0

Я использую настраиваемые поля все время, например

0

для сложных веб-приложений я отбрасываю пользовательские атрибуты повсюду.

для более открытых страниц я использую атрибут " rel " и сбрасываю все свои данные в JSON, а затем декодирую его с помощью MooTools или jQuery: 

<a rel="{color:red, awesome:true, food: tacos}">blah</a>

Я пытаюсь придерживаться атрибута данных HTML 5 в последнее время только для "подготовки", но он еще не пришел естественным образом.

0

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

<div class='class1 class2 class3'>
    Lorem ipsum
</div>
-2