jQuery в настоящее время предоставляет мне забавное введение в JavaScript после 12 лет выживания счастливо без. Я на этапе, где я пытаюсь изучить столько, сколько я могу об оптимизации кода, который я пишу и, пока я нашел много хорошего ссылочного материала, существует что-то довольно основное, которое является озадачивающим меня, и я не мог найти что-либо об этом где угодно.
Когда я присоединяю что-то к элементу, как я должен обращаться к тому элементу в функции. Например, при присоединении функции к событию щелчка элемента:
$('#a_button',$('#a_list_of_buttons')).click(function() {
// NOW WHAT'S THE BEST WAY TO REFER TO '#a_button' ?
});
Я знаю, чтобы не продолжать повторно выбирать его как поэтому, поскольку браузер должен искать целый DOM снова с нуля для нахождения то, чем это уже найдено однажды:
$('#a_button').click(function() {
// I KNOW THAT THIS IS NAUGHTY
var buttonValue = $('#a_button').val();
$('#a_button').addClass('button_has_been_clicked');
});
В настоящее время я использую любое из следующих, но не совсем уверен, что каждый на самом деле делает:
$('#a_button').click(function() {
// USING this
var buttonValue = $(this).val();
$(this).addClass('button_has_been_clicked');
});
Но это просто повторно выбирает как в первом "непослушном" примере?
$('#a_button').click(function(event) {
// USING event.target
var buttonValue = $(event.target).val();
$(event.target).addClass('button_has_been_clicked');
});
Это кажется, что могло бы быть лучше, но действительно ли эффективно относиться к 'event.target' многократно?
$('#a_button').click(function(event) {
// USING A LOCAL VARIABLE
var thisButton = $(this);
// OR SHOULD THAT BE
var thisButton = $(event.target);
var buttonValue = thisButton.val();
thisButton.addClass('button_has_been_clicked');
});
Я понимаю эффективность производительности передающих вещей к переменным, но я не уверен, предоставляют ли в этих ситуациях с помощью $ (это) или $ (event.target) уже мне ту же эффективность и так путем установки новой переменной, я на самом деле делаю больше работы, что я должен.
Спасибо.
Я могу ошибаться, но this
и event.target
являются просто разными ссылками на один и тот же элемент.
this
и event.target
не являются всегда ссылками на один и тот же элемент. Но, отвечая на ваш вопрос, var thisButton = $ (this);
определенно победитель. Если бы вы писали код C #, вы бы никогда не сделали следующее:
this.Controls[0].Controls[0].Text = "Foo";
this.Controls[0].Controls[0].Controls.Clear();
Вы бы сделали это:
var control = this.Controls[0].Controls[0];
Так что вам, вероятно, также никогда не следует повторно использовать $ (this)
более одного раза. Хотя преобразовать this
из элемента DOM в объект jQuery тривиально, это все же ненужные накладные расходы.
Однако иногда вам нужно отказаться от оптимизации, чтобы убедиться, что ваш код поддерживает читаемость.
Другой вариант, конечно же, - просто изменить то, что это
. Это после javascript:
this = $(this); // Now `this` is your jQuery object
Заявление об ограничении ответственности : Я только что попробовал описанное выше, и, похоже, это сработало. Хотя могут быть некоторые проблемы.
this
и event.target
не всегда одинаковы.
this
относится к элементу, которому вы назначили слушателя (в данном случае "#a_button"). Однако event.target
- это элемент, который фактически инициировал событие, которое может быть дочерним узлом #a_button
.
Итак, $ (this)
- это то, что вы ищете.
См. Ссылку: http://api.jquery.com/event.target/
По своему опыту я бы выбрал следующее:
$('#a_button').click(function() {
// USING this
var buttonValue = $(this).val();
$(this).addClass('button_has_been_clicked');
});
this
в контексте вашего метода обратного вызова click является ссылкой на событие DOM. Поскольку у вас уже есть ссылка на объект DOM, нет необходимости преобразовывать ее в объект jQuery, так как поиск не требуется.
Но, кстати, если вам не нужно использовать jQuery в обратном вызове, то и не нужно. Вы можете просто получить значение кнопки с помощью стандартного JS this.currentTarget.value
.
Другие примеры, которые вы упомянули, требуют поиска в DOM, и в зависимости от сложности вашего селектора это может занять больше времени. Использование поиска на основе id, например '#a_button'
, будет работать лучше, чем поиск на основе класса, например .myClass
.