Настраиваемые атрибуты - да или нет?

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

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

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

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

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

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

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

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


javascript html xhtml custom-attribute
person TM.    schedule 14.06.2009    source источник
comment
Честно говоря, моя первоначальная позиция такова, что они не такая уж плохая вещь, что может вызвать споры у пуристов. Я чувствую, что мне действительно нужно сесть и оценить все доступные варианты, чтобы правильно подкрепить это, однако, таким образом, мне нужно написать длинное эссе.   -  person Paolo Bergantino    schedule 14.06.2009
comment
Для этого вам может понадобиться лишь несколько контрпримеров: того, что вы пытаетесь реализовать, как это удобно делать с помощью настраиваемых атрибутов и почему это решение лучше и не хуже, чем другие решения без настраиваемых атрибутов.   -  person ChrisW    schedule 14.06.2009
comment
@ChrisW Я спрашиваю в основном из интереса, а не из какого-то конкретного приложения.   -  person TM.    schedule 14.06.2009
comment
Что ж, есть много вариантов для получения данных на стороне клиента: скрытые поля ввода, скрытые списки определений, классы, плагины метаданных, наличие огромного словаря (объекта) Javascript со всем отображением данных отдельно, настраиваемые атрибуты, атрибуты данных ( HTML5) и т. Д. Я хочу изучить все это, рассмотреть их достоинства и недостатки и, наконец, прийти к выводу. Этот пост наконец заставил меня начать писать это. :) Должно быть сделано где-то до 2010 года.   -  person Paolo Bergantino    schedule 14.06.2009
comment
@Paolo Я в той же лодке, я могу придумать МНОГО альтернатив, но ничто не выделяется как лучшее. Я бы хотел что-то, что # 1 легко понять для коллег, # 2 чистый / чистый код при динамическом рендеринге на стороне сервера (например, в JSP), # 3 чистый / чистый для работы на стороне клиента (в javascript ). Честно говоря, спецификации W3C для меня не так важны, как ремонтопригодность / надежность.   -  person TM.    schedule 14.06.2009
comment
Этот вопрос очень похож на следующий: stackoverflow.com/questions/432174 и этот stackoverflow.com/questions/209428 - поскольку на все они есть много хороших ответов, я предлагаю объединить их ... как это сделать?   -  person nickf    schedule 15.06.2009
comment
@Paolo, вы не можете просто сказать, что написали эссе, отвечая на этот вопрос, не дав нам ссылку. Не круто.   -  person Connell    schedule 04.11.2011
comment
Вот как установить и получить эти переменные с помощью JavaScript developer.mozilla. .org / en-US / docs / Web / Guide / HTML /   -  person Harijs Krūtainis    schedule 13.12.2016
comment
Возможный дубликат нестандартных атрибутов на HTML-теги. Хорошая вещь? Плохо? Ваши мысли?   -  person BuZZ-dEE    schedule 06.09.2017

Ответы (14)


arrow_upward
256
arrow_downward

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

person Chuck    schedule 14.06.2009
comment
Это хороший подход .. Но я сомневаюсь, что он сработает, если вам придется поддерживать IE 6 и другие старые браузеры. - person cllpse; 14.06.2009
comment
Я почти уверен, что он работает со старыми браузерами; атрибуты добавляются в DOM, где вы можете получить к ним доступ. - person Ms2ger; 14.06.2009
comment
Он отлично работает со всеми браузерами, использующими метод getAttribute () для HTMLElement. Кроме того, по мере роста поддержки набора данных HTML5 вы можете легко добавить его. - person ajm; 14.06.2009
comment
HTML5 не является стандартом. Кроме того, HTML 4.01 позволяет настраивать атрибуты. - person aehlke; 28.08.2009
comment
@Wahnfrieden: Во-первых, я не думаю, что секутся волосы. Во-вторых, я не вижу нигде в спецификации HTML 4.01, которая специально допускает настраиваемые атрибуты. Не могли бы вы уточнить, где это разрешено? - person Chuck; 28.08.2009
comment
@Chuck, по-видимому, вы можете добавить атрибуты в DOCTYPE: rodsdot.com/html/ - не то чтобы я думаю, что это хорошая идея, но кажется стандартизированной. - person Michael Stum; 22.07.2010
comment
@Wahnfrieden: w3.org/TR/REC -html40 / intro / sgmltut.html # idx-attribute-8, который является утвержденным и совместимым со стандартами методом. Что хорошо описано и продемонстрировано здесь: rodsdot.com/html/ Как ранее было опубликовано другими. - person rdivilbiss; 02.11.2010

