RequireJS - Plugins
RequireJS contém um pequeno conjunto de plug-ins que permitem carregar vários tipos de recursos como dependências. A seguir está uma lista de plug-ins disponíveis em RequireJS -
- text
- domReady
- i18n
- Carregamento CSS
texto
O plug-in de texto é usado para carregar recursos baseados em texto de forma assíncrona, que é usado principalmente para inserir o conteúdo HTML em arquivos JavaScript. Ele pode ser carregado quando você usa o texto! em qualquer chamada de módulo require ou define e passe a extensão do arquivo para o plug-in. Compare com o carregamento normal do módulo, o plug-in de texto carrega módulos usando XHR e não adicionará o código ao cabeçalho como umscript tag.
O recurso de arquivo de texto pode ser incluído como dependência no 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
O RequireJS pode ser usado para carregar scripts antes que o DOM esteja pronto e os desenvolvedores possam interagir com o DOM, apenas quando os scripts carregam completamente. Às vezes, os scripts podem ser carregados antes que o DOM esteja pronto. Portanto, para superar esse problema, o RequireJS fornece uma abordagem moderna chamada evento DOMContentLoaded que chama a função domReady assim que o DOM estiver 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
Ele pode ser usado com vários locais que fornecem i18nsuporte de pacote que será carregado automaticamente quando um módulo ou dependência especificar "i18n!" prefixo. Para fazer uso disso, baixe-o e coloque-o no mesmo diretório onde o seu arquivo JavaScript principal está presente. Coloque este plug-in no diretório chamado "nls" para localizar seus arquivos de localização.
Por exemplo, suponha que temos um arquivo js chamado country.js com o seguinte conteúdo e coloque-o no diretório como mydirectory / nls / country.js -
define({
"root": {
"india": "india",
"australia": "australia",
"england": "england"
}
});
Você pode adicionar uma tradução específica a um arquivo usando fr-fr locale e o código acima será alterado como -
define({
"root": {
"title": "title",
"header": "header",
"description": "description"
},
"es-es": true
});
Em seguida, especifique o arquivo em mydirectory / nls / es-es / country.js com o seguinte conteúdo -
define({
"root": {
"title": "título",
"header": "cabecera",
"description": "descripción"
},
"es-es": true
});
Você pode definir o local passando-o para o plug-in com a ajuda da configuração do módulo no arquivo main.js, conforme mostrado abaixo -
requirejs.config({
config: {
//set the config for the i18n plugin
i18n: {
locale: 'es-es'
}
}
});
Carregamento de CSS usando RequireJS
Você pode usar alguns plug-ins para carregar o arquivo CSS apenas anexando ao link do cabeçalho para carregar o arquivo CSS.
O CSS pode ser carregado usando sua própria função, conforme mostrado abaixo -
function myCss(url) {
var mylink = document.createElement("mylink");
mylink.type = "text/css";
mylink.rel = "stylesheet";
mylink.href = url;
document.getElementsByTagName("head")[0].appendChild(mylink);
}