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!