RequireJS - Complementos

RequireJS contiene un pequeño conjunto de complementos que permiten cargar varios tipos de recursos como dependencias. A continuación se muestra una lista de complementos disponibles en RequireJS:

• text
• domReady
• i18n
• Carga de CSS

texto

El complemento de texto se utiliza para cargar recursos basados ​​en texto de forma asincrónica, que se utiliza principalmente para insertar el contenido HTML en archivos JavaScript. ¡Se puede cargar cuando usas el texto! prefije cualquier llamada de módulo require o define y pase la extensión del archivo al complemento. En comparación con la carga de módulos normal, el complemento de texto carga módulos usando XHR y no agregará el código al encabezado como unscript etiqueta.

El recurso del archivo de texto se puede incluir como dependencia en el código como:

require(["mymodule", "text!mymodule.html", "text!mymodule.css"],
   
   function(mymodule, html, css) {
      //the html and css variables will be the text
      //of the mymodule.html file and mymodule.css files respectively
   }
);

domReady

RequireJS puede usarse para cargar scripts antes de que DOM esté listo y los desarrolladores puedan interactuar con DOM, solo cuando los scripts se carguen por completo. A veces, los scripts se pueden cargar antes de que DOM esté listo. Entonces, para superar este problema, RequireJS proporciona un enfoque moderno llamado evento DOMContentLoaded que llama a la función domReady una vez que DOM está listo.

require(['domReady'], function(domReady) {
   
   domReady(function() {
      //the domReady function is called when DOM is ready 
      //which is safe to manipulate DOM nodes in this function
   });
});

i18n

Se puede utilizar con varias configuraciones regionales que proporcionan i18npaquete de soporte que se cargará automáticamente cuando un módulo o dependencia especifique "i18n!" prefijo. Para hacer uso de esto, descárguelo y colóquelo en el mismo directorio donde está presente su archivo JavaScript principal. Coloque este complemento en el directorio llamado "nls" para ubicar sus archivos de localización.

Por ejemplo, suponga que tenemos un archivo js llamado country.js con el siguiente contenido y colóquelo en el directorio como mydirectory / nls / country.js -

define({
   
   "root": {
      "india": "india",
      "australia": "australia",
      "england": "england"
   }
});

Puede agregar una traducción específica a un archivo usando fr-fr locale y el código anterior cambiará como -

define({
   
   "root": {
      "title": "title",
      "header": "header",
      "description": "description"
   },
   
   "es-es": true
});

A continuación, especifique el archivo en mydirectory / nls / es-es / country.js con el siguiente contenido:

define({
   
   "root": {
      "title": "título",
      "header": "cabecera",
      "description": "descripción"
   },
   
   "es-es": true
});

Puede configurar la configuración regional pasándola al complemento con la ayuda de la configuración del módulo en el archivo main.js como se muestra a continuación:

requirejs.config({
   
   config: {
      //set the config for the i18n plugin
      
      i18n: {
         locale: 'es-es'
      }
      
   }
});

Carga de CSS usando RequireJS

Puede usar algunos complementos para cargar el archivo CSS con solo agregar el enlace del encabezado para cargar el archivo CSS.

El CSS se puede cargar usando su propia función como se muestra a continuación:

function myCss(url) {
   var mylink = document.createElement("mylink");
   mylink.type = "text/css";
   mylink.rel = "stylesheet";
   mylink.href = url;
   document.getElementsByTagName("head")[0].appendChild(mylink);
}