10. Patrones de Diseño - cejaramillof/javaScript GitHub Wiki

Estructura descripción patrón: (UML)

Design Patterns. (23 patterns) by Gang of Four (GoF)

Erich Gamma
Richard Helm
Ralph Johnson
John Vlissides

Creacionales

Proveen diferentes mecanismos para crear objetos. Nos ayudan a encapsular y abstraer dicha creación.

Abstract Factory

Permite trabajar con objetos de distintas familias de manera que las familias no se mezclen entre sí y haciendo transparente el tipo de familia concreta que se esté usando. El problema a solucionar por este patrón es el de crear diferentes familias de objetos, como por ejemplo, la creación de interfaces gráficas de distintos tipos (ventana, menú, botón, etc.).

Builder (constructor virtual)

Abstrae el proceso de creación de un objeto complejo, centralizando dicho proceso en un único punto.

// jQuery usando el builder
$('<button class="btn">Click here</button>');
$('<h1 class="super-big">Title</h1>');

Factory Method (método de fabricación)

Centraliza en una clase constructora la creación de objetos de un subtipo de un tipo determinado, ocultando al usuario la casuística, es decir, la diversidad de casos particulares que se pueden prever, para elegir el subtipo que crear. Parte del principio de que las subclases determinan la clase a implementar.

Prototype (prototipo)

Crea nuevos objetos clonándolos de una instancia ya existente.

Singleton (instancia única)

Garantiza la existencia de una única instancia para una clase y la creación de un mecanismo de acceso global a dicha instancia.

Object Pool

Se obtienen objetos nuevos a través de la clonación. Utilizado cuando el costo de crear una clase es mayor que el de clonarla. Objetos muy complejos. Se especifica un tipo de objeto a crear y se utiliza una interfaz del prototipo para crear un nuevo objeto por clonación. (no pertenece a los patrones especificados por GoF)

Estructurales

Describen formas de componer objetos para formar nuevas estructuras flexibles y eficientes.

Adapter o Wrapper (Adaptador o Envoltorio)

Adapta una interfaz para que pueda ser utilizada por una clase que de otro modo no podría utilizarla.

// IE <= 11+
let inputEl = document.createElement('input');
inputEl.value = 'priority-shipping';
inputEl.type = 'radio';
console.log(inputEl.value); // undefined

// jQuery
let $input = $('<input />');
$input.val('priority-shipping');
$input.attr({ type: 'radio' });
console.log($input.val()); // priority-shipping

Bridge (Puente)

Desacopla una abstracción de su implementación.

Composite (Objeto compuesto)

Permite tratar objetos compuestos como si de uno simple se tratase.

// un solo elemento
$('#submit-button').addClass('big-text');

// muchos elementos
$('button').addClass('big-text');
$('.tittle').addClass('big-text');

Decorator (Decorador)

Añade funcionalidad a una clase dinámicamente.

// Monkey patching
class MacbookPro {
    constructor() { this.memory = 8; }
    cost() { return 2399; }
}

function widthMemory(amount, computer) {
    let cost = computer.cost();
    computer.cost = function () {
        let memoryCost =  Math.max((amount - 8) * 25, 0);
        return cost + memoryCost;
    };
}

function measure(fn) {
    let start = Date.now();
    fn();
    console.log(`Time: ${Date.now() - start}ms`)
}
function fibonacci(num) { ... }

let fastFibonacci = lodash.memoize(fibonacci);

measure(() => fastFibonacci(100000));
measure(() => fastFibonacci(100000));

class Field {
  errors: string[];
  input: HTMLInputElement;

  constructor(input: HTMLInputElement) {
    this.input = input;
    this.errors = [];

    let errorMessage = document.createElement("p");
    errorMessage.className = "text-danger";
    this.input.parentNode.insertBefore(errorMessage, this.input.nextSibling);

    this.input.addEventListener("input", () => {
      this.errors = [];
      this.validate();
      errorMessage.innerText = this.errors[0] || "";
    });
  }

  validate() {}
}