arrow_upward
96
arrow_downward

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

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

    };

})();
person James    schedule 14.06.2009
comment
Из любопытства, какой метод вы используете для самозакрывающихся тегов? Обычно мне нужно использовать что-то подобное для элементов ‹input› (чтобы помочь в правилах проверки на стороне клиента). Какую альтернативу вы выберете в этой ситуации? - person TM.; 17.06.2009
comment
Я бы, вероятно, использовал похожую технику, вместо привязки данных комментария к parentNode, он мог бы быть привязан к предыдущемуSibling комментария ... Тогда у вас может быть комментарий сразу после ‹input /›, и он будет работать: ‹input / ›‹! - {data: 123} - › - person James; 17.06.2009
comment
кто-то должен сделать это плагином jquery - person SeanDowney; 23.09.2009
comment
Было бы лучше использовать display:none, чем использовать тег комментария? Или, что еще лучше, создайте класс CSS, скажем data, в котором есть display:none, и просто ищите элементы с именем класса data. - person Thomas Eding; 22.07.2010
comment
Это должны быть самые интересные и впечатляющие ответы, которые я когда-либо видел на Stack Overflow. +1 Спасибо, @ J-P. :) - person βӔḺṪẶⱫŌŔ; 20.04.2011
comment
Я вижу, что это полезно, если вы хотите сохранить более сложный объект, но я обнаружил, что мне обычно требуется только одно или два свойства для выполнения вызова ajax для получения полного объекта. Из-за этого я не думаю, что буду использовать этот метод. - person asawilliams; 12.05.2011
comment
недостаточно jquery :) Шучу, это может быть полезно, если вы все еще не можете использовать (по какой-либо причине) html5 - person Marco A.; 27.03.2015
comment
Комментарии должны иметь возможность изменять / удалять, ничего не нарушая. В этом весь смысл. Так что помещать в комментарии что-нибудь важное из разметки или кода - плохая идея. Будущие разработчики могут легко подумать, что это комментарии, и удалить их. У нас уже есть реальное решение этого вопроса: настраиваемые атрибуты с префиксом data-. Такой подход никогда не следует использовать. - person MGOwen; 26.09.2016
comment
Позвольте мне усилить утверждение @MGOwen: не используйте комментарии для добавления функциональности. Специально в HTML. Разве вы не используете минификаторы? Вы не сможете удалять комментарии, не нарушив код. Это также означает, что вы больше не можете добавлять настоящие комментарии. - person Olivictor; 12.05.2017
comment
это невероятно, вы буквально изобрели настоящие атрибуты / аннотации, которые не ломаются в xhtml. Кроме того, комментарий не имеет значения, поскольку вы рассматриваете его как аннотацию, а не просто комментарий. Также вы не должны доверять минификаторам, если вы просто сохраняете комментарии и запускаете на них свой собственный препроцессор. - person Dmitry; 22.03.2018
comment
в отдельном примечании, вы должны просто использовать класс и сопоставить класс uuid с атрибутами, это должно быть дешевле в целом, чем вызов парсера - person Dmitry; 22.03.2018

arrow_upward
15
arrow_downward

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

Например:

Добавить

<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"/>
person BrunoLM    schedule 22.07.2010

arrow_upward
10
arrow_downward

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

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

e.g. 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 { }

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

