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
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/:
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:
Facebook
WhatsApp
Twitter
Linkedin
Telegram
Sobre o autor:
DialHost Internet
Há mais de 18 anos proporcionando um serviço de hospedagem de sites voltado 100% na Experiência e Sucesso do Cliente, prezando a qualidade, transparência e segurança.
Sobre o autor:
DialHost Internet
Há mais de 18 anos proporcionando um serviço de hospedagem de sites voltado 100% na Experiência e Sucesso do Cliente, prezando a qualidade, transparência e segurança.
A partir de 1º de julho de 2022, o Google G Suite, a edição legada e gratuita do serviço Google Workspace, será extinguida. Se você utiliza o serviço, precisará fazer o upgrade de conta para o Workspace para não perder o seu acesso e a sua conta
Antes de começar a escrever sobre os melhores Plugins no Google Chrome para aumentar sua produtividade, preciso começar essa publicação com uma definição muito importante
