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!

AMD