Используете пользовательские атрибуты HTML для целей JavaScript?

Вы должны использовать классы и идентификаторы как для javascript, так и для CSS. Ваш коллега не прав.

Это помогает помнить, что вы хотите сохранить разделение между данными (html), презентацией (стили css) и поведением (javascript). Классы и идентификаторы существуют не просто так, а не для стилизации (и не для javascript!). Они нужны для того, чтобы вы могли семантически разметить документ.

При написании правильного HTML ваши классы и идентификаторы должны отражать фактическое содержание и назначение данных, содержащихся в этих узлах. Затем, когда вам нужно стилизовать их, вы можете указать правильный стиль, скажем, для класса .zip_code. А когда вам нужно особое поведение, вы можете использовать javascript, чтобы применить требуемое поведение к элементам списка .deletable.

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

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

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

Однако в HTML5 вы можете использовать настраиваемые атрибуты, начинающиеся с data-. Подробнее о них можно прочитать на веб-сайте html5doctor. Атрибуты data-, однако, чаще рекомендуются для хранения информации, а не меток. например для продукта вы могли бы сказать data-brand="gucci". Или что-то.

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

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

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

<script>
    function getIt(){
   ob = document.getElementById('myid') 
    alert(ob.getAttributeNode('anotherTitle').value)

    }
</script>
<div id="myid" class="cssClasses" anotherTitle="new Title">The div</div>
<a href="javascript:getIt()">Test</a>

Я использовал атрибут AnotherTitle для сохранения или хранения другого набора данных, в котором он может быть использован в другом случае. Это рабочий пример http://jsfiddle.net/vxknh/.

Ссылка: http://www.w3schools.com/jsref/prop_attr_value.asp

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

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

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

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

Классы — они были разработаны для передачи информации о стилях, но с появлением jQuery теперь они имеют двойное назначение, иногда обозначая действие (или данные), а иногда — стиль. Это довольно запутанно, особенно в крупномасштабных проектах. Представьте, что дизайнер пытается «рефакторить» CSS и меняет имена этих классов на элементах, к которым подключены javascript/jQuery — в результате возникают плохие вещи. Вы можете смягчить это префикс ваших имен классов без стиля с помощью «пространства имен», такого как «.donttouchthis-jqueryclass», который отличает логику от представления, является очень примитивным способом. Преимущество использования класса заключается в том, что его можно «складывать», поэтому он может передавать более сложную «логику», чем, например, идентификатор. С точки зрения чистого javascript (без jQuery) зависимость от классов в вашем коде приводит к некоторым проблемам обратной совместимости (getElementsByClassName).

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

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

Пользовательские атрибуты (не data-) — они могут быть чем угодно, что угодно, но если вы заботитесь о «валидности» вашего HTML, вы будете ограничены определенными типами DTD, и вам нужно будет указать их в вашем DTD. На самом деле они не наносят вреда вашему HTML, поскольку браузеры специально обязаны (в соответствии с конвенцией W3C) игнорировать неизвестные атрибуты. Единственная проблема заключается в столкновении с потенциальными будущими разработками. Если вы используете чистый javascript, их также будет немного неудобно использовать (но это субъективный вариант - как было предложено в одном из ответов выше, это хороший дополнительный вариант для использования их в качестве хранилища данных). Вероятность путаницы при рефакторинге CSS невелика.

Пользовательские атрибуты данных — это замечательно, если вы используете jQuery, потому что вы можете хранить в нем действительно сложные данные (объекты и т. д.), при правильном использовании они действительно круты и дают вам хороший словарь для описания функций. ваших элементов DOM. Пространство имен «data-» хорошо защищает его от любых будущих конфликтов с атрибутами, не разделенными именами.

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