Advertisement
  1. Code
  2. Web Development

Carga fácil de script con yepnope.js

Scroll to top
Read Time: 15 mins

Spanish (Español) translation by steven (you can also view the original English article)

Lanzado oficialmente por Alex Sexton y Ralph Holzmann a fines de febrero de 2011, el cargador de recursos yepnope.js presenta funciones asíncronas, de carga y precarga condicionales de JavaScript y CSS. Esto hace que la gestión del código condicional dependiente sea muy fácil.

Tutorial republicado

Cada pocas semanas, revisamos algunas de las publicaciones favoritas de nuestros lectores de toda la historia del sitio. Este tutorial fue publicado por primera vez en marzo de 2011.

Este ingenioso cargador de recursos, que solo tiene 1,6 KB de tamaño comprimido y gzipeado, ahora se incluye con Modernizer y es ideal para cargar, rellenar o "cebar" el caché de usuarios, o como un simple cargador/filtro de recursos asíncronos.

Para aquellos de ustedes que no están familiarizados con polyfills, son esencialmente complementos, o shims, que permiten el uso de tecnologías nuevas o futuras en navegadores más antiguos, por ejemplo. Bases de datos web sql, transformaciones CSS3 etc.

Yepnope ahora también admite una serie de prefijos y filtros que, cuando se adjunta a la URL del recurso, agrega otra capa de ajuste fino o personalización a su funcionalidad principal. Como si esto no fuera aún bueno, yepnope también te proporciona un mecanismo para definir tus propios prefijos y filtros. ¡Echemos un vistazo a lo que puede hacer yepnope.js!


Background - Carga asíncrona de Scripts

YepNopeYepNopeYepNope

Antes de profundizar en yepnope y sus características, es importante comprender un poco cómo funciona la carga asíncrona de scripts, por qué es útil y en qué se diferencia de la carga de scripts de vainilla.

Los cargadores asíncronos eliminan la naturaleza de bloqueo inherente de un script.

Normalmente, los archivos JavaScript cargados con la etiqueta <script> bloquean la descarga de recursos así como la representación de elementos dentro de la página web. Por lo tanto, aunque la mayoría de los navegadores modernos tienden a admitir la descarga paralela de archivos JavaScript, las descargas de imágenes y la representación de páginas aún tienen que esperar a que los scripts terminen de cargarse. A su vez, aumenta la cantidad de tiempo que un usuario tiene que esperar a que se muestre la página.

Aquí es donde los cargadores asíncronos entran en juego. Usando una de varias técnicas de carga diferentes, eliminan la naturaleza de bloqueo inherente de un script, lo que permite la descarga paralela de los JavaScripts y los recursos sin interferir con la representación de la página. En muchos casos, esto puede reducir, a veces drásticamente, los tiempos de carga de la página.

La mayoría de los cargadores conservan el orden en que se ejecutan los scripts al tiempo que proporcionan un callback para cuando el script está cargado y listo.

Sin embargo, la carga asíncrona no viene sin sus advertencias. Cuando los scripts se cargan de forma tradicional, el código en línea no se analiza ni se ejecuta hasta que los scripts externos se cargan completamente, de forma secuencial. Este no es el caso con la carga asíncrona. De hecho, los scripts en línea generalmente se analizarán/ejecutarán mientras los scripts aún se están descargando. De la misma manera, el navegador también está descargando recursos y mostrando la página a medida que se cargan los scripts. Por lo tanto, podemos llegar a situaciones donde el código en línea, que quizás depende de un script/biblioteca que se está cargando, se ejecuta antes de que esté lista su dependencia o antes/después de que el DOM esté listo. Como tal, la mayoría de los cargadores conservan el orden en que se ejecutan los scripts al tiempo que proporciona un callback para cuando el script está cargado y listo. Esto nos permite ejecutar cualquier código en línea dependiente como callback, tal vez, dentro de un contenedor listo para DOM, donde corresponda.

Además, cuando se trata de una página pequeña o bien optimizada, el DOM puede estar listo o incluso cargado antes de que los scripts hayan terminado de cargarse. Por lo tanto, si la página en cuestión no se mejora progresivamente, ya que depende en gran medida de JavaScript para el estilo, puede haber un FOUC o flash de contenido sin estilo. Del mismo modo, los usuarios pueden incluso experimentar un breve FUBC o flash de contenido no comportado. Es importante tener en cuenta estas cosas siempre que uses un cargador de scripts/recursos.


