RequireJS - Plugin
RequireJS contiene un piccolo set di plugin che consentono di caricare vari tipi di risorse come dipendenze. Di seguito è riportato un elenco dei plugin disponibili in RequireJS -
- text
- domReady
- i18n
- Caricamento CSS
testo
Il plug-in di testo viene utilizzato per caricare le risorse basate su testo in modo asincrono, utilizzato principalmente per inserire il contenuto HTML nei file JavaScript. Può essere caricato quando usi il testo! prefisso in qualsiasi chiamata di modulo require o define e passa l'estensione del file al plug-in. Rispetto al normale caricamento del modulo, il plug-in di testo carica i moduli utilizzando XHR e non aggiungerà il codice all'intestazione comescript etichetta.
La risorsa del file di testo può essere inclusa come dipendenza nel codice come -
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 può essere utilizzato per caricare gli script prima che il DOM sia pronto e gli sviluppatori possano interagire con il DOM, solo quando gli script vengono caricati completamente. A volte gli script possono essere caricati prima che DOM sia pronto. Quindi, per superare questo problema, RequireJS fornisce un approccio moderno chiamato evento DOMContentLoaded che chiama la funzione domReady una volta che DOM è pronto.
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
Può essere utilizzato con più impostazioni locali che forniscono i18nsupporto per bundle che verrà caricato automaticamente quando un modulo o una dipendenza specifica "i18n!" prefisso. Per utilizzarlo, scaricalo e mettilo nella stessa directory in cui è presente il tuo file JavaScript principale. Posiziona questo plug-in nella directory chiamata "nls" per individuare i file di localizzazione.
Ad esempio, supponiamo di avere un file js chiamato country.js con il seguente contenuto e posizionalo nella directory come miadirectory / nls / country.js -
define({
"root": {
"india": "india",
"australia": "australia",
"england": "england"
}
});
Puoi aggiungere una traduzione specifica a un file usando fr-fr locale e il codice sopra cambierà come -
define({
"root": {
"title": "title",
"header": "header",
"description": "description"
},
"es-es": true
});
Quindi, specifica il file in mydirectory / nls / es-es / country.js con il seguente contenuto:
define({
"root": {
"title": "título",
"header": "cabecera",
"description": "descripción"
},
"es-es": true
});
Puoi impostare la locale passandola al plugin con l'aiuto di module config nel file main.js come mostrato di seguito -
requirejs.config({
config: {
//set the config for the i18n plugin
i18n: {
locale: 'es-es'
}
}
});
Caricamento CSS tramite RequireJS
È possibile utilizzare alcuni plug-in per caricare il file CSS semplicemente aggiungendolo al collegamento dell'intestazione per caricare il file CSS.
Il CSS può essere caricato utilizzando la tua funzione come mostrato di seguito:
function myCss(url) {
var mylink = document.createElement("mylink");
mylink.type = "text/css";
mylink.rel = "stylesheet";
mylink.href = url;
document.getElementsByTagName("head")[0].appendChild(mylink);
}