person Jonathan Fingland    schedule 14.06.2009
comment
Хороший момент, но, честно говоря, тип действителен только для определенных тегов, и когда он является допустимым атрибутом, он также имеет список допустимых значений, поэтому вы все еще не совсем совместимы с w3c. - person TM.; 14.06.2009
comment
Я хотел сказать, что вы НЕ должны использовать для этого тег типа. следовательно, если бы вы были ... то вам следует ... Я отредактирую, чтобы было понятнее - person Jonathan Fingland; 14.06.2009
comment
Я стараюсь создавать атрибуты своего класса с ароматизаторами, добавляя к некоторым из них некоторый тип квалификатора-. для div, связанных только с макетом, у меня был бы класс layout-xxx, или для внутренних div, которые окружают важную часть, например книгу или магазин, у меня была бы книга контента или хранилище контента. то в моем JavaScript у меня есть функция, которая добавляет эти вещи в тег в зависимости от того, что я ищу. это помогает мне содержать вещи в чистоте и порядке, но требует определенного уровня дисциплины и предварительной организации. - person Ape-inago; 14.06.2009
comment
@ Ape-inago: альтернатива этому - просто получить элементы с обоими именами классов. например $ ('. content.store') (jquery) или $$ ('. content.store') (прототип). - person Jonathan Fingland; 14.06.2009
comment
@Jonathan, двойной класс отлично работает, за исключением случаев, когда «значения» неизвестны. Например, если это какой-то целочисленный идентификатор, мы не можем хорошо выбирать для каждого возможного случая. Затем нам остается разобрать атрибут класса вручную, что определенно работает, но не так ясно в коде, а в некоторых случаях может быть очень медленным (если есть много элементов-кандидатов для анализа). - person TM.; 14.06.2009
comment
@TM: для этого нужен атрибут id. В моем примере см. Bookstore12. Очевидно, это по-прежнему включает в себя извлечение чисел для идентификатора книжного магазина, но это не сложно. Выберите на основе имен классов и извлеките номера идентификаторов из атрибута id shock / horror. - person Jonathan Fingland; 14.06.2009
comment
@TM, если вам требуется более сложная информация, которая каким-то образом уникальна для каждого из них, вы, вероятно, делаете это неправильно. Если вы делаете это, чтобы предоставить информацию для запроса ajax, то что случилось с формой и входными данными из вашей версии, отличной от ajax? вы ведь поддерживаете этих людей? Предположительно, ваша форма, отличная от ajax, будет иметь все необходимые данные. Кража из этой формы (до ее замены с помощью javascript), очевидно, является самым простым способом получить эти данные. - person Jonathan Fingland; 14.06.2009
comment
К сожалению, одновременное написание css-селекторов для двух классов (.a.b, обратите внимание на отсутствующий пробел) не работает в IE. хотя он работает в Firefox и других браузерах. тем не менее, использование классов - отличный способ добавить в разметку дополнительное семантическое значение. - person knittl; 14.06.2009
comment
@knittl: это верно только до ie6 включительно. учитывая количество сайтов, прекращающих поддержку или планирующих в ближайшее время прекратить поддержку IE6, это действительно не является существенной проблемой. Конечно, все зависит от использования браузера вашими пользователями. Кто-то, работающий над сайтом, доступным только через интрасеть компании, где известно, что все (или многие) пользователи используют IE6, примет другое решение о поддержке браузером, чем кто-то, разрабатывающий последнее приложение Whiz-bang Web 2.0. - person Jonathan Fingland; 14.06.2009
comment
Это решение обрабатывает только «флаги», а не фактические данные. Как обрабатывать пары ключ-значение или сложные структуры данных? - person antony.trupe; 14.06.2009
comment
@anthony: какие-нибудь примеры, которые не описаны в публикации или моих комментариях к TM? - person Jonathan Fingland; 14.06.2009

arrow_upward
6
arrow_downward

Вставьте данные в дом и используйте метаданные для jQuery.

Все хорошие плагины поддерживают плагин метаданных (с возможностью выбора каждого тега).

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

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

OR

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

OR

