jQuery $ (this) vs. variable de

Question

Teniendo en cuenta:

var element = $('#element'); 

Me pregunto que es más rápido:

element.click(function(){ 
    element.dosomething() 
)} 

O:

element.click(function(){ 
    $(this).dosomething() 
)} 

O qué es importante?

Answer 1

La velocidad probablemente sea la misma, pero usar $ (esto) es mucho mejor porque no tiene que preocuparse de que el elemento se reasigne a otra cosa (o el valor del elemento se pierda por completo).

Además, si refactoriza y usa un selector para una clase en lugar de un elemento específico, la función funcionará para todos los elementos coincidentes, no solo para el uno.

Answer 2

Preferiría el segundo. Si alguna vez quisiste refactorizar la función y reutilizarla para otro botón, sería más portátil.

Answer 3

Como $ (esto) causa una llamada de función, su primer ejemplo es teóricamente más rápido, pero probablemente no mucho.

Answer 4

El primero es más rápido. El segundo ejecuta el mismo selector dos veces. Dicho eso, solo usarás ese código una vez con el primer método, probablemente no sea lo que deseas la mayoría de las veces.

En la práctica, utilizar un patrón como:

$('stuff').click(function(){ 
    var $$ = $(this); 
    $$.dosomething(); 
    $$.dosomethingelse(); 
)} 

Es decir, a menos que sólo utiliza un selector vez, asignarlo a una variable en primer lugar.

Answer 5

Bueno jQuery tiene su caché única de elementos dom (que ya han sido tocados una vez por jquery) por lo que en la mayoría de los casos esto no hará una gran diferencia.

No creo realmente que este sea su caso, jquery en realidad ajustará esto, que es el elemento, por lo que realmente no está ejecutando una consulta de ningún tipo dos veces.

BTW, en algunos casos esto hace una diferencia (al delegar, por ejemplo).

Answer 6

Utilice element.

Si element era una colección de jQuery que coincide con un solo elemento, por ejemplo, $( alguna Id ), entonces simplemente úselo.

Si el selector estaba destinado a coincidir más de un elemento, a continuación, element es en realidad elements, una colección de elementos, por lo que, en ese caso se utilizan $(this) dentro de su controlador de clic para atrapar la que realmente se hace clic.

La diferencia se explica int siguientes ejemplos:

1- Handler en solo elemento

var table = $("#myTable"); 
table.click(function() { 
    // Same as $(this), except $(this) creates another 
    // wrapper on the same object (which isn't too expensive anyway) 
    table.doSomething(); 
}); 

2- Handler en múltiples elementos

var rows = $("#myTable > tbody > tr"); 
rows.click(function() { 
    // Here we have to use $(this) to affect ONLY the clicked row 
    $(this).doSomething(); 
}); 

3- Handler con sencillo en el elemento, pero pidió varios elementos secundarios

var table = $("#myTable"); 
// "on" and "live" call handler for only child elements matching selector 
// (Even child elements that didn't exist when we added the handler, 
    as long as parent -table in this case- exists) 
table.on("click", "tbody > tr", function() { 
    // Here we have to use $(this) to affect ONLY the clicked row 
    $(this).doSomething(); 
}); 

Creo que es seguro (y menos trabajo, una diferencia muy pequeña) que solo el envoltorio existente, lo que demuestra que estoy esperando un único elemento en este caso y estoy trabajando con él. Y use $(this) cuando estoy tratando con elementos de una colección de elementos coincidentes.

Answer 7

Esto sería más rápido:

element.click(function(){ 
    element.dosomething(); 
)} 

Esto sería más rápido:

element.bind('click', element.dosomething); 

1. elemento se almacena en caché (y no ha cambiado, supongo)
2. uso bind ('clic') directamente no use .click() envoltura
3. if element.dosomething es la función que desea llamar, pasarla directamente wi Thout llamada adicional

Estoy asumiendo que element.dosomething() es correcta y también element no cambia.

Aquí es un ejemplo de código de trabajo: http://jsfiddle.net/xhS3b/

//<a href="#" id="element">click me</a> 

var element = $('#element'); 
element.dosomething = function() { 
    alert('did something'); 
    return false; 
} 
element.bind('click', element.dosomething);