Organize JavaScript com padrões modulares

Mar 02 2023
Descubra padrões modulares para organização e reutilização de código otimizadas
“Programadores ruins se preocupam com o código. Bons programadores se preocupam com estruturas de dados e seus relacionamentos.
Foto de Scott Graham no Unsplash

“Programadores ruins se preocupam com o código. Bons programadores se preocupam com estruturas de dados e seus relacionamentos.” - Linus Torvalds, o criador do Linux.

Adequado para escrever uma biblioteca ou configurar lógica personalizada dentro do aplicativo

Expressões de funções invocadas imediatamente — IIFE

Variáveis ​​globais em JavaScript podem causar problemas como colisões de nomes e código espaguete, levando ao que é conhecido como poluição de escopo global . Para evitar isso, uma prática recomendada padrão é Expressões de função invocada imediatamente (IIFEs).

IIFEs são funções anônimas que são invocadas assim que são declaradas, tornando-as uma ótima opção para estruturar seu código. Ao definir o escopo das variáveis ​​para a função, podemos encapsular com segurança a lógica de implementação. Os IIFEs também são benéficos porque não criam novas variáveis ​​no escopo global, o que elimina preocupações sobre conflitos de nomes.

No entanto, os IIFEs não fornecem um sistema para gerenciar dependências, o que pode torná-los menos úteis para projetos mais complexos. Apesar dessa limitação, os IIFEs ainda podem ser uma excelente escolha ao trabalhar com JavaScript vanilla (ES5), ajudando você a escrever um código mais limpo e de fácil manutenção:

// Create a module with a public API to 
// prevent pollution of global namespace
(function() {
  var foo = 'bar';

  function sayHello(name) {
    console.log('Hello, ' + name + '!');
  }

  // public API
  var intro = {
    greet: function(name) {
      sayHello(name);
      console.log('My name is ' + foo + '.');
    }
  };

  // expose public API to the global scope
  window.introModule = intro;
})();

O Revealing Module Pattern tira proveito do fato de que as variáveis ​​em JavaScript têm escopo para funções. Semelhante a um IIFE, uma referência ao módulo é necessária ao implementar o padrão, exigindo um nome para o módulo.

As funções nomeadas são criadas, cada uma adicionando um único valor ao escopo global. O escopo da função encapsula a implementação do módulo, tornando-o fácil de ler e entender com uma distinção clara entre a implementação interna (privada) e a API exposta (pública).

Uma desvantagem é que esses módulos devem ser carregados na ordem correta e não há gerenciamento de dependência, por isso é importante saber quais módulos dependem de outros e garantir que todos estejam incluídos no aplicativo. Esse padrão funciona em todos os navegadores, mesmo no Internet Explorer, e pode ser implementado como singleton ou construtor .

Padrão de Módulo Revelador Singleton

O Singleton Revealing Module Pattern é um padrão de design em JavaScript que nos permite encapsular módulos dentro de uma função. A função de contêiner com escopo do módulo cria variáveis ​​privadas e métodos inacessíveis externamente. A interface pública é exposta por um objeto literal que contém apenas as propriedades e métodos que queremos expor.

Para implementar esse padrão, criamos um IIFE, que garante que tenhamos apenas uma instância do módulo. O módulo pode então ser acessado de outras partes do código chamando a função que contém a definição do módulo.

O Singleton Revealing Module Pattern é útil quando queremos criar um módulo que tenha apenas uma instância ao longo da vida da aplicação. É uma maneira simples e eficaz de encapsular a funcionalidade e mantê-la separada de outras partes do código:

var person = function() {
  var _firstName = '';
  var _lastName = '';

  function setName(firstName, lastName) {
    _firstName = firstName;
    _lastName = lastName;
  }

  function getName() {
    return _firstName + " " + _lastName;
  }

  return {
    setName,
    getName
  };
}();

O Constructor Revealing Module Pattern é um padrão de design em JavaScript que nos permite criar quantas instâncias de um módulo quisermos. É fácil migrar do padrão Singleton para o padrão Constructor.

Para criar uma instância, tratamos a função que define o módulo como um construtor. Existem apenas duas modificações necessárias, cosméticas e funcionais. A modificação cosmética é colocar o nome da variável em maiúscula, pois é uma prática comum para uma função tratada como um construtor. A modificação funcional é não usar um IIFE porque estamos atribuindo a definição da função à variável, não ao valor.

A diferença de tempo de execução entre os padrões Singleton e Constructor é que o módulo não está imediatamente disponível no padrão Constructor. Temos que criar uma referência explicitamente invocando a definição da função, que atua como um construtor:

var Person = function() {
  var _firstName = '';
  var _lastName = '';

  function setName(firstName, lastName) {
    _firstName = firstName;
    _lastName = lastName;
  }

  function getName() {
    return _firstName + " " + _lastName;
  }

  return {
    setName,
    getName
  };
};

O Prototype Revealing Module Pattern é um padrão de design usado na programação JavaScript. Ele combina os benefícios do Prototype Pattern, do Revealing Module Pattern e do Module Pattern para criar uma solução poderosa e flexível para a criação de código modular e escalável.

No padrão Prototype Revealing Module, um módulo é definido como uma função construtora que contém propriedades privadas. As propriedades privadas são encapsuladas em um encerramento, enquanto as propriedades e métodos públicos são expostos usando o padrão de módulo revelador por meio de um protótipo .

O Prototype Pattern é usado para compartilhar métodos e propriedades entre objetos, reduzindo o consumo de memória do aplicativo. Isso é obtido usando a palavra-chave protótipo vinculada à estrutura do objeto:

var Person = function() {
  this._firstName = '';
  this._lastName = '';
}
 
Person.prototype = function() {
  var setName = function(firstName, lastName) {
    this._firstName = firstName;
    this._lastName = lastName;
  }

  var getName = function() {
    return _firstName + " " + _lastName;
  }

  return {
    setName,
    getName
  };
}();

Assine nosso boletim informativo semanal gratuito . Siga-nos no Twitter , LinkedIn , YouTube e Discord .

Interessado em dimensionar sua inicialização de software ? Conheça o Circuito .