Como usar padrões de design JavaScript

Os padrões de design JavaScript fornecem soluções comprovadas para problemas comuns no desenvolvimento de software. Compreender e aplicar esses padrões permitirá que você escreva um código JavaScript melhor e mais eficiente.

Introdução aos padrões de design do JavaScript

Os conceitos contidos nos padrões de design do JavaScript servem para orientá-lo sobre como superar problemas comuns que você enfrentará como desenvolvedor de JavaScript.

Você deve entender as abstrações subjacentes aos padrões, para poder aplicá-las ao seu problema específico. Você também deve ser capaz de identificar quando algum desses padrões pode ser útil para o seu código.

O padrão do módulo

O padrão Module, que fornece encapsulamento, faz parte Sistema de módulos do JavaScript. Ele fornece uma maneira de proteger dados e comportamento privados em um módulo enquanto expõe uma API pública. Ele permite que você crie objetos de módulo independentes com níveis de acesso públicos e privados.

Isso é um pouco como você pode usar modificadores de acesso em uma classe em uma linguagem como Java ou C++.

Em JavaScript, você pode implementar o padrão Module usando encerramentos.

Ao usar um encerramento para incluir membros privados (funções, variáveis, dados), você cria um escopo onde esses membros são acessíveis, mas não expostos diretamente ao mundo externo. Isso ajuda a alcançar o encapsulamento, mantendo os detalhes internos ocultos do código externo.

Além disso, retornar uma API pública do encerramento permite acesso privado a determinadas funções ou propriedades que você deseja expor como parte da interface do módulo.

Isso lhe dará controle sobre quais partes do módulo são acessíveis a outras partes da base de código. Isso mantém um limite claro entre a funcionalidade pública e privada.

Aqui está um exemplo:

const ShoppingCartModule = (função () {
// dados privados
deixar itens do carrinho = [];
// método privado
funçãocalcularTotalItems() {
retornar cartItems.reduce((total, artigo) => total + item.quantidade, 0);
 }
// API pública
retornar {
 addItem (item) {
 cartItems.push (item);
 },
 getTotalItems() {
retornar calcularTotalItems();
 },
 carrinho clara() {
 itens do carrinho = [];
 }
 };
})();
// Exemplo de uso
ShoppingCartModule.addItem({ nome: 'Produto 1', quantidade: 2 });
ShoppingCartModule.addItem({ nome: 'Produto 2', quantidade: 1 });
console.log (ShoppingCartModule.getTotalItems()); // Saída: 3
ShoppingCartModule.clearCart();
console.log (ShoppingCartModule.getTotalItems()); // Saída: 0

Neste exemplo, o Módulo Carrinho de Compras representa um módulo criado usando o padrão de módulo. A execução do código é assim:

1. O IIFE envolve todo o bloco de código, criando uma função que é executada imediatamente após a declaração. Isso estabelece um escopo privado para os membros do módulo.
2. itens do carrinho é uma matriz privada. Não é diretamente acessível de fora do módulo.
3. calcularTotalItems() é um método privado que calcula o número total de itens no carrinho. Ele usa o reduzir() método para iterar sobre o itens do carrinho array e some as quantidades de todos os itens.
4. O módulo retorna sua API pública como um objeto literal, expondo três métodos públicos: adicionar Item(), getTotalItems(), e carrinho clara().
5. Fora do módulo, você pode acessar os métodos públicos do módulo para interagir com a funcionalidade do carrinho de compras.

Este exemplo demonstra como o padrão de módulo permite encapsular dados privados (itens do carrinho) e comportamento (calcularTotalItems) dentro do módulo enquanto fornece uma interface pública (adicionar Item, getTotalItems, e carrinho clara) para interagir com o módulo.

O Padrão do Observador

O padrão Observer estabelece uma dependência um-para-muitos entre os objetos. Quando o estado de um objeto muda, ele notifica todos os seus dependentes e eles são atualizados automaticamente. Esse padrão é particularmente útil para gerenciar interações orientadas a eventos ou desacoplar componentes em um sistema.

