jQuery: ¿qué es "prohibido" hacer en simple Javascript

Question

Una pregunta de mejores prácticas de jQuery.

Estoy escribiendo una página web muy jQuery intensiva. Soy nuevo en jQuery y noto su poder, pero como vengo con una gran experiencia y conocimiento de JavaScript, mi pregunta es: ¿Qué debería hacerse en jQuery y qué en javascript?

Por ejemplo, hay devoluciones de llamada que envían un objeto DOM simple como argumento. ¿Debo usar eso o debería envolverlo (como $(this)).

¿Importa si hago this.x = y o $ (this) .attr ("x", y).

Answer 1

Si su función recibe un objeto DOM y no necesita ninguna funcionalidad jQuery para ese objeto DOM, entonces no hay necesidad de convertirlo a un objeto jQuery. Por ejemplo, si recibe un objeto de casilla de verificación, puede examinar la propiedad checked sin el uso de jQuery.

Sin embargo, si tiene que desplazarse a un elemento diferente de la casilla de verificación, podría ser útil para convertirlo:

jQuery (al igual que otras bibliotecas) mezclarse sin problemas con JS nativos. Si necesita funcionalidad adicional, aumente el objeto en cuestión.

En cuanto a su última pregunta: Puede encontrar que la función data es útil para evitar los atributos DOM no estándar. Si su propiedad x en su pregunta es de hecho un atributo DOM válido, puede escribir this.x = y o $(this).attr('x', y), IMO no importa mucho. Sin embargo, si x no es un atributo DOM, utilice

$(this).data('key', value) 

De esta manera, se puede almacenar pares clave-valor arbitrarios con el elemento DOM, donde value puede ser un valor simple arbitraria u objeto.

Answer 2

Creo que es una decisión. Usa tu sentido común.

Por ejemplo, si usted tiene 1000 DIV en la página, es probable que no desee para envolver dentro de $ (..)

$('div').click(function() { 
    this.id = Random.guid(); // instead of $(this).attr('id', Random.guid()); 
}); 

En cuanto a otras tareas, siempre y cuando usted entienda lo que jQuery está haciendo, puede seguir con esto solo por coherencia, pero tenga en cuenta los problemas de rendimiento como en el ejemplo anterior.

Como @colinmarc menciona, a veces jQuery difumina la distinción entre los atributos del elemento y las propiedades del objeto que pueden ser engañosas y con errores.

Answer 3

Cuando usa jQuery, siempre devuelve una instancia de jQuery a menos que use una función como val();

El motivo por el que usamos $ (this) .value en lugar de this.value es para asegurarnos de que se trata de una instancia de jQuery.

si en algún lugar de su código se establece una variable llamada bruja my_link es igual un objeto DOM y no una función jQuery .. más allá en su my_link.val aplicación() resultaría en un error, sino por hacer $ (my_link) .val() le asegurará que la función val estará disponible. como $() devuelve una instancia de jquery.

Lo sentimos para la comprensión de menos en mi post anterior.

Answer 4

Dado que los objetos jQuery tienen una funcionalidad más rica que la naturaleza nodos DOM JS, si estás en la valla, que también podría envolver en jQuery. JQuery es muy liviano, no hay muchas razones para no usar objetos jQuery.

¿Importa si hago this.x = y o $ (this) .attr ("x", y).

El nativo será ligeramente más rápido, pero es probable que va a pasar más tiempo en otro recorrido DOM code-- o edificio. En este ejemplo específico, el primero es más conciso, así que elegiría eso. Como jQuery es tan liviano, tiendo a cambiar de un lado a otro de manera fluida.

Estas son otras pautas que seguimos:

• Para devoluciones de llamada, como un controlador de clic, tendrá que seguir el API-- por lo general un nodo DOM. El código que escriba que sea similar probablemente solo tome los nodos DOM también. Pero si tiene una lista de elementos, siempre use un objeto jQuery.
• Para la mayoría de código, trato de ver si se puede estructurar el código como jQuery plugin-- aplicar una transformación a un conjunto de nodos DOM. Si puede hacer eso, obtendrá cierta orientación de la arquitectura del complemento.
• I utilizar el mecanismo de bind/gatillo de jQuery ya que es bastante flexible y de bajo acoplamiento.
• Para mantener el código recta, me gustaría recomendar nombre anteponiendo objetos jQuery con un signo de dólar. Por ejemplo, var $this = $(this);. Aunque en realidad no es un gran problema llamar $ ($) excesivamente, termina luciendo descuidado si lo llamas demasiado.

Espero que esto ayude.