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:
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:
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.
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.
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!