JavaScript – padrão de módulo

Coleção Filhos do JavaScript | Este artigo

Esse padrão se torna mais importante à medida que sua equipe ou base de código JavaScript aumenta de tamanho. Ele usa padrões anteriores
Namespaces
Funções imediatas
– Encapsulamento

Forma básica (usando notação literal)

var MyApp = {};
MyApp.MyModule = (function() {
var privateVariable = 1;
var publicVariable = 2;
var publicFunction = function() {return 3;}
return {
publicVariable
: publicVariable,
publicFunction
: publicFunction
};
})();
console
.log(MyApp.MyModule.privateVariable); //undefined
console
.log(MyApp.MyModule.publicVariable); //2
console
.log(MyApp.MyModule.publicFunction() ); //3

Formulário básico (usando um objeto)

var MyApp = {};
MyApp.MyModule = (function() {
var module = {};
var privateVariable = 1;
module.publicVariable = 2;
module.publicFunction = function() {return 3;}
return module;
})();
console
.log(MyApp.MyModule.privateVariable); //undefined
console
.log(MyApp.MyModule.publicVariable); //2
console
.log(MyApp.MyModule.publicFunction() ); //3

Alcançamos o encapsulamento usando uma clousure (função imediata) e decidindo quais propriedades são visíveis para o escopo pai. Como vimos, os clousures armazenam o escopo das variáveis ​​locais no momento da execução. É aqui que chamamos a função imediata.

Formulário avançado (usando injeção de parâmetro)

Às vezes, precisamos de um estado inicial ou dependências. Podemos usar os parâmetros da função imediata para conseguir isso.

var MyApp = {};
var config = {a:1};
MyApp.MyModule = (function(config) {
return {
MyVariable: config.a || 2
};
})(config);
console
.log(MyApp.MyModule.MyVariable); // 1

Notas

Além do padrão de módulo básico, você pode querer olhar para sistemas de módulos mais complexos:

  • Módulos CommonJS (servidor, Node.js) – ou
  • Definição de módulo assíncrono (AMD, navegador)

Antes de usá-los, reserve um tempo para avaliar se eles ajudam a resolver seu cenário específico, pois eles vêm com alguma sobrecarga extra. Você pode começar a procurar aqui ou nos links abaixo.
Escrevendo JavaScript modular com AMD, CommonJS e ES Harmony

Mais Informações

Módulos ECMAScript 6: a sintaxe final

“Learning JavaScript Design Patterns”, o Módulo Padrão, Addy Osmani 2014

“Mastering the Module Pattern”, Todd Motto

Coleção Filhos do JavaScript | Este artigo