Ok ensilla a los vaqueros, porque va a ser largo. He pasado la mañana revisando algunos de mis códigos antiguos y me pregunto sobre las mejores prácticas y la optimización. Para evitar un viaje por el carril subjetivo, simplemente publicaré algunos ejemplos con algunas preguntas que espero sean fáciles de responder. Trataré de mantener los ejemplos muy simples para facilitar la respuesta y disminuir la probabilidad de errores. Aquí vamos:

1) Asignación vs llamadas jQuery

Entiendo que al acceder a los selectores generalmente se considera mejor asignar un selector a una variable en lugar de hacer la misma llamada más de una vez, por ejemplo.

$('div#apples').hide();
$('div#apples').show();

vs.

var oranges = $('div#oranges');
oranges.show();
oranges.hide();

¿Se aplica esta misma regla cuando se hace referencia a jQuery$(this)? Ex. Un simple script para hacer clic en algunos datos de una tabla y personalizar el enlace.

$('tr td').each( function() {
    var colNum = $(this).index();
    var rowNum = $(this).parent().index();
    $(this).wrap('<a href="example.com/hello.html?column=' + colNum + '&row=' + rowNum +'">'); 
})

vs.

$('tr td').each( function() {
    var self = $(this);
    var colNum = self.index()
    var rowNum = self.parent().index()
    self.wrap('<a href="example.com/hello.html?column=' + colNum + '&row=' + rowNum +'">'); 
});

2)this vs$(this)

Ok, este próximo es algo que me he preguntado durante mucho tiempo, pero parece que no puedo encontrar ninguna información al respecto. Por favor disculpe mi ignorancia. ¿Cuándo tiene sentido llamar al vainilla js?this a diferencia del jQuery envuelto$(this)? Es micomprensión ese -

$('button').click(function() {
  alert('Button clicked: ' + $(this).attr('id'));
});

Es mucho menos eficiente que acceder al atributo DOM de la vainillathis objeto como el siguiente:

$('button').click(function() {
  alert('Button clicked: ' + this.id);
});

Entiendo lo que está sucediendo allí, solo me pregunto si hay una regla general a seguir al decidir cuál usar.

3) ¿Más especificidad es siempre mejor?

Este es bastante simple, ¿SIEMPRE es beneficioso ser más específico con nuestros selectores? Es fácil ver eso$('.rowStripeClass') sería mucho más lento que$('#tableDiv.rowStripeClass'), ¿Pero dónde dibujamos la línea? Es$('body div#tableDiv table tbody tr.rowStripeClass') ¿más rápido todavía? Cualquier aportación sería apreciada!

Si has llegado hasta aquí, ¡gracias por echar un vistazo! Si no lo has hecho, p