4 de janeiro de 2015

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

No artigo anterior, mostrei um pouco do formato AMD. Hoje vamos falar sobre o CommonJS.

CommonJS

Também conhecido carinhosamente como CJS, se você já escreveu algum código em NodeJS vai estar familiarizado com o formato.

Usando o exemplo dado quando falamos sobre AMD, nós podemos escrevê-lo assim, usando CJS:

var $ = require( 'jquery' );
function myModule() {
  // código do seu módulo
}
module.exports = myModule;

Nesse formato as coisas ficam muito explícitas. Na variável $, estamos importando através do require o módulo jquery. Na função myModule(), você vai escrever seu módulo, que será exportado através do module.exports, para que possa ser importado para outro arquivo usando o require.

E o módulo jquery, para ser importado com o require, terá uma estrutura mais ou menos assim (arquivo jquery.js):

function jQuery() {
  // código da jQuery
}
module.exports = jQuery;

Bem fácil de entender, não?

O CommonJS também dispõe de um objeto exports, que nada mais é que um alias para module.exports. Usando o exports, você consegue exportar vários métodos separadamente:

exports.method1 = function method1() {
  // método 1 do seu módulo
};

exports.method2 = function method2() {
  // método 2 do seu módulo
};

Que também pode ser escrito dessa forma:

module.exports = function() {
  return {
    method1: function method1() {
      // método 1 do seu módulo
    },

    method2: function method2() {
      // método 2 do seu módulo
    }
  }
};

Os dois retornam exatamente a mesma coisa. Na verdade, no segundo exemplo é necessário executar a função antes de poder usar os métodos, mas os dois são formatos padrão de objetos Javascript, que você já está acostumado (se não está, em breve teremos posts falando sobre isso) :)

Podemos usar o CommonJS tanto no servidor, com NodeJS, por exemplo, como no browser, com o browserify.

Bom, vimos que, usando tanto AMD como o CommonJS, fica fácil de modularizar qualquer código JS. Mas pensando em um cenário mais amplo: como eu vou saber se o desenvolvedor que vai usar meu módulo está usando AMD ou CommonJS? Vou ter que disponibilizar duas versões?

Criar duas versões do mesmo código é praticamente uma heresia! DON’T REPEAT YOURSELF!

Mas como resolver isso então?

Vamos ver no próximo post, sobre UMD! Aguarde :D

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

javascript

1postperday, commonjs