RequireJS - Guia rápido
RequireJS é uma biblioteca e carregador de arquivos JavaScript que gerencia as dependências entre os arquivos JavaScript e na programação modular. Também ajuda a melhorar a velocidade e a qualidade do código.
RequireJS foi desenvolvido por David Mark e sua versão inicial v1.0.0 foi lançada em 2009. É um código aberto e a versão 2.3.3 é sua versão estável recente.
Por que usar RequireJS?
É uma biblioteca JavaScript de código aberto sob a licença do MIT.
Ele fornece carregamento de módulo assíncrono.
Ele tem a capacidade de carregar dependências aninhadas.
Se você tiver muitos arquivos pequenos, não precisa se preocupar em manter o controle da ordem das dependências.
Ele fornece suporte para plug-ins e carrega mais de um arquivo JavaScript.
Recursos do RequireJS
Ele gerencia as dependências entre os arquivos JavaScript e melhora a velocidade e a qualidade do código.
Ele combina e minimiza os módulos em um script para uma experiência otimizada.
Ele reduz a complexidade do código em grandes aplicativos.
Ele reúne diferentes arquivos JavaScript de diferentes módulos no momento da compilação.
Ele permite uma depuração fácil à medida que carrega os arquivos de tags de script simples.
Neste capítulo, vamos entender como configurar o ambiente para RequireJS. Para isso, você precisa baixar a versão mais recente da biblioteca RequireJS. Você pode baixar a versão reduzida ou a versão detalhada .
Após o download, precisamos incluir o require.js arquivo em sua pasta libs e a estrutura de seu projeto deve ser conforme mostrado abaixo -
projectname/
|--index.html
|--libs/
|---main.js
|---require.js
|---helper/
|----util.jsPrecisamos definir um arquivo html como index.html onde RequireJS é carregado conforme mostrado abaixo.
<html>
<head>
<script data-main = "libs/main" src = "libs/require.js"></script>
</head>
<body>
<h1> RequireJS Sample Page </h1>
</body>
</html>Observe que apenas require.js com uma chamada RequireJS está incluída na tag de script para carregar o script.
RequireJS no Nó
Existem duas maneiras de obter o adaptador do Node.
npm - Você pode instalar a versão mais recente do requirejs a partir do prompt de comando, conforme mostrado abaixo.
npm install requirejsBaixar r.js - Você pode baixar o r.jsarquivo da página de download e fonte der.js página do repositório .
RequireJS pode ser inicializado passando a configuração principal no template HTML por meio do atributo data-main . Ele é usado pelo RequireJS para saber qual módulo carregar em seu aplicativo.
Por exemplo -
<script data-main = "scripts/main" src = "scripts/require.js"></script>Para incluir o arquivo Require.js, você precisa adicionar a tag de script no arquivo html. Dentro da tag de script, adicione odata-mainatributo para carregar o módulo. Isso pode ser considerado o ponto de entrada principal para seu aplicativo. O scripts / main é um arquivo JavaScript principal de um aplicativo que contém a configuração RequireJS.
Opções de configuração
A seguir estão as opções de configuração que podem ser definidas ao carregar o primeiro módulo do aplicativo -
baseUrl- É um caminho de rota para todos os módulos que são carregados através do RequireJS. O baseUrl é indicado por uma string começando com "barra (/)", contendo um protocolo e terminando com a extensão ".js". Se não houver baseUrl especificado, RequireJS usa o caminho do atributo data-main como baseUrl.
paths- Ele especifica os mapeamentos de caminho para módulos que são relativos ao baseUrl. Ele adiciona automaticamente a extensão .js a um caminho ao mapear o nome do módulo.
shim - Fornece o uso de bibliotecas não AMD com RequireJS configurando suas dependências e exportando seus valores globais.
map - Para um determinado módulo, um aplicativo usa o mesmo módulo de diferentes versões para diferentes objetivos, compartilhando seus ids para fazer uso do mesmo código para diferentes condições.
config- Fornece a configuração de um módulo usando a opção config e isso pode ser feito usando a dependência especial "módulo" e chamando seumodule.config() função.
urlArgs- Os argumentos da string de consulta são usados para buscar todos os recursos que são carregados usando RequireJS. Ele é usado para impedir o cache quando há configuração inadequada do navegador ou servidor.
waitSeconds- Especifica o número de segundos a aguardar antes de disparar no carregamento do script. O padrão é "7" segundos e "0" desativa o tempo limite.
packages - Fornece os pacotes CommonJS para configurar os módulos de carregamento.
context - Fornece o nome para carregamento de contexto que permite o carregamento de diferentes módulos em uma página.
deps - É uma matriz de dependências exigidas quando Require é especificado como objeto de configuração antes de carregar o RequireJS.
callback - Ele executa uma função após carregar as dependências e é necessário quando Require é especificado como objeto de configuração antes de carregar RequireJS.
xhtml - É usado para criar os elementos do script usando o document.createElementNS()método quando esta opção é definida como verdadeira .
scriptType- Define o valor do atributo de tipo de script usado no documento. O tipo padrão é "text / javascript".
skipDataMain- Ele ignora a varredura do atributo principal dos dados ao carregar o módulo, se esta opção for definida como verdadeira .
Um módulo em RequireJS é um objeto com escopo e não está disponível no namespace global. Portanto, o namespace global não será poluído. A sintaxe RequireJS permite carregar módulos mais rápido sem se preocupar em manter o controle da ordem das dependências. Você pode carregar várias versões do mesmo módulo na mesma página.
Definindo Módulos
Módulo é definido usando o define()função; a mesma função é usada para carregar o módulo também.
Pares Simples de Nome / Valor
Se o módulo for apenas uma coleção de pares de nome e valor, você pode usar a seguinte sintaxe -
define({
state: "karnataka",
city: "bangalore"
});Definindo Funções
Um módulo também pode usar uma função para frameworks, sem ter dependências. Isso pode ser feito usando a seguinte sintaxe -
define(function () {
//Do setup work here
return {
state: "karnataka",
city: "bangalore"
}
});Definindo funções com dependências
Se o módulo tiver dependências, a colocação do primeiro argumento (array de nomes de dependências), o segundo argumento (função de definição) e o objeto de retorno que define o módulo são mostrados na seguinte sintaxe -
define(["./mnc", "./startup"],
function(mnc, startup) {
return {
state: "karnataka",
city: "bangalore",
addCompany: function() {
mnc.decrement(this);
startup.add(this);
}
}
}
);Definindo um Módulo como uma Função
Não é obrigatório para um módulo retornar apenas objetos, qualquer valor válido de uma função também pode ser retornado. A seguinte sintaxe é usada para definir um módulo como uma função -
define(["./mnc", "./startup"],
function(mnc, startup) {
return function(title) {
return title ? (window.title = title) :
startup.storeName + ' ' + mnc.name;
}
}
);Definindo um Módulo com um Nome
Em alguns casos, você pode ter que incluir um nome para o módulo como o primeiro argumento para define(). Isso pode ser feito usando a seguinte sintaxe -
define("js2/title",
["js1/mnc", "js1/startup"],
function(mnc, startup) {
//Define js2/title object in here.
}
);Carregando Módulo
A função define () pode ser usada para carregar os módulos (módulo pode ser um objeto, função, classe ou um código que é executado após o carregamento de um módulo). Você pode carregar diferentes versões do mesmo módulo na mesma página. As diferentes versões podem ser analisadas na mesma ordem, mesmo que sejam carregadas em uma ordem diferente.
Sintaxe
define(['module1', 'module2'], function (module1, module2) {
//define the module value by returning a value
return function () {};
});Você pode passar uma lista de nomes de módulo ao definir um módulo e RequireJS pode ser usado para recuperar esses módulos antes de executar o módulo. Esses módulos podem ser passados como parâmetros dodefinition function.
Exemplo
O exemplo a seguir mostra o uso da função define () ao carregar os módulos. Crie um arquivo html com o nome index.html e coloque o seguinte código nele -
<!DOCTYPE html>
<html>
<head>
<title>Define() Function</title>
<script data-main = "main" src = "require.js"></script>
</head>
<body>
<h2>RequireJS Define() Function Example</h2>
</body>
</html>Criar uma jsarquivo com o nome main.js e adicione o seguinte código nele -
define(function (require) {
var myteam = require("./team");
var mylogger = require("./player");
alert("Player Name : " + myteam.player);
mylogger.myfunc();
});Agora, crie mais dois jsarquivos com os nomes team.js e player.js e coloque o código a seguir, respectivamente -
team.js
define({
player: "Sachin Tendulkar",
team : "India"
});player.js
define(function (require) {
var myteam = require("./team");
return {
myfunc: function () {
document.write("Name: " + myteam.player + ", Country: " + myteam.team);
}
};
});Resultado
Abra o arquivo HTML em um navegador; você receberá uma saída como na imagem a seguir -
Clique no botão "OK" para obter outra saída dos módulos -
Neste capítulo, discutiremos a otimização no RequireJS. O Otimizador em RequireJS tem as seguintes características -
Combina arquivos de script com a ajuda de UglifyJS para uso padrão ou Closure Compiler para uso Java
Combina arquivos CSS.
O otimizador é um componente do r.jsadaptador para Node e Nashorn . Ele é desenvolvido para fazer parte de um processo de construção e não para o processo de desenvolvimento.
Exemplo
Depois de baixar o r.js na pasta do projeto, a estrutura da pasta deve ser a seguinte -
projectfolder/
|-->index.html
|-->CSS/
|--->main.css
|--->other.css
|-->libs
|--->require.js
|--->main.js
|--->dependent1.js
|--->dependent2.js
|--->dependent3.jsSeu arquivo HTML terá a aparência mostrada abaixo -
<html>
<head>
<script data-main = "libs/main" src = "libs/require.js"></script>
</head>
<body>
<h1> RequireJS Sample Page </h1>
</body>
</html>Seu arquivo main.js será semelhante ao mostrado abaixo -
require(["dependent1", "dependent2", "dependent3"], function (dependent1, dependent2,
dependent3) {
});Seu arquivo main.css será semelhante ao mostrado abaixo -
@import url("other.css");
.app {
background: transparent url(../../img/app.png);
}Configuração básica do otimizador
Você pode usar os argumentos da linha de comando ou propriedades de construção de perfil para definir o projeto, ambos podem ser trocados entre si.
A seguir está a sintaxe para linha de comando -
node r.js -o baseUrl = . paths.jquery = content/path/jquery
name = main out = main-built.jsA seguir está a sintaxe para construir o perfil -
({
baseUrl: ".",
paths: {
jquery: "content/path/jquery"
},
name: "main",
out: "main-built.js"
})Depois disso, você pode passar o nome do perfil de construção para o otimizador na linha de comando, conforme mostrado abaixo -
node r.js -o build.jsExistem algumas deficiências na sintaxe do argumento da linha de comando. O uso combinado de argumentos de linha de comando ou propriedades de construção de perfil pode superar essas deficiências.
Otimizando um único arquivo JS
Para otimizar um único arquivo JS, você precisa criar um arquivo JS que contenha o conteúdo de todas as suas dependências. Seu arquivo deve ter a seguinte aparência -
({
baseUrl: "js/shop",
paths: {
"jquery": "jquery",
"backbone": "backbone",
"underscore": "underscore"
},
shim: {
"backbone": {
"department": ["underscore", "jquery"],
"dependent": "Backbone"
},
"underscore": {
exports: "_"
}
},
name: "../main",
out: "../built/js/main.js"
})Agora, você pode criar o arquivo main.js que contém todas as dependências do aplicativo. Este arquivo é usado em arquivo HTML para carregar todos os arquivos JS com uma solicitação. Observe que os arquivos criados não devem estar no diretório do código-fonte; os arquivos devem estar na cópia do projeto.
Uso de recursos CDN
O otimizador não carrega scripts usando os recursos de rede / CDN (Content Delivery Network). No caso, os scripts precisam ser carregados usando um CDN, então você precisa mapear esses arquivos para um nome de módulo e fazer o download dos arquivos para o caminho de arquivo local. Você pode usar a palavra especial "vazio" na configuração do caminho do perfil de construção, conforme mostrado na seguinte sintaxe -
({
baseUrl: "js",
name: "mainCDN",
out: "js/mainCDN-built.js",
paths: {
jquery: "empty:"
}
})O arquivo principal será semelhante ao mostrado abaixo -
requirejs.config({
paths: {
'jquery': 'https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min'
}
});
require(['jquery'], function ($) {
});Otimizando Arquivo CSS Único
Os arquivos CSS são otimizados usando os seguintes parâmetros diretamente na linha de comando, conforme mostrado abaixo -
node ../../r.js -o cssIn = main.css out = main-built.cssOs arquivos CSS também podem ser otimizados em um arquivo de construção usando as mesmas propriedades mostradas abaixo -
...
cssIn:"main.css",
out:"main-built.css"
...Ambos os métodos acima são permitidos e irão criar um arquivo chamado projectfolder / css / mainbuild.css . Este arquivo terá o conteúdo de main.css, os caminhos url () devidamente ajustados e os comentários removidos.
Otimizando todo o projeto
O otimizador usa o perfil de construção para otimizar todos os css e jsarquivos. No exemplo a seguir, o arquivo build.js é criado.
({
baseUrl: "js/shop",
appDir: '.',
paths: {
"jquery": "jquery",
"backbone": "backbone",
"underscore": "underscore"
},
shim: {
"backbone": {
"deps": ["underscore", "jquery"],
"exports": "Backbone"
},
"underscore": {
exports: "_"
}
},
optimizeCss: "standard.keepLines",
modules: [
{
name: "app"
}
],
dir: "../built"
})O arquivo build.js instrui o RequireJS a copiar todas as pastas do aplicativo (parâmetro appDir) para a pasta de saída construída (parâmetro dir) e aplicar todas as otimizações aos arquivos localizados na pasta de saída. Execute o seguinte comando para criar um perfil na pasta do aplicativo -
node r.js -o build.jsRequireJS usa jQuery como outra dependência e se registra como módulo nomeado jquery em letras minúsculas e, por padrão, também se registra usando as funções globais $ e jQuery enquanto usa AMD / RequireJS.
Carregando jQuery
require(['jquery'], function($) {
//code here
}Você pode carregar bibliotecas múltiplas e personalizadas junto com o jQuery como mostrado abaixo -
require(['custom_library_path','jquery'], function(load_library,$) {
//related code of $ and load_library
});A tabela a seguir mostra o uso de jQuery com RequireJS para especificar suas dependências.
| Sr. Não. | Tipos e descrição |
|---|---|
| 1 | Usando Shim Config jQuery usa configuração de shim para definir as dependências para plug-ins jQuery. |
| 2 | Carregando jQuery do CDN jQuery usa CDN para definir as dependências para plug-ins jQuery. |
O adaptador Node pode ser usado junto com a implementação de Require e do caminho de pesquisa do Node. Se não houver nenhuma configuração de módulo usada pelo RequireJS, você pode usar os módulos baseados em Node existentes sem alterá-los. Você pode instalar os pacotes de nós no diretório node_modules do projeto usando o comando npm.
O Node carregará módulos apenas do disco local e as opções de configuração, como mapa, pacotes, caminhos, etc., serão aplicadas apenas quando o módulo for carregado por RequireJS.
Instalando o Node
Você pode instalar o adaptador Node usando o seguinte comando que instalará os arquivos de lançamento mais recentes -
npm install requirejsVocê também pode instalar o Node das seguintes maneiras -
Você pode baixar o r.js deste link e mantê-lo na pasta do projeto.
Obter a fonte do repositório r.js ou instalá-lo através dist.js nó .
Uso de Nó
Para usar o nó, você precisa ter require ('requirejs') e mover a função require na configuração para o arquivo main.js de nível superior.
Por exemplo -
var requirejs = require('requirejs');
requirejs.config({
//load the mode modules to top level JS file
//by passing the top level main.js require function to requirejs
nodeRequire: require
});
requirejs(['name1', 'name2'],
function (name1, name2) {
//by using requirejs config, name1 and name2 are loaded
//node's require loads the module, if they did not find these
}
);Construindo módulos de nó com AMD ou RequireJS
Você pode fazer o módulo de código funcionar com RequireJS e Node, sem exigir usuários da biblioteca, e então usar o pacote amdefine para realizar este trabalho.
Por exemplo -
if (typeof define !== 'function') {
var define = require('amdefine')(module);
}
define(function(require) {
var myval = require('dependency');
//The returned value from the function can be used
//as module which is visible to Node.
return function () {};
});Otimizador como um Módulo de Nó
O módulo Node usa o otimizador RequireJS como um método de otimização usando a chamada de função em vez de usar a ferramenta de linha de comando.
Por exemplo -
var requirejs = require('requirejs');
var config = {
baseUrl: '../directory/scripts',
name: 'main',
out: '../build/main-built.js'
};
requirejs.optimize(config, function (buildResponse) {
//The text output of the modules specify by using buildResponse
//and loads the built file for the contents
//get the optimized file contents by using config.out
var contents = fs.readFileSync(config.out, 'utf8');
}, function(err) {
//code for optimization err callback
});Dojo é um kit de ferramentas JavaScript baseado na arquitetura de módulo AMD que fornece módulos adicionais para adicionar funcionalidade extra ao aplicativo da web e também economiza tempo e escala no processo de desenvolvimento de aplicativo da web.
Exemplo
O exemplo a seguir mostra o uso do Dojo junto com RequireJS. Crie um arquivo html com o nome index.html e coloque o seguinte código nele -
<!DOCTYPE html>
<html>
<head>
<title>RequireJS Dojo</title>
<script data-main="app" src="lib/require.js"></script>
</head>
<body>
<h2>RequireJS Dojo</h2>
<p>
Hello... ...
</p>
</body>
</html>Criar uma jsarquivo com o nome app.js e adicione o seguinte código nele -
require ({
//You can configure loading modules from the lib directory
baseUrl: 'lib',
paths: {
//mapping of package
dojo: 'http://sfoster.dojotoolkit.org/dojobox/1.7-branch/dojo'
}
}, [
//modules which we are using here
'dojo/dom'
], function(dom) {
//using the 'byId' method from dom module
var mydojo = dom.byId('dojo_val')
mydojo.innerHTML = "The text is displaying via dojo/dom";
}
);Resultado
Abra o arquivo HTML em um navegador; você receberá a seguinte saída -
O formato do módulo é definido por CommonJS. Ele é definido sem fornecer uma opção igual de navegadores a outros ambientes JavaScript. Portanto, a especificação CommonJS recomenda formatos de transporte e um requerimento assíncrono . Você pode converter facilmente o formato tradicional do módulo CommonJS para funcionar com o RequireJS. Porém, todos os módulos não serão convertidos para o novo formato. Algumas das exceções estão listadas abaixo -
- Módulos com código condicional para fazer uma chamada necessária.
- Módulos com dependências circulares.
Conversão Manual
Módulos CommonJS podem ser convertidos manualmente para o formato RequireJS usando a seguinte sintaxe -
define(function(require, exports, module) {
//place CommonJS module content here
});Ferramenta de conversão
Os módulos CommonJS podem ser convertidos para o formato RequireJS usando a ferramenta de conversão de projeto r.js , que é construída no arquivo r.js. Você deve especificar o caminho do arquivo a ser convertido e a pasta de saída conforme mostrado abaixo -
node r.js -convert path/to/commonjs/modules/ path/to/outputDefinindo o valor exportado
Alguns dos sistemas em CommonJS permitem definir o valor exportado atribuindo o valor exportado como module.exports But RequireJS, suporta a maneira mais fácil de retornar o valor da função passada para definir. A vantagem disso é que você não precisa dos argumentos de exportação e função do módulo, portanto, você pode deixá-los fora da definição do módulo, conforme mostrado abaixo -
define(function (require) {
var name = require('name');
//Define the module as exporting a function
return function () {
name.doSomething();
};
});Sintaxe Alternativa
A maneira alternativa de especificar dependências é por meio de um argumento de matriz de dependência define () . Mas, a ordem dos nomes na matriz de dependência deve corresponder à ordem dos argumentos passados para a função de definição define () conforme mostrado abaixo -
define(['name'], function (name) {
return function () {
name.doSomething();
};
});Carregando Módulos de Pacotes CommonJS
Para saber sobre a localização e os atributos de pacote, os módulos são carregados em pacotes CommonJS usando RequireJS, definindo a configuração RequireJS.
Ferramenta de Otimização
A ferramenta de otimização está presente no RequireJS, que pode combinar as definições do módulo em pacotes otimizados para entrega no navegador. Ele opera como uma ferramenta de linha de comando para que você possa usá-lo como parte da implantação do código.
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);
}