function RequiredFieldDecorator(field: Field): Field {
  let validate = field.validate;

  field.validate = function() {
    validate();
    let value = field.input.value;
    if (!value) {
      field.errors.push("Requerido");
    }
  };

  return field;
}

function EmailFieldDecorator(field: Field): Field {
  let validate = field.validate;

  field.validate = function() {
    validate();
    let value = field.input.value;

    if (value.indexOf("@") === -1) {
      field.errors.push("Debe ser un email");
    }
  };

  return field;
}

let field = new Field(document.querySelector("#value"));
field = RequiredFieldDecorator(field);
field = EmailFieldDecorator(field);

Facade (Fachada)

Provee de una interfaz unificada simple para acceder a una interfaz o grupo de interfaces de un subsistema.

Flyweight (Peso ligero)

Reduce la redundancia cuando gran cantidad de objetos poseen idéntica información.

Proxy

Proporciona un intermediario de un objeto para controlar su acceso.

Module

Agrupa varios elementos relacionados, como clases, singletons, y métodos, utilizados globalmente, en una entidad única.

Comportamiento

Gestionan algoritmos, responsabilidades y interacción entre clases u objetos.

Chain of Responsibility (Cadena de responsabilidad)

Permite establecer la línea que deben llevar los mensajes para que los objetos realicen la tarea indicada.

Command (Orden)

Encapsula una operación en un objeto, permitiendo ejecutar dicha operación sin necesidad de conocer el contenido de la misma.

Interpreter (Intérprete)

Dado un lenguaje, define una gramática para dicho lenguaje, así como las herramientas necesarias para interpretarlo.

Iterator (Iterador)

Permite realizar recorridos sobre objetos compuestos independientemente de la implementación de estos.

Mediator (Mediador)

Define un objeto que coordine la comunicación entre objetos de distintas clases, pero que funcionan como un conjunto.

Memento (Recuerdo)

Permite volver a estados anteriores del sistema.

Observer (Observador)

Define una dependencia de uno-a-muchos entre objetos, de forma que cuando un objeto cambie de estado se notifique y actualicen automáticamente todos los objetos que dependen de él. ej: Redux, EventEmitter.

interface Observer {
  updated: (data: any) => void;
}
interface Subject {
  subscribe: (observer: Observer) => void;
  unsubscribe: (observer: Observer) => void;
}

// Observador - Texto
class PriceDisplay implements Observer {
  private el: HTMLElement;

  constructor() {
    this.el = document.querySelector("#price");
  }
  updated(data: any) {
    this.el.innerText = data;
  }
}

// Sujeto Observado - Input
class BitcoinPrice implements Subject {
  observers: Observer[] = [];

  constructor() {
    const el: HTMLInputElement = document.querySelector("#value");
    el.addEventListener("input", () => {
      this.notify(el.value);
    });
  }

  subscribe(observer: Observer) {
    this.observers.push(observer);
  }

  unsubscribe(observer: Observer) {
    const index = this.observers.findIndex(obs => {
      return obs === observer;
    });

    this.observers.splice(index, 1);
  }

  notify(data: any) {
    this.observers.forEach(observer => observer.updated(data));
  }
}

const observed = new BitcoinPrice();
const observer = new PriceDisplay();

// Subscribimos
observed.subscribe(observer);
// Simulamos unsubscribe usando un setTimeout de 5 segundos
setTimeout(() => observed.unsubscribe(observer), 5000);

State (Estado)

Permite que un objeto modifique su comportamiento cada vez que cambie su estado interno.

Strategy (Estrategia)

Permite disponer de varios métodos para resolver un problema y elegir cuál utilizar en tiempo de ejecución.

Template Method (Método plantilla)

Define en una operación el esqueleto de un algoritmo, delegando en las subclases algunos de sus pasos, esto permite que las subclases redefinan ciertos pasos de un algoritmo sin cambiar su estructura.

Visitor (Visitante)

Permite definir nuevas operaciones sobre una jerarquía de clases sin modificar las clases sobre las que opera.