Что другие люди думают об использовании «пользовательских» атрибутов для упрощения работы (в jQuery)

Question

Я в настоящее время jQuerification (если есть такое слово) мой веб-сайт. Я не очень хорош в JavaScript и не очень хорош в JQuery. Объектная ориентация, кстати, прошла мимо меня в JS, но остальная часть моего сайта - объектно-ориентированный VB.net Из некоторого опыта, который у меня был в jQuery некоторое время назад, я заметил, насколько сложно это может быть при загрузке страниц для определенной строки - вам нужно каким-то образом выяснить, какой идентификатор, например, отправить, и тому подобное.

Совсем недавно я пытался использовать что-то вроде:

<li class="catalogueItem"><a pName='" & Product.Name & "' pID='" & Product.ID & "'>" & Product.Name & "</a></li>

Хорошо, это не совсем то же самое - я добавлял что-то вроде этого в качестве буквального элемента управления, но на данный момент у меня нет кода на экране, поэтому я просто написал что-то подобное.

В любом случае, я тогда попробовал следующее:

$("li.catalogueItem").click(function() {
    $(this).html($(this).find("a").attr("pID"));
});

Это должно работать нормально, основываясь на моих выводах. Итак, мои вопросы таковы: а) есть ли проблемы с использованием этой техники? б) что другие люди думают об этой технике? в) нормально ли использовать эту технику, по мнению других людей, несмотря на то, что HTML не будет соответствовать W3C и т. д.? d) может ли кто-нибудь указать мне путь к более эффективному или более простому, или, возможно, даже более сложному / сложному, но общепринятому, способу делать подобные вещи?

Имейте в виду, что продукт может иметь много атрибутов, и я могу использовать его на административном интерфейсе для перегруппировки продуктов через интерфейс перетаскивания.

Большое спасибо заранее.

С уважением,

Richard

Довольно длинная записка для Рубенса ...

Я не знаю, делали ли вы когда-либо какой-либо VB.Net ранее, но я не могу найти способ создать тег сценария на стороне сервера, а затем сказать что-то вроде:

ScriptTag.Controls.add(New LiteralControl("$('#" & MyDiv.clientID.toString & "').data('ProductName', '" & Product.Name & "');"))

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

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

Способ, который я предложил, можно сделать «на лету» - и скрипты будут загружены независимо от того, нужны они или нет (они указаны в теге head на главной странице).

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

Одна вещь, которая только что пришла мне в голову ... есть нечто, называемое ScriptManager, которое я видел в Visual Studio ... Интересно, имеет ли это какое-то отношение к хранению скриптов в одном месте ... возможно, его время провести какое-то расследование ... Я буду публиковать здесь, если я думаю о чем-то еще, или узнавать что-либо еще об обоих методах (плюсы и минусы и тому подобное).

Richard

Answer 1

Если вы собираетесь использовать пользовательские атрибуты, я бы сказал, использовать data- атрибуты , например:

<li class="catalogueItem"><a data-pName='" & Product.Name & "' data-pID='" & Product.ID & "'>" & Product.Name & "</a></li>

В HTML5 data- префиксные атрибуты предназначены для точно с этой целью ... но не вызовет проблем в документе HTML4 (хотя они технически недействительны).Пока вы обращаетесь к ним следующим образом:

$("li.catalogueItem").click(function() {
  $(this).html($(this).find("a").attr("data-pID"));
});

В следующем выпуске jQuery 1.5 .data() будет также выглядеть как запасной вариант , вот так:

$("li.catalogueItem").click(function() {
  $(this).html($(this).find("a").data("pID"));
});

Answer 2

Как объясняет Ник , это и есть новая функция jQuery, и вам следует придерживаться этого, так как это будет действительный код HTML5.

Но я понимаю, что вы просите личного опыта, а не технического обоснования.

Итак, по моему опыту, используйте их столько, сколько вам нужно.

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

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

Спецификации всегда меняются, и они всегда вводят функции, уже используемые;)

Answer 3

Как писал Кори Гальярди , лучше использовать jQuery.data (http://docs.jquery.com/Data) для хранения и чтения данных в любом узле HTML.

Использование метода jQuery.data добавит вам дополнительный код (см. Работу). Основная идея заключается в том, что вы можете хранить объект JavaScript в HTML, используя ключ.

Пример:

$('li.catalogueItem item-0').data('item', {id:0, name:'My Item', desc:'...'});

Для вашего фактического кода .NET вам будет предложено написать предыдущий пример для каждого элемента. Использование цикла сделает работу.

Answer 4

Все современные браузеры не будут жаловаться на использование недействительного HTML.Тем не менее, это все еще всегда беспокоит меня.Очень часто можно увидеть использование атрибута rel для хранения данных в HTML.Я также часто привязываю id к атрибуту id : <a id="product-384">My Product</a>

Когда вы попадаете в область JavaScript / jQuery, лучше всего использовать метод data () jQuery,Смотри http://docs.jquery.com/Data