Padrão de Projeto: Prototype Pattern no Angular com Exemplo Prático

O Prototype Pattern (Padrão Protótipo) é um padrão criacional do catálogo Gang of Four (GoF) que foca em criar novos objetos a partir da cópia (clone) de um objeto existente — chamado de protótipo — em vez de criar do zero com new ou construtores complexos.

O que é o Prototype Pattern?

O Prototype Pattern permite clonar objetos completos, mantendo sua estrutura, valores e métodos. Ele é útil quando:

• Criar um novo objeto do zero é caro ou complexo.
• Você quer criar múltiplas variações de um modelo base, alterando apenas algumas partes.

Quando usar?

• Quando você precisa criar várias cópias semelhantes de um mesmo objeto.
• Quando a criação de um objeto envolve muita configuração repetitiva.
• Quando deseja implementar deep copy ou shallow copy com controle.

Exemplo prático no Angular: Clonagem de formulário

Imagine que você tem um modelo base de um produto e deseja criar variações a partir dele, como duplicar para outros usos com pequenas alterações.

Estrutura sugerida

app/
├─ models/
│   └─ product.model.ts
├─ components/
│   └─ prototype-demo/
│       ├─ prototype-demo.component.ts
│       └─ prototype-demo.component.html

Modelo base com método de clone

// models/product.model.ts
export class Product implements Cloneable<Product> {
  constructor(
    public name: string,
    public price: number,
    public category: string
  ) {}

clone(): Product {
    return new Product(this.name, this.price, this.category);
  }
}
// Interface opcional (para clareza)
export interface Cloneable<T> {
  clone(): T;
}

  2️⃣ Componente Angular usando o clone

// components/prototype-demo/prototype-demo.component.ts
import { Component, OnInit } from '@angular/core';
import { Product } from 'src/app/models/product.model';

@Component({
  selector: 'app-prototype-demo',
  templateUrl: './prototype-demo.component.html'
})
export class PrototypeDemoComponent implements OnInit {
  originalProduct: Product;
  clonedProduct: Product;
  ngOnInit(): void {
    this.originalProduct = new Product('Notebook Gamer', 4500, 'Eletrônicos');
    this.clonedProduct = this.originalProduct.clone();
    // Alterar apenas parte do produto clonado
    this.clonedProduct.name = 'Notebook Gamer (Cópia)';
    this.clonedProduct.price = 4200;
  }
}

Template HTML para exibição

<h2>Prototype Pattern - Clonagem de Objeto</h2>
<h3>Produto Original</h3>
<ul>
  <li><strong>Nome:</strong> {{ originalProduct.name }}</li>
  <li><strong>Preço:</strong> {{ originalProduct.price }}</li>
  <li><strong>Categoria:</strong> {{ originalProduct.category }}</li>
</ul>

<h3>Produto Clonado</h3>
<ul>
  <li><strong>Nome:</strong> {{ clonedProduct.name }}</li>
  <li><strong>Preço:</strong> {{ clonedProduct.price }}</li>
  <li><strong>Categoria:</strong> {{ clonedProduct.category }}</li>
</ul>

Benefícios práticos do Prototype Pattern

• Elimina repetição de código ao configurar objetos semelhantes.
• Permite criação rápida e segura de cópias.
• Fácil de manter e aplicar em sistemas com modelos base configuráveis.
• Útil em formulários, templates, documentos, cadastros e mais.

Conclusão

O Prototype Pattern é muito útil em aplicações Angular para cenários onde você precisa duplicar dados, clonar registros ou gerar instâncias com pequenas variações. Aplicá-lo ajuda a manter o código limpo e eficiente, sem duplicação desnecessária de lógica.

Get Antonio QM’s stories in your inbox

Join Medium for free to get updates from this writer.

Remember me for faster sign in

No próximo artigo, seguiremos com os Padrões Estruturais, com destaque para o Composite Pattern, ideal para manipular estruturas em árvore. Acompanhe!