Paso 1 - El objeto de prueba yepnope

El objeto de prueba yepnope tiene siete propiedades básicas, cualquiera de las cuales es opcional. Este objeto incluye la prueba real, los recursos que se cargarán como resultado de la prueba, los recursos que se cargarán independientemente de la prueba y callbacks. Aquí hay un vistazo a los accesorios del objeto de prueba yepnope:

  • test:

    Un booleano que representa la condición que queremos probar.

  • yep:

    Una cadena o una matriz/objeto de cadenas que representa la URL de los recursos para cargar si la prueba es veraz.

  • nope:

    Una cadena o una matriz/objeto de cadenas que representa la URL de los recursos para cargar si la prueba es falsa.

  • load:

    Una cadena o una matriz/objeto de cadenas que representa la URL de los recursos para cargar independientemente del resultado de la prueba.

  • both:

    Una cadena o una matriz/objeto de cadenas que representa la URL de los recursos para cargar independientemente del resultado de la prueba. Básicamente, se trata de azúcar sintáctico, ya que su función es generalmente la misma que la función load.

  • callback:

    Una función que se llamará para cada recurso a medida que se carga secuencialmente.

  • complete:

    Una función que se llamará una vez cuando se hayan cargado todos los recursos.

Ahora, para tener una idea de la sintaxis, echemos un vistazo al uso más simple posible de yepnope: cargar un solo recurso.

... o tal vez cargando una variedad de recursos.

¿Qué tal un objeto literal para que podamos usar callbacks nombrados más tarde?

Recuerda, estos recursos se cargarán de forma asíncrona a medida que la página se esté descargando y procesando.


Paso 2 - Condiciones - ¡Pruebas para las características del futuro!

¡Podemos cargar recursos de forma asíncrona! Eso es genial, pero, ¿qué pasa si algunas páginas no requieren un determinado recurso? O, ¿qué sucede si un recurso solo es necesario en un navegador en particular que no admite una tecnología nueva e innovadora?

¡No hay problema! Aquí es donde el propósito subyacente de Yepnope se enfoca. Usando la propiedad de prueba, podemos cargar condicionalmente los recursos según la necesidad. Por ejemplo, supongamos que la biblioteca del Modernizer está cargada.

Para aquellos que no están familiarizados con Modernizer, es un ingenioso conjunto de pruebas utilizado para detectar el soporte de las funciones HTML5 y CSS3 en los navegadores.

Modernizer agrega nombres de clase apropiados al elemento html de las páginas, que representa las características compatibles y no compatibles, por ejemplo. "js flexbox no-canvas" etc. Además, puede acceder a cada una de las pruebas de Modernizer, que devuelven valores booleanos, individualmente, dentro de su código.

Entonces, al usar Modernizer, ¡probemos la compatibilidad con eventos hashchange y la compatibilidad con el historial de sesiones!

Aquí hay un vistazo a nuestra prueba:

Esta prueba, por supuesto, se volverá true solo si el navegador es compatible con estas dos características.


Paso 3 - Cargando recursos condicionalmente

Con nuestro conjunto de condiciones de prueba, ahora definiremos qué recursos cargar según el resultado de esta prueba. En otras palabras, si solo necesitas cargar un recurso específico cuando el navegador carece de una función, o la prueba falla, simplemente puedes definir ese recurso en la cláusula nope. A la inversa, puedes cargar recursos cuando la prueba pasa, dentro de la cláusula yep.

Por lo tanto, si asumimos que el navegador no admite una de estas dos funciones, cargaremos el complemento jHuery hashchange de Ben Alman, que habilita la compatibilidad con hashchange e historial en navegadores más antiguos que no admiten ninguna de estas funciones.

Vamos a cargar el complemento hashchange:

En el ejemplo anterior, no usaremos la propiedad yep, ya que solo proporcionamos un calzo si es necesario.

Para ilustrar la cláusula yep. Sin embargo, vamos a probar el soporte de transformación CSS3 y luego cargar una hoja de estilo para los navegadores que admiten transformaciones y una hoja de estilo de vainilla para los navegadores que no. Además, cargaremos un complemento jQuery que también imita las transformaciones de CSS3.

Usando ambos sip y nope:

Ten en cuenta que estos dos ejemplos cargarán todos los recursos de forma asíncrona mientras el resto de la página se descarga y se procesa.


