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

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


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

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

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


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

I see no problem in using existing XHTML features without breaking anything or extending your namespace. Let's take a look at a small example:

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

How to add additional information to some_content without additional attributes? What about adding another tag like the following?

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

It keeps the relation via a well defined id/extension "_extended" of your choice and by its position in the hierarchy. I often use this approach together with jQuery and without actually using Ajax like techniques.

Нет. Попробуйте вместо этого что-нибудь вроде этого:

<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>

Внедрите данные в дом и используйте метаданные для 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!');

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

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

Кроме того, примите во внимание следующее:

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

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

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

Вот метод, который я использовал недавно:

<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

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

РЕДАКТИРОВАТЬ :

Основные преимущества этого метода:

• Легко реализовать
• Разве не делает недействительным 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;

    };

})();

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

Для большего количества общедоступных страниц я использую атрибут «rel» и выгружаю все свои данные туда в JSON, а затем декодирую это с помощью MooTools или jQuery:

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

В последнее время я пытаюсь придерживаться атрибута данных HTML 5 просто для «подготовки», но это еще не пришло само собой.

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

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

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

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

например 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 { }

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

Мы создали веб-редактор, который понимает подмножество HTML - очень строгое подмножество (понимающее почти повсеместно почтовыми клиентами). Нам нужно выразить такие вещи, как в базе данных, но у нас не может быть этого в DOM, иначе браузер, в котором запускается редактор, сходит с ума (или с большей вероятностью испугается, чем испугается из-за настраиваемых атрибутов). Нам требовалось перетаскивание, поэтому не было возможности помещать его исключительно в DOM, как и jquery .data () (дополнительные данные не копировались должным образом). Вероятно, нам также потребовались дополнительные данные для поездки в .html () .В конце концов мы остановились на использовании в процессе редактирования, а затем, когда мы все это POST, удалим width и выполните поиск и уничтожение регулярного выражения s / rs-width = / width = / g .

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

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

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

Например:

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"/>