Мнение: в HTML: возможные повторяющиеся идентификаторы или нестандартные атрибуты?
Довольно часто хочется, чтобы ваш javascript знал, что конкретный узел dom соответствует записи в базе данных. Так как вы это делаете?
Один из способов, который я видел довольно часто, - это использовать класс для типа и идентификатор для идентификатора:
<div class = "thing" id = "5">
<script> myThing = select(".thing#5") </script>
Однако здесь есть небольшая проблема со стандартами html - если у вас есть более одного типа записей на странице, вы можете в конечном итоге дублировать идентификаторы. Но это ведь ничего плохого не делает?
Альтернативой является использование атрибутов данных:
<div data-thing-id = "5">
<script> myThing = select("[data-thing-id=5]") </script>
Это позволяет обойти проблему повторяющихся идентификаторов, но это означает, что вам придется иметь дело с атрибутами, а не с идентификаторами, что иногда бывает сложнее. Что вы думаете, ребята?
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 10
<div class = "thing" id = "myapp-thing-5"/>
// Get thing on the page for a particular ID
var myThing = select("#myapp-thing-5");
// Get ID for the first thing on the page
var thing_id = /myapp-thing-(\d+)/.exec ($('.thing')[0].id)[1];
Это решение кажется очень требовательным к производительности для больших наборов данных. // голос против.
Учитывая тот факт, что у вас может быть несколько классов для каждого элемента, не могли бы вы создать уникальный идентификатор в качестве дополнительного класса для каждого элемента? Таким образом, может быть более одного элемента с одним и тем же идентификатором без конфликтов атрибутов HTML ID.
<div class = "thing myapp-thing-5" />
<div class = "thing myapp-thing-668" />
<div class = "thing myapp-thing-5" />
Затем было бы легко найти эти узлы и найти соответствующую им запись в БД с помощью небольших манипуляций со строками.
Помните, что выбор по классу намного медленнее, чем по идентификатору.
@John: Но если у вас есть дублированные идентификаторы, вы не сможете использовать document.getElementById.
Я не выступал за использование нескольких идентификаторов, просто имейте в виду, что выбор по классу медленнее в несовременных браузерах (он будет медленнее не намного дольше)
Вы откажетесь от контроля над DOM
Правда, ничего не взорвется, но это плохая практика. Если вы разместите на странице повторяющиеся идентификаторы, вы потеряете возможность будь уверен в том, что ты получаешь, когда попытаетесь получить доступ к элементу по его идентификатору.
var whoKnows = document.getElementById('duplicateId');
На самом деле поведение различается в зависимости от браузера. В любом случае вы можете использовать classNames для повторяющихся значений, и вы получите полностью избегая проблемы.
Браузер попытается пропустить ошибки в вашей разметке, но все станет грязно и сложнее. Лучше всего сохранить разметку в силе. Вы можете описать как тип элемента, так и его уникальный идентификатор базы данных в className. Вы даже можете использовать несколько classNames, чтобы различать их. Есть много допустимых возможностей:
<div class = "friend04"/>
<div class = "featuredFriend04" />
или же
<div class = "friend friend04" />
<div class = "featuredFriend friend04" />
или же
<div class = "friend objectId04" />
<div class = "groupMember objectId04" />
или же
<div class = "friend objectId04" />
<div class = "friend objectId04" id = "featured" />
Это все полностью законные и действительные фрагменты XHTML. Обратите внимание, как в последнем фрагменте кода у меня все еще работает id, и это приятно. Доступ к элементам по их идентификатору очень быстрый и простой, поэтому вы определенно захотите использовать его, когда сможете.
Вы уже будете проводить достаточно времени в javascript убедиться, что у вас есть правильные значения и типы. Размещение повторяющихся идентификаторов на странице только усложнит вам задачу. Если вы можете найти способы написать совместимую со стандартами разметку, у нее много практическая польза.
Нестандартные атрибуты подходят, если вы используете XHTML и не торопитесь, чтобы расширить DTD, которое вы используете, чтобы охватить новые атрибуты. Лично я бы просто использовал более уникальный идентификатор, как предлагали некоторые другие люди.
Обратите внимание, что идентификатор не может начинаться с цифры, поэтому:
<div class = "thing" id = "5">
неверный HTML. См. Какие допустимые значения для атрибута id в HTML?
В вашем случае я бы использовал такие идентификаторы, как thing5 или thing.5.
Хочу отметить, что в настоящее время идентификатор может начинаться с цифры. Для справки будущих пользователей.
+1 для изменений html5, mathiasbynens.be/notes/html5-id-class. Осталось только одно требование - помимо уникальности в документе - это то, что значение должно содержать хотя бы один символ (не может быть пустым) и не должно содержать никаких пробелов.
В HTML5 это можно сделать так:
<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<title></title>
<script>
window.addEventListener("DOMContentLoaded", function() {
var thing5 = document.evaluate('//*[@data-thing = "5"]',
document, null, XPathResult.FIRST_ORDERED_NODE_TYPE ,null);
alert(thing5.singleNodeValue.textContent);
}, false);
</script>
</head>
<body>
<div data-thing = "5">test</div>
</body>
</html>
Идентификаторы должны быть уникальными в соответствии со стандартами, и хотя большинство браузеров не блокируют получение повторяющихся идентификаторов, было бы не лучшим решением полагаться на это всегда.
Сделать идентификатор уникальным путем добавления имени типа к идентификатору будет работать, но вам нужно спросить, зачем вам это нужно. Присвоение идентификатора элементу очень полезно, когда элемент нужно найти, getElementById выполняется очень быстро. Причина в том, что большинство браузеров создают индекс идентификаторов при загрузке DOM. Однако, если у вас есть миллионы идентификаторов, которые вам никогда не нужно использовать в чем-то вроде getElementById, вы понесли расходы, которые никогда не окупаются.
Я думаю, что в большинстве случаев вам может понадобиться идентификатор объекта в событии, инициированном элементом или одним из его дочерних элементов. В этом случае я бы использовал дополнительный атрибут для элемента, а не атрибут ID.
Я бы оставил атрибут класса делать то, что он должен делать, и не перегружать его обязанностями по идентификации.
Мне не нравится решение Джона Милликина. Для больших наборов данных это будет требовательно к производительности.
Оптимизация его кода может заключаться в замене регулярного выражения вызовом substring(), поскольку первые несколько символов свойства id являются постоянными.
Я бы выбрал соответствующий class, а затем конкретный id.
Я не понимаю, как это решение будет более требовательным к производительности, поскольку вы никогда не сделаете ничего больше, чем вы сделаете с другими решениями (где упомянутые способы требуют накладных расходов с библиотекой! -)
Я предполагаю, что вы имеете в виду МЕНЬШЕ интенсивной работы. В этом случае:
Оптимизация кода Джона Милликина, я предлагаю, является менее требовательной к производительности. Выполнение вызова substring () по сравнению с вызовом объекта регулярного выражения дешевле. Также; Он оценивает выражение каждый раз, когда хочет извлечь идентификатор.
Также: jQuery использует встроенную функцию document.getElementsByClassName (которая, как мне кажется, также реализована в WebKit). Раствор Джона Милликина - нет.
Ах, я вас неправильно понял, но в основном я бы использовал .getElementById, потому что у вас есть вся необходимая информация, чтобы сделать это таким образом
Если вы устанавливаете нестандартные свойства, обязательно либо установите их программно (так как все будет законно), либо постарайтесь пересмотреть dtd! -)
Но я бы использовал идентификатор со значимым словом перед идентификатором DB, а затем использовал бы .getElementById, так как вся необходимая информация под рукой ...
Мне кажется шатким отслеживание ваших данных через DOM; помните, что эти идентификаторы являются глобальными переменными, поэтому, если есть шанс, что чей-то скрипт попадет на вашу страницу, он уязвим. Для достижения наилучших результатов загрузите данные в объект в анонимной функции и после этого напишите таблицу (или большой вложенный список DIV).
Определенно сделай это так. Выбор по идентификатору - это самый быстрый способ выбрать элемент (пока все браузеры не примут функции выбора собственных классов)