Front End

2 out, 2014

Gerenciando dependências com RequireJS

Publicidade

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.