<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!');
person antony.trupe    schedule 14.06.2009
comment
Повреждение атрибута класса при наличии одобренного W3C способа указания настраиваемых атрибутов, вероятно, является причиной вашего отказа. - person rdivilbiss; 19.10.2010
comment
повреждение атрибута класса - это только один способ использования плагина; это не единственный способ. - person antony.trupe; 22.01.2014
comment
Еще одна причина, по которой вас отклонили, - это предложение плагина, который вообще не нужен. - person meandre; 14.09.2016

arrow_upward
4
arrow_downward

Я не вижу проблем в использовании существующих функций 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.

person merkuro    schedule 14.06.2009
comment
Проблема с добавлением таких вложенных тегов заключается в том, что при этом создается ОЧЕНЬ громоздкий и уродливый серверный код (JSP / ASP / DTL и т. Д.). - person TM.; 14.06.2009

arrow_upward
4
arrow_downward

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

<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>
person Anon    schedule 14.06.2009
comment
Итак, вы предпочитаете писать много дополнительных тегов скрипта по всему документу для динамических страниц? Я бы использовал ручные назначения javascript, когда информация добавляется на стороне клиента, но эта проблема в основном связана с тем, что отображать на сервере. Кроме того, jQuery.data () намного лучше, чем ваш метод. - person TM.; 14.06.2009
comment
Ответ выше - это независимый от фреймворка, подробно описанный пример, демонстрирующий функциональность. Вы можете легко расширить его суть, чтобы сделать код довольно кратким. Например, ‹div id = foo /› ‹div id = bar /› ‹div id = baz /› ‹тип сценария = text / javascript› xtrnlFnc ({foo: 'w00 h00', bar: 'etc.', baz: 3.14159}); ‹/Script› Если вы используете jQuery (не то, чтобы вы упомянули об этом в своем исходном вопросе), во что бы то ни стало, используйте метод данных - вот для чего он нужен. В противном случае передача данных между архитектурными уровнями является вполне допустимым использованием встроенных тегов сценария. - person Anon; 14.06.2009
comment
Это определенно очевидный и действенный вариант. На мой взгляд, это просто загромождает код намного больше, чем множество других альтернатив, которые не используют настраиваемые атрибуты. И для ясности: я не пытаюсь быть агрессивным или грубым, я просто пытаюсь уловить некоторые из ваших аргументов, почему вы предпочитаете этот метод. Вы предложили альтернативу, но вопрос не в этом. - person TM.; 14.06.2009
comment
можем ли мы ожидать, что dom не запретит использование настраиваемых свойств? - person Ape-inago; 14.06.2009
comment
@ Ape-inago да, нет причин, по которым он должен блокироваться, если мы не используем имена, уже используемые браузером, другими библиотеками, надстройками firefox и т. Д. На самом деле вероятность проблем довольно низка, но добавление свойств непосредственно в такой элемент dom (а не подход карты) имеет небольшой риск. Однако эти же риски ТАКЖЕ существуют в настраиваемых атрибутах. - person TM.; 14.06.2009
comment
Я не думаю, что такой подход нарушает работу браузеров. Microsoft использует именно этот механизм в качестве предпочтительного механизма на страницах ASP.NET. (путем вызова RegisterExpandoAttribute на стороне сервера). Вопрос, кажется, сосредоточен на клиенте, а не на сервере, но на стороне сервера все эти подходы могут (должны быть?) Абстрагированы. - person Adrian; 15.06.2009
comment
Плюсы этого подхода: - Он производит допустимую разметку (даже в старых браузерах / спецификациях). --Это проясняет цель данных (которые будут использоваться JS). - Он связан с элементом без умного использования других функций (например, комментариев). - Не требует специального разбора. С точки зрения сервера вы можете думать об этом как о RPC. - person steamer25; 15.06.2009
comment
Сколько бы лет ни был этот ответ, я должен вас поблагодарить! Я одна из тех редких птиц, которым нравится поддерживать браузеры, по крайней мере, до последних версий, доступных для Win-XP, которые, к сожалению, включают IE8. Таким образом, я не могу использовать более новую строку функций setAttibute или популярный HTML 5 data-. Единственное, что, как я полагаю, мне нужно сделать, это использовать имена для элементов myProperty, которые имеют низкую вероятность конфликтов с существующим в будущем свойством. Не должно быть слишком сложно. :-) - person Randy; 17.09.2020

