Какая из этих версий более эффективна в jQuery?

Question

Первая версия:

$(".myClass").focus(function() { 
    var MyRef=$(this); 
    if (MyRef.val() == MyRef.attr("rel")) { 
     MyRef.val(""); 
    } 
}); 

$(".myClass").focusout(function() { 
    var MyRef=$(this); 
    if (MyRef.val() == "") { 
     MyRef.val(MyRef.attr("rel")); 
    } 
}); 

Вторая версия:

$(".myClass").focus(function() { 
    if ($(this).val() == $(this).attr("rel")) { 
     $(this).val(""); 
    } 
}); 

$(".myClass").focusout(function() { 
    if ($(this).val() == "") { 
     $(this).val($(this).attr("rel")); 
    } 
}); 

Таким образом, без сохранения this на переменной или использовать его? Или нет изменений?

Answer 1

Кэширование текущий элемент в свернутом набор JQuery является рекомендуемая практика, так как для преобразования из стандартного элемента DOM в набор, завернутый jQuery, требуется работа. Поэтому я бы рекомендовал первый подход.

Хороший подход для ясности заключается в соблюдении соглашения об именах при обертке элемента DOM в объекте jQuery. Лично я всегда называю это $this - доллар говорит мне свой объект JQuery (другая конвенцию я использую) и this говорит мне, что текущий элемент

Answer 2

Сохранение ссылки на объект jQuery, содержащий this, будет быстрее, потому что вам не нужно создавать новый объект jQuery каждый раз, когда вы хотите применить метод jQuery к this. В вашем первом примере есть один вызов $. Во втором примере есть 3.

Я не уверен, что вы делаете здесь:

$(MyRef.val(MyRef.attr("rel")); 

Это должен быть просто:

MyRef.val(MyRef.attr("rel")); 

Answer 3

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

Тем не менее, вы на самом деле не нужно использовать методы JQuery на всех внутри этих функций - следующий код будет более эффективным, чем либо:

$(".myClass").focus(function() { 
    if (this.value === this.getAttribute('rel') { 
     this.value = ''; 
    } 
}); 

$(".myClass").focusout(function() { 
    if (this.value === '') { 
     this.value = this.getAttribute('rel'); 
    } 
}); 

Answer 4

Я думаю, что первый из них лучше, потому что это спасает вас от вызова jQuery(this) (который является вызовом функции) много раз