Quero apresentar para você o que é uma função IIFE e como ela se relaciona com o Revealing Module Pattern além de explicar as motivações para usar ambas técnicas em seus projetos.
Em seguida demonstro dois exemplos onde aplico o JavaScript Revealing Module Pattern no código para torná-lo simples e fácil para dar manutenção.
O que é uma função JavaScript IIFE
IIFE (Immediately Invoked Function Expression) é uma função que é executada logo após ser definida.
(function() {
// ...
})();A função IIFE é executada apenas uma vez. Variáveis e funções definidas dentro dela serão privados por padrão, ou seja, serão inacessíveis no escopo global.
Por que utilizo o JavaScript Module Pattern?
Utilizo o JavaScript Revealing Module Pattern quando quero evitar poluir o escopo global de um projeto JavaScript. Exponho de forma seletiva apenas funções e variáveis que desejo que se tornem públicas.
const hello = (function() {
const message = 'hello, world!';
return {
message,
}
})();No código acima utilizo uma função IIFE que retorna um objeto onde exponho as variáveis e funções que desejo. A função é executada apenas uma vez e seu resultado armazenado na constante hello.
Se preciso obter o texto armazenado na variável message basta acessá-lo através da variável hello.
console.log(hello.message);
// output: hello, world!Exemplo prático 1 – calculadora
Neste primeiro exemplo prático demonstro a criação de uma calculadora. Uso o Revealing Module Pattern para criar as funções sum e subtract e às revelo em seguida no retorno da função. O resultado atribuo a constante calculator.
const calculator = (function() {
"use strict";
const sum = function(a, b) {
return a + b;
};
const subtract = function(x, y) {
return x - y;
};
return {
sum,
subtract,
};
})();Para executar as operações de soma e subtração executo respectivamente os métodos calculator.sum e calculator.subtract como demonstro em seguida.
$(document).ready(function() {
"use strict";
const sum = calculator.sum(3, 7);
const sub = calculator.subtract(9, 3);
console.log(sum);
// output: 10
console.log(sub);
// output: 6
});Usando o Revealing Module Pattern consegui evitar de poluir o escopo global por que expus apenas a constante calculator que é por sua vez responsável por revelar os métodos calculator.sum e calculator.subtract.
Exemplo prático 2 – incrementador
Neste segundo exemplo demonstro a criação de um incrementador. Uso o Revealing Module Pattern para criar a variável counter e a função next mas revelo somente a função next. O resultado atribuo a constante incrementor.
const incrementor = (function() {
"use strict";
let counter = 0;
const next = function() {
return ++counter;
};
return {
next,
};
})();Para executar a operação de incremento executo o método incrementor.next como demonstro em seguida.
$(document).ready(function() {
"use strict";
const first = incrementor.next();
const second = incrementor.next();
console.log(first);
// output: 1
console.log(second);
// output: 2
});Novamente o Revealing Module Pattern permitiu manter o escopo global limpo. No contexto global existe apenas a constante incrementor que por sua vez revela o método incrementor.next. Como não revelei a variável counter a mesma se tornou uma propriedade privada do objeto incrementor.
Conclusão
Demonstrei neste artigo como utilizo funções IIFE & Revealing Module Pattern para organizar e separar responsabilidades em meus códigos JavaScript.