arrow_upward
2
arrow_downward

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

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

Также учтите это:

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

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

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

person ChrisW    schedule 14.06.2009

arrow_upward
1
arrow_downward

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

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

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

person Bernd Jendrissek    schedule 12.05.2010

arrow_upward
1
arrow_downward

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

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

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

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;
});
person agrublev    schedule 19.04.2017

arrow_upward
0
arrow_downward

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

< br /> Один из способов передать эти свойства из элемента управления в JavaScript - заставить элемент управления отображать настраиваемые свойства:

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

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


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

person cllpse    schedule 14.06.2009

arrow_upward
0
arrow_downward

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

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

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

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

person Ryan Florence    schedule 14.06.2009

arrow_upward
-1
arrow_downward

Я все время использую настраиваемые поля, например ‹a i =" ".... Затем обратитесь к i с помощью jquery. Неверный html, да. Хорошо работает, да.

person Marius    schedule 26.09.2015
comment
Похоже, здесь чего-то не хватает. Ваш тег здесь был заполнен? - person Stuart Siegler; 26.09.2015
comment
Как можно это понять? Пожалуйста, дополните свой ответ. - person Rahul Raj; 11.05.2020

arrow_upward
-2
arrow_downward

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

<div class='class1 class2 class3'>
    Lorem ipsum
</div>
person Alan Haggai Alavi    schedule 14.06.2009
comment
лично я считаю это ужасным примером. ваши имена классов определяют, как это выглядит, а не цель. Подумайте, когда вы захотите изменить все похожие div ... вам придется пойти и изменить их все на span-11 или что-то подобное. классы должны определять, что это ЕСТЬ. таблицы стилей должны определять, как эти вещи выглядят - person Jonathan Fingland; 14.06.2009
comment
Как бы вы использовали этот метод, чтобы указать больше, чем просто флаг? Я склонен согласиться с вашей позицией и не использую кастомные атрибуты (хотя я рассматриваю это). Преимущество наличия пары ключ / значение кажется немного более удобным, чем простое добавление еще одного класса. - person TM.; 14.06.2009
comment
@Jonathan Fingland: Если используется Compass, вам не нужно указывать здесь имена классов. Вы можете просто указать их в файле .sass, и ваша разметка будет чистой. - person Alan Haggai Alavi; 14.06.2009
comment
@Jonathan Fingland, атрибут class определенно не предназначен только для внешнего вида. Другое использование - это универсальная обработка пользовательскими агентами. Об этом говорится в спецификации: w3.org/ TR / REC-html40 / struct / global.html # h-7.5.2 - person npup; 14.09.2010
comment
@npup: интересный выбор цитат. Как я говорил более года назад, таблицы стилей определяют, как эти вещи должны выглядеть (как и атрибут стиля, который я добавлю), а атрибут class используется для определения цели элемента. То есть он специально используется для определения того, что это такое, а не того, как это ВЫГЛЯДИТ. Я думаю, что вы, возможно, просто неправильно прочитали то, что я сказал, поскольку мы согласны, насколько я могу судить. - person Jonathan Fingland; 14.09.2010
comment
@Jonathan Fingland, я читал это: ваши имена классов определяют, как это выглядит, а не цель. Извините, что неверно истолковал. Но, возможно, я не единственный, кто это сделал, поэтому, возможно (поскольку мы, похоже, согласны) то, что я написал, можно считать разъяснением для остальных из нас. - person npup; 14.09.2010
comment
@npup: ааа, это может быть как-то связано со значительной правкой автора. Раньше говорилось: <div class='span-12 bold bordered'>. В то время смысл был яснее. - person Jonathan Fingland; 14.09.2010