Patrón Adapter — demo visual

El Adapter permite que dos interfaces incompatibles colaboren. El Client habla con Target; el Adapter implementa Target y traduce la llamada hacia el Adaptee.

Diagrama: flujo del Adapter

Client usa Target.request(). Adapter traduce a Adaptee.specificRequest()
Adapter: ON idle

Demo (Adapter)

request()

El cliente espera target.request(). El adaptee expone specificRequest(). El adapter traduce entre ambos.

Resultado

Ejemplo del patrón (Adapter)

código

El cliente depende de <b>Target</b>. <b>Adapter</b> implementa Target y delega en <b>Adaptee</b>.

// adapter.ts

// Target: what the client expects
interface Target {
  request(): string;
}

// Adaptee: legacy/incompatible API
class Adaptee {
  specificRequest(): string {
    return "[[raw: legacy-data]]";
  }
}

// Adapter: implements Target and translates to Adaptee
class Adapter implements Target {
  constructor(private adaptee: Adaptee) {}

  request(): string {
    const raw = this.adaptee.specificRequest();
    return raw.replace("[[raw:", "").replace("]]", "").trim();
  }
}

// Client
function clientCode(target: Target) {
  console.log(target.request());
}

clientCode(new Adapter(new Adaptee()));
// adapter.js

// Adaptee (legacy)
class Adaptee {
  specificRequest() {
    return "[[raw: legacy-data]]";
  }
}

// Adapter (Target-compatible)
class Adapter {
  constructor(adaptee) {
    this.adaptee = adaptee;
  }

  request() {
    const raw = this.adaptee.specificRequest();
    return raw.replace("[[raw:", "").replace("]]", "").trim();
  }
}

function clientCode(target) {
  console.log(target.request());
}

clientCode(new Adapter(new Adaptee()));
En JS/TS lo clave es que <code>Adapter</code> tiene la misma interfaz que <code>Target</code> y traduce la llamada hacia <code>Adaptee</code>.