Las mejores prácticas de JQuery

Las mejores prácticas que cubren escenarios comunes que los desarrolladores web se enfrentan todos los días.

Introducción

Con la creciente popularidad de las aplicaciones web ricas y las altas expectativas de los s de respuesta rápida cada vez que se hace clic en un enlace o botón, los desarrolladores comenzaron a desarrollar y usar bibliotecas de jаvascript para realizar el trabajo repetitivo de forma rápida y efectiva. Uno de esos y el más popular es: JQuery. Pero con el uso extensivo de JQuery, surge otro problema: ¿cuáles son las buenas y malas prácticas al usar bibliotecas de jаvascript?

Consejo

En este consejo, le daré algunas de las buenas prácticas. Aprendí a usar, depurar y revisar el código de jаvascript. En realidad, elegí 7 de ellos que creo que representan los escenarios más comunes.

1- CDN con una caída

CDN significa Content Delivery Network y es un servidor que aloja la biblioteca para usted. El uso de CDN le dará a su aplicación la capacidad de usar el almacenamiento en caché y evitar cargar la biblioteca cada vez que la solicitud de un nuevo llegue a su sitio. Google, Microsoft y JQuery proporcionan un CDN.

Como la red nunca es 100% confiable y el servidor puede fallar por muchas razones, debe asegurarse de que si eso sucede, su aplicación aún se ejecuta. Por lo tanto, utilice una alternativa, lo que significa que si la aplicación no puede encontrar la biblioteca alojada, retrocederá y cargará la copia local.

Google CDN es el siguiente:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

Microsoft CDN es el siguiente:

<script src="//ajax.aspnetcdn.com/ajax/jquery/jquery-1.9.0.min.js"></script>

Tenga en cuenta que en lugar de especificar un protocolo como http tenemos //. Eso es porque los servidores CDN iten http y https. Si su sitio tiene un certificado SSL, no necesita preocuparse por él, descargará el archivo.

Pero como mencioné anteriormente, aún necesita un respaldo si algo va mal con el servidor CDN:

<script>Window.JQuery || document.write(‘<script src=”script/localsourceforjquery”></script>’)

Por supuesto, también puede usar un Requerir para configurar que se requiera JQuery, pero siento que no hay prisa por nada.

2- Limitar la interacción DOM

Hay un costo al manipular el árbol DOM usando jаvascript. Y esta afirmación se aplica a JQuery. Intenta limitar la interacción con el DOM. Un ejemplo que vi al ayudar a un colega a acelerar la visualización de datos es el uso de selectores en un bucle. Es un asesino! Mira lo siguiente:

containerDiv = $("#contentDiv");for(var d =0; d < TotalActions; d++)
	{
	  containerDiv.append("<div><span class='brilliantRunner'>" + 
	  d + "</span></div>");
	}

¿Qué pasa aquí? A primera vista, ¡nada! ¡Y mi colega dijo que este código funcionaba bien! Por supuesto que sí! Si bien TotalActions tenía 50 elementos, nada era notable, pero una vez que se elevó a 25000, se desaceleró mucho y la razón (descubrí al intentar cosas y buscar en Google el problema) es la interacción DOM dentro del ciclo.

En lugar de hacer esto, simplemente lo reemplacé con una matriz (después de muchos intentos fallidos) y usé una función de inserción dentro del ciclo. Al final, hice una combinación con un string separador como vacío y obtuve los resultados esperados muy suavemente y rápidamente.

var myContent=[];for(var d = 0; d < TotalActions; d++)
	{
	  myContent.push("<div><span class='brilliantRunner'>" + 
	  d + "</span></div>");
	}
	containerDiv.html(myContent.(""));

3- Almacenamiento en caché

Lo más importante y distintivo de JQuery son los selectores y la forma en que encontramos elementos en el árbol DOM. Pero vi muchas veces, los desarrolladores usan el mismo selector muchas veces dentro de una función. Por ejemplo: $("#divId”). Incluso si JQuery puede seleccionar elementos muy rápidamente, no es necesario buscar los mismos elementos muchas veces. Entonces puedes poner en caché tu elemento como:

var $divId = $("#divId")

y luego use $ divId cada vez que lo necesite.

Entonces, en lugar de hacer esto:

var thefunction = function(){
	    $("#mydiv").ToggleClass("zclass");
	    $("#mydiv").fadeOut(800);
	}
	 
	var thefunction2 = function()
	{
	    $("#mydiv").addAttr("name");
	    $("#mydiv").fadeIn(400);
	}

Haga esto y agregue el encadenamiento para hacerlo aún más agradable:

var mydiv =$("#mydiv");var thefunction = function()
	{
	  mydiv. ToggleClass("zclass")
	       .fadeOut(800);
	}
	 
	var thefunction2 = function()
	{
	  mydiv.addAttr("name")
	       .fadeIn(400);
	}

Habiendo dicho eso, no necesitas almacenar todo en caché todo el tiempo. Mira lo siguiente:

$("#link").click(function(){
	     $(this).addClass("gored");
	}

Aquí, utilicé en $(this) lugar de usarlo de nuevo $("#link”) o incluso intenté almacenarlo en caché. Porque el objeto con el que estoy tratando en este caso es el enlace en sí.

4- Encontrar y filtrar

Recientemente me encontré confundido al intentar obtener un conjunto de objetos JQuery Find(). Entonces me di cuenta de que lo que estaba tratando de hacer es alcanzable por la Filter() función en su lugar. Es importante entender la diferencia:

Find: will search for elements starting in the actual selection going down the tree. 
	Filter: will search in the whole JQuery set

5- Fin ()

Al encadenar elementos dentro de un conjunto de JQuery, a menudo quiere volver a los padres para aplicar cualquier otra cosa interesante o atributos progresivos. ¿Estás en la segunda fila de una tabla aplicando CSS y quieres volver a la tabla para impulsar aún más el diseño? Use la End función cuando termine con la fila y usted está automáticamente en la mesa y ¡adelante, hágalo con estilo!

6- Objeto Literal

Cuando aplica los mismos atributos de CSS con el encadenamiento, use el literal del objeto como se muestra a continuación:

$("#myimg").attr("src", "thepath")
                      .attr("alt", "the alt text");

Se convierte en lo siguiente y evita golpear el elemento DOM y su método setter varias veces:

$("#myimg").attr({"src": "thepath", 
                       "alt": "the alt text"
	});

7- Las clases son geniales

Use clases CSS siempre que sea posible en lugar de CSS en línea. Creo que no necesitas ningún ejemplo ni más explicaciones sobre este.

Puntos de interés

Espero que este artículo te ayude a codificar mejor tus aplicaciones jquery.

Historia

13 º de abril de 2014: mensaje inicial y actualizado marzo 2018

Licencia

Este artículo, junto con cualquier código fuente y archivos asociados, se licencia bajo The Code Project Open License (OL)

Sobre el Autor

Mack Ait-Aoudia

Desarrollador de Software (Senior) www.m2a.ca

Canadá.