RequireJS é uma tecnologia desenvolvida de JavaScript para JavaScript cujo propósito é ser a solução das dependências da sua aplicação ou site. Mas afinal, por que controlar dependências?
Imagem ilustrativa
Imagem ilustrativa

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:

1 app 
2 |--index.html
3 `--assets
4    `--js
5       |--main.js
6       `--libs
7          |--jquery.2-1-1.min.js
8          `--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/:

1 <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:

1 require.config({ 
2   name: 'app',
3   baseUrl: 'assets/js',
4   paths: {
5     'jquery': 'libs/jquery-2.1.1.min'
6   }
7 });
8
9 require(['jquery'], function ($) { 
10   $('body').append('hello');
11 });

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:

1 require(['jquery'], function ($) {
2 $('body').append('hello');
3 });

Que significa que você está requerendo a biblioteca jquery (mesmo nome proposto em paths no main.js) e está assinando ela ao caractere “$”. 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.

—–

Artigo de Guilherme Oderdenge, publicado originalmente no iMasters.

Compartilhe:

Sobre o autor:

Sobre o autor:

Posts Relacionados:

Novidades do Blog

Deixe seu e-mail abaixo para passar a receber promoções e novidades do nosso Blog.