Paso 4 - Cargar recursos independientemente de la condición de prueba

Yepnope también proporciona una forma de cargar recursos independientemente de los resultados de las pruebas a través de la propiedad load. La función load siempre cargará cualquier recurso que se alimente, independientemente del resultado de test. De manera similar, los accesorios both, que son, de nuevo, esencialmente azúcar sintáctica, también cargan recursos independientemente del resultado de la prueba, o más exactamente, en cualquiera de los resultados.

Cargando por defecto:

Cargando en ambas condiciones, azúcar sintáctica:

En los dos ejemplos anteriores, los recursos se cargarán, de forma asíncrona, sin importar qué.


Paso 5 - Callbacks - Código dependiente después de load

Como se mencionó anteriormente, no podemos escribir el código en línea de la manera habitual si ese código depende de uno de los scripts que se cargan. Por lo tanto, usaremos la función callback de yepnope que se activa una vez para cada recurso una vez que ha terminado de cargarse. La función callback acepta tres parámetros a los que se asigna lo siguiente:

  • url

    Esta cadena representa la url del recurso que fue cargado

  • result

    Un booleano que representa el estado de la carga.

  • key

    Si utilizas una matriz u objeto de recursos, esto representará el índice o el nombre de la propiedad del archivo que se cargó

Veamos un simple callback con el ejemplo del complemento hashchange anterior. Usaremos el método de enlace de jQuery para vincular un controlador al evento hashchange de window:

Un simple callback:

Independientemente del estado en que se encuentre el DOM, este callback, que en este caso particular está dentro de un contenedor listo para documentos, se activará tan pronto como se cargue el recurso.

Sin embargo, digamos que estamos cargando más de un script y que tenemos que enviar u ncallback para cada script mientras se carga. Especificar el código que necesitamos para ejecutar de la manera anterior crearía una redundancia ya que el callback se activa cada vez que se carga un recurso. Yepnope, sin embargo, proporciona una excelente manera de manejar los callbacks para cada recurso, independientemente de cualquier otro callback.

Al usar un objeto literal para definir los recursos que estamos cargando, podemos hacer referencia a cada clave de recursos, individualmente, dentro del callback.

Echemos un vistazo a un ejemplo en el que cargamos jQuery, así como también el complemento jhuery hashchange, que depende de que jQuery se cargue primero. Esta vez, sin embargo, usaremos literales de objetos!

Utilizando el ejemplo anterior como referencia, puedes implementar tus propios callbacks para cada carga de recursos de una manera ordenada.


Paso 6 - Complete - ¡Cuando todo está dicho y hecho!

Por último, tenemos le callback complete que solo se llama una vez, una vez que todos los recursos han terminado de cargarse. Entonces, por ejemplo, si estás "iniciando" una aplicación web y el código que necesitas para ejecutar depende de todos los archivos que estás cargando, en lugar de especificar un callback complete para cada recurso, debes escribir tu código dentro del código con un callback para que solo se active una vez, después de que se hayan cargado todas tus dependencias. A diferencia de la función callback, complete no toma ningún parámetro ni tiene acceso a urlresult o key.

El callback complete:

Así que, esencialmente, el callback complete es útil para cualquier cosa que deba hacerse una vez que se hayan cargado todos los recursos.


Paso 7 - Complementos de Yepnope, prefijos y más

Yepnope también nos proporciona otra pequeña e ingeniosa característica: ¡prefijos y filtros! Los prefijos predeterminados proporcionados por yepnope, que siempre están precedidos del principio de una URL de recursos, se utilizan para definir un archivo como CSS, precargar un recurso o apuntar a Internet Explorer o una de sus versiones, respectivamente. Echemos un vistazo:

  • css!

    Este prefijo se usa para forzar a yepnope a tratar un recurso como una hoja de estilo. De forma predeterminada, yepnope trata los archivos .css como hojas de estilo y todo lo demás como un archivo JavaScript. Entonces, si estás sirviendo CSS dinámicamente, este prefijo obligaría a yepnope a tratar ese recurso como una hoja de estilo.

  • preload!

    Este prefijo te permite cargar/almacenar en caché un recurso sin ejecutarlo.

  • ie!

    Puede haber circunstancias en las que necesites cargar recursos específicos solo si estás trabajando con Internet Explorer o una versión particular de Internet Explorer. Por lo tanto, los prefijos ie ayudan a dirigir la carga de recursos a versiones específicas de ie. Aquí hay una lista de los prefijos compatibles, por ejemplo, donde gt significa "versiones mayores que" y lt significa "versiones menores que".

    • Internet Explorer:
      ie!
    • Internet Explorer por número de versión:
      ie5!ie6!ie7!ie8!ie9!
    • Versiones de Internet Explorer mayores que:
      iegt5!iegt6!iegt7!iegt8!
    • Versiones de Internet Explorer anteriores a:
      ielt7!ielt8!ielt9!

    Todos estos filtros se pueden cambiar y sirven como una especie de operador OR, ya que si uno de ellos se evalúa como true, se cargará el recurso. Por lo tanto, si tuviéramos que apuntar ie7 e ie8, simplemente deberíamos anteponer los filtros apropiados a la url del recurso de la siguiente manera:

