RequireJS é uma tecnologia desenvolvida de JavaScript para JavaScript cujo propósito é ser a solução das dependências da sua aplicação ou site.
Para dar vida ao cenário, entenda que quando você usa jQuery, por exemplo, você naturalmente tem uma dependência. O controle de dependências não se limita somente à biblioteca de terceiros, porque caso você mesmo tenha criado um script que dependa de outro também seu, o RequireJS também consegue esse poder de gerenciamento para você.
Mas afinal, por que controlar dependências?
Isso torna a sua aplicação mais flexível; mais modular. Às vezes nós temos um script específico para uma página que irá fazer uma simples animação quando passarmos o mouse sobre o menu. Essa animação, por sua vez, depende do $.addClass(); do jQuery – e aí? Como você faz?
Vamos detalhar um pouco mais a necessidade; você possui três páginas, são elas:
- index.html para a sua página principal;
- contact.html para a sua página de contato;
- about.html para a sua página de informações sobre você ou sua empresa.
Elas são simples e compartilham vários recursos entre si. Entretanto, a contact.html possui um formulário de contato e você irá, por fim, usar o jQuery Validation para fazer a sanitização dos seus campos.
Vamos, então, filosofar:
- Quem precisa do quê? – A página contact.html precisa do jQuery Validation.
- O jQuery Validation depende de alguém? Se sim, de quem? – Sim, ele depende do jQuery em si.
- Contact.html seria, então, dependente do jQuery Vaildation e, consequentemente, do jQuery? – Sim.
Ainda não percebeu o “xis” da questão? index.html e about.html não precisam do jQuery Validation e, quem sabe, nem do jQuery em si. É um desperdício imenso injetarmos código desnecessário nessas páginas – mais carregamento, mais dependências por demanda para se preocupar e etc.
Começando
O RequireJS não é um gerenciador de dependências qualquer. Ele é um AMD – Asynchronous Module Definition -, o que significa que suas dependências não são carregadas por meio de um processo síncrono, mas sim assíncrono. Em outras palavras, você requisita e define módulos sob demanda, quando e onde precisar.
Para começarmos de fato, tenha em mente que criaremos um aplicativo do zero com uma boa estrutura de iniciação. Para irmos além, o primeiro passo é fazer o download da última versão – minificada ou não – do RequireJS. Depois, veja a estrutura da nossa aplicação:
app
|--index.html
`--assets
`--js
|--main.js
`--libs
|--jquery.2-1-1.min.js
`--require.js
- app/ é a pasta raiz
- app/index.html/ é a página principal
- app/assets/ é a pasta com o material da sua aplicação
- app/assets/js/ é a pasta que comportará o nosso material JavaScript
- app/assets/js/main.js/ é onde configuraremos os atributos principais do RequireJS
- app/assets/js/libs/ é a pasta de bibliotecas de terceiros.
Se você levantou essa estrutura, então mãos ao code!
No index.html, dentro do elemento <head></head> , vamos invocar o app/assets/js/libs/require.js e o seu configurador, app/assets/js/main.js/:
<script data-main="assets/js/main" src="assets/js/libs/require.js"></script>
Note que estamos matando dois coelhos numa cajadada só – quando você solicita pelo require.js, ele busca pelo seu configurador através do atributo data-main do mesmo elemento invocador (<script></script>). O caminho de diretório é o mesmo que o utilizado em src, mas você pode omitir a extensão .js porque o RequireJS traduz isso para você.
Agora, no main.js, teremos o seguinte script:
require.config({
name: 'app',
baseUrl: 'assets/js',
paths: {
'jquery': 'libs/jquery-2.1.1.min'
}
});
require(['jquery'], function ($) {
$('body').append('hello');
});
O require.config é o objeto em escopo global que o RequireJS manipula e essas são as suas propriedades:
- name: o nome da sua aplicação;
- baseUrl: a pasta raíz dos seus scripts JavaScript – note que eles serão sempre relativos;
- paths: o seu “dicionário” de importação de bibliotecas;
- ‘jquery’: o nome da biblioteca a ser importada
- ‘libs/jquery-2.1.1.min’: o arquivo referente à biblioteca – note que, como já falado, o caminho é relativo ao baseUrl, ou seja, libs está dentro de assets/js, o que significa que você pode omitir o caminho já outrora proposto.
Depois da primeira camada de código, temos este fragmento:
require(['jquery'], function ($) {
$('body').append('hello');
});
Que significa que você está requerendo a biblioteca jquery (mesmo nome proposto em paths no main.js) e está assinando ela ao caractere “#8221;. Então, sempre que você for utilizar um recurso dela, ou seja, do jQuery, resta você chamar pelo cifrão e voi là! Você conseguirá executar os seus códigos jQuery normalmente.
Basicamente, você conseguiu levantar uma aplicação com um mecanismo básico de dependências. O RequireJS vai muito além do que abordei aqui, me vamos abordar mais assuntos dentro disso futuramente.
De 0 a 10, o quanto você recomendaria este artigo para um amigo?