Como criar componentes JS usando módulos - AMD, CommonJS e UMD - Parte 1/3

Depois de um tempo escrevendo código Javascript, você começa a perceber que algumas coisas começam a se repetir, outras você precisa reutilizar, então você pensa:

Como eu posso modularizar isso, para que esse componente seja reutilizado em vários projetos diferentes?

Para responder a essa pergunta, entram em cena duas especificações de módulo: AMD e CommonJS (ou CJS).

Eles permitem que você escreva seus códigos de forma modular, seguindo algumas definições. Vamos falar sobre cada um deles.

AMD

Asynchronous Module Definition (AMD) ficou bastante conhecido por causa do RequireJS. O formato de utilização do AMD é o seguinte:

1
2
3
define( 'moduleName', [ 'jquery' ], function( $ ) {
  return 'Hello World!';
});

Essa é a estrutura mais básica de um módulo escrito no formato AMD. A função define será usada para todo novo módulo que você criar.

Como primeiro parâmetro dessa função, você pode passar o nome do módulo - opcional - (que será usado para você fazer o “include” dele em outro lugar).

O segundo parâmetro é um array de dependências desse módulo, também opcional. No nosso exemplo, colocamos como dependência a biblioteca jQuery.

E o terceiro parâmetro é a função de callback que define o módulo e retorna o seu conteúdo. Essa função é obrigatória. Ela será chamada assim que todas as dependências do array no segundo parâmetro forem baixadas, e estiverem prontas para uso.

As dependências normalmente retornam valores. Para usar os valores retornados, você deve passar como parâmetros da função as variáveis que irão receber os valores das dependências, sempre na mesma ordem do array.

Por exemplo, se no seu módulo você vai precisar utilizar o jQuery e a LoDash, você pode fazer a chamada da seguinte forma:

1
2
3
define([ 'jquery', 'lodash' ], function( $, _ ) {
  // código do seu módulo
});

Se não houver dependências, a função já será executada assim que ela for chamada:

1
2
3
define(function() {
  // código do seu módulo
});

A ideia aqui é falar apenas como funcionam cada uma das especificações. Em posts futuros, entrarei em mais detalhes de como usar cada formato, especificamente.

No próximo post, falaremos um pouco sobre o CommonJS. Até lá!

Sobre o #1postperday: https://blog.da2k.com.br/2014/12/31/um-post-por-dia/