¿Cómo ejecutas código jQuery en tus desarrollos?

Friday 20 de April de 2012, 1:49 pm 4 Comments

Cuando comencé a utilizar jQuery, supe que todo el código que iba a ejecutar una vez que se cargue el DOM, debía ponerlo dentro de:

$(document).ready(function() {
  //...
});

Con la práctica, me olvidé del código anterior y empecé a usar su equivalente, más sencillo de recordar y más corto para escribir:

$(function() {
  //...
});

Y de repente, revisando código de algún gurú, me topé con esto:

(function() {
  //...
}());

¿Mi reacción? ¡Confusión total!

Antes que nada, ¿qué diferencias hay entre ambas?

  • El “$” al inicio de la primera.
  • Los parentesís “()” al final de la segunda.

El primer detalle es comprensible, pues sabemos (o deberíamos saber) que el símbolo monetario seguido de paréntesis “$()” es equivalente a “jQuery()“, que es lo que habitualmente usamos para seleccionar elementos del DOM.

El segundo detalle no era muy claro para mí, así que luego de una divertida investigación, descubrí que el objetivo de los paréntesis “()” al final, inmediatamente después de la definición de la función, es la ejecución de la misma.

¡Ah! Pero hay un detalle, no es suficiente sólo incluir esos paréntesis al final, si no que son necesarios otros paréntesis, los que engloban a la propia función, para indicar que no se trata de una declaración, si no de una expresión.

A este tipo de funciones ejecutables al momento, se les conoce como Immediately-Invoked Function Expression (IIFE).

Por último, si vamos a usar una IIFE para ejecutar nuestro código jQuery (o JavaScript directo), no debemos olvidar colocarla al final de nuestro HTML, justo antes de <body>.

¿Beneficios? No necesitamos jQuery para ejecutar nuestro código JS, o bien, evitamos una llamada al framework.

Referencias

Si desean profundizar más sobre el tema, les dejo los siguientes enlaces: