Introdução ao AMD com Require.js
Antes de entrarmos no foco do artigo, é importantíssimo tocar no assunto modularização.
A modularização é um conceito muito antigo em termos computacionais, em poucas palavras, é a separação de funcionalidades, redução de complexidade e principalmente, o reuso de código.
O Jean Carlo Emer postou um um artigo aqui mesmo muito bom sobre _Modularização em JavaScript._ Recomendo fortemente ler o artigo na íntegra. Nele, o autor também dá um exemplo com AMD e fala dos pontos fracos e fortes do uso.
AMD
Buscando a modularização do código JavaScript, um dos padrões mais falados ultimamente é o Asyncronous Module Definition (AMD), consiste basicamente de que nossos módulos escritos podem ser requisitados assincronamente quando necessários.
Require.js
O script loader mais famoso da internet, o RequireJS é o cara responsável por carregar os nossos scripts assincronamente. A página do projeto dá muito mais informações sobre compatibilidade e benefícios de seu uso.
Exemplificando
Para exemplificar o AMD com RequireJS, vamos criar uma aplicação simples que usa o jQuery para pegar os números de dois inputs da tela, passa para outro módulo que faz apenas a soma desses números, e devolve para a aplicação principal.
Sim, apenas isso…
A intenção deste artigo é introduzir à estruturação, e como aplicar o AMD utilizando o RequireJS.
1º Passo: Adicione o require.js ao seu projeto
Faça o download no site oficial (ou use CDN), e incorpore-o na aplicação:
<script data-main="js/app" src="//cdnjs.cloudflare.com/ajax/libs/require.js/2.1.20/require.min.js">
</script>
</body>
</html>
O atributo data-main
diz ao RequireJS carregar o arquivo app.js, logo após que carregar o require.js.
2º Passo: Configuração
Dentro do arquivo app.js, vamos configurar da seguinte forma:
requirejs.config({
"baseUrl": "js/modules",
"paths": {
"jquery": "//code.jquery.com/jquery-2.1.1.min",
"main": "../main"
}
});
// Chamando módulo principal para iniciar a aplicação
requirejs(["main"]);
A propriedade baseUrl
diz de onde os módulos serão carregados, exceto os que passamos em paths
. Onde que o main está em um diretório anterior de acordo com o diretório configurado no baseUrl. E o jQuery que vem por CDN.
Mais abaixo, chamamos o nosso módulo main, que será o módulo principal da aplicação.
3º Passo: Criando nosso módulo
No arquivo modules/myModule.js criamos nosso simples módulo.
// Ou podemos declarar o nome explicitamente...
// define('myModule', function () {
define(function () {
return {
sum: function (a, b) {
return (+a) + (+b);
}
}
});
O grande Addy Osmani, publicou um artigo muito bom sobre JavaScript Modular, onde demonstra outras formas de declarar módulos AMD.
4º Passo: Criando o main.js
Neste arquivo é onde controlamos nossa aplicação, tendo como dependência dois módulos, jquery e myModule. Ou seja, para iniciar o módulo main, temos que primeiro carregar suas dependências.
define(
["jquery", "myModule"],
function ( $, myModule ) {
$(function () {
$('.btn').on('click', function () {
var number1 = $('#number1').val();
var number2 = $('#number2').val();
alert(myModule.sum(number1, number2));
});
});
}
);
Concluindo
Finalizamos por aqui pessoal, apesar do exemplo ser tão simples, acho que consegui introduzir o conceito necessário.
Disponibilizei o código do exemplo no Plunker, dá uma olhada lá caso precise 😉
Abraço!
Originally published at tableless.com.br.