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);
}