Module Pattern in JavaScript

Em JavaScript, o encapsulamento de código pode ser obtido usando Padrões de Módulos. Além disso, é usado para criar propriedades privadas e públicas. Há várias maneiras de implementar um padrão de módulo. Neste artigo, aprenderemos a criar um padrão de módulo no ES5.  Antes de prosseguirmos e começarmos a analisar a implementação do padrão de módulo, aqui estão alguns dos benefícios:

• Congelar o escopo
• Code encapsulation
• Criando escopo privado ou público
• Creating a namespace
• Criando encapsulamento público e privado

Podemos implementar um padrão de módulo usando JavaScript Object Literals e expressão de função Immediately-Invoked. Apenas para refrescar sua memória, um literal de objeto será semelhante à listagem abaixo:

var Product = {
 
    price: 600,
    setOrder: function () {
        return this.price;
    }
}
 
console.log(Product.setOrder());

Você pode adicionar propriedades após a criação do objeto. Além disso, uma expressão de função Imediatamente Invocada se parece com o exemplo abaixo:

var add = function (num1, num2) {
    let res = num1 + num2;
    console.log(res);
}(7, 2);

Com a combinação desses dois, podemos implementar padrões de módulo em JavaScript. Vamos começar com a criação do módulo:

(function () {
    'use strict';
    // Your code here
    // All function and variables are scoped to this function
    var price = 99;
 
}());
 
console.log(price); // undefined 

É um módulo independente ou um fechamento anônimo. Ele cria o escopo para a função e tudo é encapsulado dentro dessa própria função. Então, quando tentamos acessar o preço fora da função, ele estava indefinido. Lembre-se de que esse módulo anônimo está presente no escopo global.

Podemos exportar o módulo atribuindo-o a uma variável usando expression e, em seguida, criando encapsulamento privado e público usando a instrução return. Considere o código abaixo:

var module1 = (function () {
    'use strict';
 
    //private 
    let color = 'red';
 
    // public 
    return {
        price: 800
    }
}());
 
console.log(module1.price); // 800 
console.log(module1.color); // undefiend 

Estamos seguindo o trecho de código acima,

1. Creating an IIFE.
2. Atribuindo a função IIFE a uma variável
3. Retornando um literal de objeto anônimo para criar encapsulamento privado e público.

Todas as propriedades do objeto retornado se tornariam públicas e poderiam ser acessadas fora do módulo, no entanto, qualquer variável que não faça parte do objeto retornado não pode ser acessada fora do módulo. É por isso que, para o preço, estamos obtendo 800 como saída, mas, para a cor, o valor é indefinido porque é privado para o módulo1. Vamos modificar o módulo1 para ter mais propriedades privadas e públicas, conforme mostrado na listagem abaixo:

var module1 = (function () {
 
    //private 
    let color = 'red';
    let model;
    function setModel(m) {
        model = m;
    }
    // public 

    return {
        price: 800,
        getModel: function (m) {
            setModel(m);
            return model;
 
        }
 
    }
 
}());
 
console.log(module1.price); // 800 
console.log(module1.getModel('bmw')); // bmw

Como você pode ver, podemos acessar variáveis encapsuladas privadas usando as funções encapsuladas públicas. Principalmente no padrão de módulo, cada variável é privada até que faça parte do objeto de retorno.

O padrão de módulo emula classes em JavaScript. Ele cria variáveis encapsuladas privadas e públicas retornando um objeto. Ele encapsula a privacidade usando fechamentos. Em um diagrama, podemos mostrar:

Outra variação do padrão de módulo é o Padrão de Módulo Revelador. A única variação é que retornamos o objeto conforme mostrado na lista abaixo:

var module1 = (function () {
 
    //private 
    let color = 'red';
    let model;
    function setModel(m) {
        model = m;
    }
    let privatePrice = 800;
    let getModel = function (m) {
        setModel(m);
        return model;
 
    }
    // public 

    return {
        price: privatePrice,
        model: getModel
 
    }
 
}());
 
console.log(module1.price); // 800 
console.log(module1.model('audi')); // audi 

O Padrão de Revelação do Módulo tem nomenclatura mais consistente e melhor legibilidade do código. Para resumir usando o padrão de módulo, podemos obter encapsulamento público e privado em JavaScript. Espero que você ache este post útil e agora implemente o Module Pattern em seu aplicativo JavaScript.

Espero que você ache este post útil. Obrigado por ler.  Se você gostou deste post, por favor, compartilhe-o. Além disso, se você não tiver feito check-out Infragistics Ignite UI for Angular Componentes, certifique-se de fazê-lo! Eles têm 30+ componentes de Angular baseados em materiais para ajudá-lo a codificar aplicativos da web mais rapidamente.