есть ли разница между кодом JQuery здесь?

Question

Вот кодовый блок a

$('ul.filter li').each(function() {
    $(this).click(function(e) { //do something });
});

Вот кодовый блок b

$('ul.filter li').click(function(e) { //do something });

Разве это не то же самое?один лучше другого?Какой метод лучше / быстрее?Я бы предположил, что блок b имеет меньше кода, но я хочу подтвердить это здесь, спасибо

Answer 1

Эффект, который вы видите, будет таким же, но в первом случае каждому элементу li назначается новая функция, поскольку вы создаете объект функции внутри обратного вызова each.

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

Внутренне, click вызывает on (в jQuery 1.7), то есть итерация по элементам через each :

return this.each( function() {
    jQuery.event.add( this, types, fn, data, selector );
});

Это имеет место со многими методами jQuery (чаще всего отмечается вдокументации), поэтому вы сохраняете символы и память, позволяя jQuery неявно делать это.

Answer 2

Они оба будут иметь одинаковый эффект.

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

Answer 3

Оба более или менее одинаковы и дают одинаковые результаты. Второй фрагмент кода также будет внутренне запускать цикл each и назначать обработчик нажатия каждому элементу li.

Но да, второй фрагмент кода очень прост и понятен.

Answer 4

Для философии Jquery второе лучше, потому что оно короче.

Answer 5

Второе использование называется «неявная итерация» и является одним из краеугольных камней jQuery.

Например, в Руководстве по определению JavaScript, 6-е издание, стр.530 для Основ jQuery:

Несмотря на мощь метода each (), он используется не очень часто, поскольку методы jQuery обычно неявно выполняют итерацию над набором совпадающих элементов и оперируют всеми ними.Обычно вам нужно использовать each () только в том случае, если вам нужно манипулировать соответствующими элементами по-разному.Даже в этом случае вам может не потребоваться вызывать each (), поскольку ряд методов jQuery позволяют передавать функцию обратного вызова.

в http://jqfundamentals.com/chapter/jquery-basics

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

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