Селектор класса JQuery против селектора идентификатора

У меня есть 7 разных кнопок, которые выполняют одну и ту же функцию javascript при нажатии. должен ли я использовать селектор класса или селектор идентификатора.

$("input.printing").on("click", function(event) {
     printPdf(event);
});

or 

   $("#package1Pdf").click(function(event) {
         printPdf(event);
   });
$("#package2Pdf").click(function(event) {
         printPdf(event);
   });
$("#package3Pdf").click(function(event) {
         printPdf(event);
   });
$("#package4Pdf").click(function(event) {
         printPdf(event);
   });

Каковы преимущества и недостатки каждого? Что предпочтительнее.


jquery performance jquery-selectors code-maintainability
person Chun ping Wang    schedule 13.03.2013    source источник
comment
Посмотрите на код и честно скажите нам, что вам больше нравится. Нет правильных или неправильных ответов, это просто личный вопрос, заданный вам, чтобы получить собственное мнение по этому поводу.   -  person BoltClock    schedule 13.03.2013
comment
Если хотите, вы также можете сделать $("#package1Pdf, #package2Pdf, #package3Pdf, #package4Pdf").click()   -  person Dom    schedule 13.03.2013
comment
Быстрее выбирать элемент по идентификатору, но код получается аккуратнее, когда вы просто связываете функцию один раз по классу. В общем, я бы предпочел читаемость кода, если вам действительно не нужен (скорее всего, небольшой) прирост производительности.   -  person Jack    schedule 13.03.2013
comment
ответ на ваш вопрос действительно зависит от того, что вас беспокоит. вас беспокоят производительность, выполнение, читабельность, масштабируемость, ремонтопригодность?   -  person iGanja    schedule 13.03.2013
comment
Первоначально это было скопировано/вставлено, но я считаю, что на это стоит обратить внимание: stackoverflow.com/questions/1230636/   -  person Dom    schedule 13.03.2013
comment
@Dom Этот ответ был опубликован на Aug 5 '09, и он явно нуждается в пересмотре с учетом текущих стандартов браузера.   -  person Selvakumar Arumugam    schedule 13.03.2013

Ответы (5)


arrow_upward
14
arrow_downward

Вы можете использовать фильтр ID без нескольких селекторов:

$('[id^="package"]').click(printPdf);

Приведенное выше выберет все идентификаторы, начинающиеся с «package». Это означает, что разница в основном семантическая. Вы должны выбрать то, что наиболее значимо для вашего приложения и способа его разработки.

См. страницу селекторов атрибутов jQuery, чтобы узнать о гибкости выбора jQuery. Сохранение закладки на этой странице избавит вас от необходимости снова писать код, подобный вашему второму примеру.

Что лучше?

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

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

person BinaryTox1n    schedule 13.03.2013

arrow_upward
3
arrow_downward

Очевидно, что ваш первый код с использованием класса намного чище, аккуратнее и лучше.

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

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

о, кстати, вам даже не нужна эта анонимная функция. Смотри ниже,

$("input.printing").on("click", printPdf);
person Selvakumar Arumugam    schedule 13.03.2013

arrow_upward
2
arrow_downward

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

селектор класса в вашем случае лучше, быстрее и читабельнее...

Примечание: что, если в ближайшем будущем вам нужно будет добавить еще 20 кнопок (100 будет слишком много)... и вы выберете селектор идентификаторов... фуууу!!! то есть еще 20 обработчиков событий ...... ;) ;)

person bipen    schedule 13.03.2013

arrow_upward
1
arrow_downward

Как уже говорилось, используемый вами селектор может влиять на производительность, но часто это незначительно и больше зависит от стиля и удобочитаемости. Суть в том, что jQuery создаст уникальный обработчик для каждого выбранного элемента либо индивидуально по идентификатору, либо с использованием метода множественного выбора, такого как селектор класса или атрибута. Лично мне нравится ваш первый пример, так как он будет охватывать будущие дополнения к вашему представлению без необходимости помнить о добавлении другого обработчика.

person iGanja    schedule 13.03.2013

arrow_upward
1
arrow_downward

Выбор только по идентификатору быстрее, чем выбор по классу в целом, поскольку jQuery внутри использует getElementById, который быстрее в большинстве браузеров. См. это для получения дополнительной информации, так как в ней показаны многие другие способы повышения производительности, связанные с Jquery. Однако помните, что производительность селектора — не единственное, о чем вам нужно беспокоиться. Присоединение ко многим ненужным событиям также может создать проблемы с производительностью. Чтобы смягчить эту проблему, вы можете использовать делегат, см. документацию по jQuery для получения дополнительной информации о делегате.

person nicholasnet    schedule 13.03.2013