RequireJS es una forma efectiva de mejorar la velocidad y la calidad de su código JavaScript, lo que lo hace mucho más legible y fácil de mantener.
En este artículo, le presentaré RequireJS y cómo puede comenzar a usarlo. Continuaremos requiriendo archivos y definiendo un módulo e incluso tocaremos la optimización.
En términos simples, require.js es un gestor de scripts que le permite deslizar su código JavaScript en archivos y módulos, gestionando así las dependencias de cada modelo.
Para comenzar a trabajar con RequireJS y su definición de módulo asíncrono (AMD) primero debemos descargar y, luego, vincula el archivo require.js en el encabezado de nuestro documento de la siguiente manera:
Es posible que se pregunte qué es ese atributo principal de datos , y usar RequireJS significa que cuando llama requiere en el encabezado de su documento también está vinculando al archivo principal de su aplicación JavaScript, el atributo principal de datos es un enlace al archivo JavaScript principal para su aplicación, en este caso main.js. (Tenga en cuenta que RequireJS agrega automáticamente .js al final del nombre de archivo).
En este archivo main.js, colocará la configuración para RequireJS, cargará sus módulos y definirá una ruta base para usarla cuando necesite archivos.
RequireJS usa una función de requerir simple para cargar scripts, en este ejemplo RequireJS carga jQuery:
require(["jquery"], function($) {return $(‘#mydiv”).html(‘Hello this is RequireJS talking”);});Una de las mejores cosas de RequireJS es que es extremadamente legible, si nos fijamos en ese bloque de código, verá que primero require toma el archivo con el nombre de jquery.js y pasa una función anónima con jQuery's $ como parámetro Cuando lo haya hecho, puede usar todo el código de JQuery que desee.
Ahora, normalmente no tendrías la biblioteca jQuery en un archivo llamado jquery.js, como con la mayoría de los complementos y frameworks, normalmente elegimos cargar desde su GitHub o Google CDN, y para eso necesitamos configurar los caminos para que señalan el lugar correcto:
require.config({paths: {"jquery": "https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"}});Esto significa que puede requerir jQuery a través de Google y usarlo sin problemas. (Tenga en cuenta que he usado el nombre "jquery" en este ejemplo, pero puede llamarlo como quiera).
El uso del patrón AMD significa que nuestro código se puede estructurar en módulos; estos modelos son solo partes de código que hacen algo en nuestra aplicación. Puede colocar dos líneas de código en un módulo o 100, solo depende de lo que quiera que haga ese módulo.
Para definir un módulo usamos un código como este:
define(function () {function add (x,y) {return x + y;}});En este ejemplo, he creado una función de adición simple sin dependencias, pero si esta función necesitara que jQuery funcione correctamente, la función de definición se estructuraría así:
define([‘jquery’], function () {function place(mydiv) {return $(mydiv).html(‘My Sample Text’);}});Usando esta sintaxis le decimos a JavaScript que primero obtenga jQuery y luego ejecute el código para que jQuery esté disponible cuando sea necesario. También podemos usar esto en módulos que hemos escrito en archivos JavaScript, no está limitado a frameworks o complementos.
Como puede ver, RequireJS es una gran herramienta para organizar sus archivos en módulos y solo cargar lo que necesita. La desventaja es que demasiados archivos JavaScript producen tiempos de carga deficientes, por lo que RequireJS incluye un optimizador para recopilar los datos de todos los archivos y colocarlos en un solo archivo minimizado.
Con todo, RequireJS es una de las mejores formas de organizar y optimizar su JavaScript para la web moderna.
¿Has usado RequireJS en un proyecto? ¿Ha mejorado su flujo de trabajo? Háganos saber en los comentarios.
Imagen / miniatura destacada, imagen de cajas a través de Shutterstock.