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