¡Creando tus propios filtros!

Si alguna vez lo necesitas, yepnope también proporciona los medios para crear tus propios filtros y prefijos mediante los métodos addFilter y addPrefix. A cualquier filtro o prefijo que crees se le pasa un resourceObject que contiene una serie de accesorios útiles. Sin embargo, recuerda que devolver el resourceObject como yepnope requiere que lo hagas. Aquí hay un vistazo al resourceObject:

  • url:

    La url del recurso que se está cargando.

  • prefixes

    La matriz de prefijos aplicados.

  • autoCallback

    Un callback que se ejecuta después de cada carga de script, separada de las demás.

  • noexec

    Un valor booleano que fuerza la precarga sin ejecución.

  • instead

    Una función avanzada que toma los mismos parámetros que la precarga.

  • forceJS

    Un booleano que obliga al recurso a ser tratado como javascript.

  • forceCSS

    Un booleano que obliga al recurso a ser tratado como una hoja de estilo.

  • bypass

    Un booleano que determina si cargar o no el recurso actual

Digamos, por ejemplo, que deseas la capacidad de alternar la carga de recursos entre tu CDN y el servidor web, sobre la marcha. ¿Podemos hacer eso, sin embargo? ¡Sí! Vamos a crear dos prefijos, uno para cargar desde el CDN y el otro para cargar desde tu servidor web.

¡Usando estos prefijos, ahora podemos cambiar fácilmente entre nuestro servidor CDN y nuestro servidor web!


Paso 8 - Algunas advertencias

Por lo tanto, mientras se mantiene una huella muy pequeña, el cargador condicional yepnope está repleto de una serie de características útiles. Sin embargo, hay algunas cosas que debes tener en cuenta antes de usarlo.

  • No document.write

    Al igual que con cualquier cargador asíncrono, no puedes utilizar document.write.

  • Internet Explorer inferior a 9 y ejecución de callback 

    Las versiones de Internet Explorer inferiores de la nueve no garantizan que los callbacks se ejecuten inmediatamente después de que se active el script relacionado.

  • Ten cuidado con el DOM

    Tu script se puede cargar y ejecutar antes de que el DOM esté listo. Por lo tanto, si estás manipulando el DOM, es recomendable utilizar un contenedor listo para DOM.

  • Aún debes combinar donde puedas

    El hecho de que estés utilizando un cargador asíncrono no significa que no debas combinar tus recursos donde puedas.

  • Límites de carga asíncrona de Internet Explorer

    Las versiones anteriores de Internet Explorer solo pueden cargar dos recursos del mismo dominio al mismo tiempo, mientras que otras versiones pueden cargar hasta seis. Por lo tanto, si estás cargando varios archivos, considera usar un subdominio o CDN.


Conclusión - Algunas cosas sobre yepnope.js

En general, encontré que yepnope es una gran utilidad. No solo es compatible con la carga asíncrona de scripts y hojas de estilo, sino que también te proporciona una forma agradable y limpia de cargar polivalentes HTML5 y CSS3 de forma condicional. El mecanismo callback está bien pensado y la capacidad de agregar tus propios prefijos y filtros es simplemente genial. En cuanto al rendimiento, encontré que yepnope está algo a la par con otros cargadores, como LABjs de Getify Solutions y require.js de James Burke. Obviamente, cada cargador es diferente y se adapta a una necesidad diferente, pero si aún no lo has hecho, te animo a que pruebes a yepnope.js.

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Code tutorials. Never miss out on learning about the next big thing.
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.