Em JavaScript, você pode implementar o padrão Observer usando o addEventListener integrado, dispatchEvent métodos ou qualquer mecanismos de manipulação de eventos. Ao inscrever observadores em eventos ou assuntos, você pode notificá-los e atualizá-los quando ocorrerem eventos específicos.

Por exemplo, você pode usar o padrão Observer para implementar um sistema de notificação simples:

// Implementação do padrão Observer
funçãoSistema de notificação() {
// Lista de assinantes
esse.assinantes = [];
// Método para assinar notificações
esse.subscribe = função (assinante) {
esse.subscribers.push (assinante);
 };
// Método para cancelar a assinatura de notificações
esse.unsubscribe = função (assinante) {
const índice = esse.subscribers.indexOf (assinante);
se (índice !== -1) {
esse.subscribers.splice (índice, 1);
 }
 };
// Método para notificar assinantes
esse.notify = função (mensagem) {
esse.subscribers.forEach(função (assinante) {
 Subscriber.receiveNotification (mensagem);
 });
 };
}
// Objeto assinante
funçãoAssinante(nome) {
// Método para receber e tratar notificações
esse.receiveNotification = função (mensagem) {
console.log (nome + ' notificação recebida: ' + mensagem);
 };
}
// Exemplo de uso
const sistema de notificação = novo NotificationSystem();
// Cria assinantes
const assinante1 = novo Assinante('Assinante 1');
const assinante2 = novo Assinante('Assinante 2');
// Inscrever assinantes no sistema de notificação
notificationSystem.subscribe (subscriber1);
notificationSystem.subscribe (subscriber2);
// Notifica os assinantes
notificationSystem.notify('Nova notificação!');

O objetivo aqui é permitir que vários assinantes recebam notificações quando um evento específico ocorrer.

O Sistema de notificação função representa o sistema que envia notificações, e o Assinante A função representa os destinatários das notificações.

O NotificationSystem tem um array chamado assinantes para armazenar os assinantes que desejam receber notificações. O se inscrever O método permite que os assinantes se registrem adicionando-se à matriz de assinantes. O Cancelar subscrição método removeria os assinantes da matriz.

O notificar método em NotificationSystem itera através da matriz de assinantes e chama o método receber notificação método em cada assinante, permitindo-lhes lidar com as notificações.

Instâncias da função Subscriber representam assinantes. Cada assinante tem um método receiveNotification que determina como eles lidam com as notificações recebidas. Neste exemplo, o método registra a mensagem recebida no console.

Para usar o padrão de observador, crie uma instância de NotificationSystem. Você pode criar instâncias de Assinante e adicioná-las ao sistema de notificação usando o método de inscrição.

O envio de uma notificação acionará o método receiveNotification para cada assinante e registrará a mensagem para cada assinante.

O padrão Observer permite um baixo acoplamento entre o sistema de notificação e os assinantes, permitindo flexibilidade. O padrão promove a separação de preocupações que facilitará a manutenção em sistemas orientados a eventos.

Usando padrões avançados de JavaScript

Aqui estão algumas dicas gerais para usar com eficiência padrões JavaScript avançados:

• Considere as implicações de desempenho: padrões avançados podem apresentar complexidade adicional, o que pode afetar o desempenho. Esteja atento às implicações de desempenho e otimizar onde necessário.
• Evite antipadrões: entenda os padrões completamente e evite cair em antipadrões ou usá-los indevidamente. Use padrões onde eles fizerem sentido e se alinhem com os requisitos de seu aplicativo.
• Siga as convenções de codificação: siga consistentemente as convenções de codificação para manter a legibilidade e a consistência em toda a sua base de código. Use nomes significativos de variáveis ​​e funções e forneça uma documentação clara para seus padrões.

Tenha cuidado ao aplicar esses padrões

O padrão Module permite o encapsulamento e promove privacidade de dados, organização de código e a criação de módulos independentes.

Por outro lado, o padrão Observer facilita a comunicação entre os componentes estabelecendo um relacionamento sujeito-assinante.

Você deve estar ciente de possíveis armadilhas e erros comuns ao implementar padrões JavaScript avançados. Evite o uso excessivo de padrões onde existem soluções mais simples ou a criação de código excessivamente complexo. Revise e refatore regularmente seu código para garantir que ele permaneça sustentável.