Padrões de Projeto em JavaScript: Técnicas Avançadas com Exemplos

Padrões de Design em JavaScript: nível avançado com exemplos em Node.js

Padrões de design são soluções arquiteturais comprovadas para problemas típicos. Se os padrões básicos (Singleton, Factory, Observer) já são familiares, então é hora de se aprofundar em construções mais complexas. Neste artigo, vamos analisar quatro padrões GoF avançados com exemplos em JavaScript (Node.js): Composite, Chain of Responsibility, State e Memento. Esses padrões ajudarão você a escrever código flexível, escalável e de fácil manutenção.

1. Composite

Propósito: Permite agrupar objetos em uma estrutura de árvore e trabalhar com cada objeto ou grupo de forma uniforme.

Exemplo: Sistema de arquivos, onde uma pasta pode conter arquivos e outras pastas. Queremos calcular o tamanho total.

// Componentclass FileSystemComponent {  getSize() {    throw new Error('Método getSize() deve ser implementado');  }}

// Leafclass File extends FileSystemComponent {  constructor(name, size) {    super();    this.name = name;    this.size = size;  }

  getSize() {    return this.size;  }}

// Container (node)class Folder extends FileSystemComponent {  constructor(name) {    super();    this.name = name;    this.children = [];  }

  add(component) {    this.children.push(component);  }

  getSize() {    return this.children.reduce((total, child) => total + child.getSize(), 0);  }}

// Usageconst root = new Folder('root');const src = new Folder('src');const index = new File('index.js', 500);const utils = new File('utils.js', 300);

src.add(index);src.add(utils);root.add(src);root.add(new File('package.json', 200));

console.log(`Tamanho total: ${root.getSize()} bytes`); // 1000 bytes

Vantagens: Simplifica o trabalho com árvores, oculta a complexidade da hierarquia do cliente.

2. Chain of Responsibility

Propósito: Permite passar uma solicitação por uma cadeia de handlers até que um deles processe a solicitação.

Exemplo: Processamento de requisições HTTP no Express.js (middleware).

class Handler {  setNext(handler) {    this.next = handler;    return handler;  }

  handle(request) {    if (this.next) {      return this.next.handle(request);    }    return null;  }}

class AuthHandler extends Handler {  handle(request) {    if (!request.token) {      return 'Erro: não autorizado';    }    console.log('AuthHandler: verificação aprovada');    return super.handle(request);  }}

class RoleHandler extends Handler {  handle(request) {    if (request.role !== 'admin') {      return 'Erro: permissões insuficientes';    }    console.log('RoleHandler: função confirmada');    return super.handle(request);  }}

class LoggingHandler extends Handler {  handle(request) {    console.log(`LoggingHandler: requisição de ${request.user}`);    return super.handle(request);  }}

// Montagem da cadeiaconst auth = new AuthHandler();const role = new RoleHandler();const log = new LoggingHandler();auth.setNext(role).setNext(log);

const request = { token: 'abc123', role: 'admin', user: 'Ivan' };const result = auth.handle(request);console.log(result); // null (tudo ok)

const badRequest = { token: 'abc123', role: 'user', user: 'Petr' };console.log(auth.handle(badRequest)); // 'Erro: permissões insuficientes'

Vantagens: Reduz o acoplamento, facilita adicionar/remover handlers.

3. State

Propósito: Permite que um objeto mude seu comportamento dependendo do seu estado interno.

Exemplo: Documento com estados: Rascunho, Em moderação, Publicado.

class Docu