Desacoplar la persona que llama y el receptor, y suavizar las diferencias entre los diferentes receptores. Le permite agregar fácilmente diferentes comandos para agregar diferentes funciones.

Bienvenido a la serie Patrones de diseño en TypeScript , que presenta algunos patrones de diseño útiles en el desarrollo web con TypeScript.

9 patrones de diseño que todo ingeniero debe conocer

Los patrones de diseño son muy importantes para los desarrolladores web y podemos escribir un mejor código si los dominamos. En este artículo, usaré TypeScript para presentar el patrón de comando.

En iOS y macOS, hay una aplicación de accesos directos integrada . Con este programa, los usuarios pueden realizar rápidamente 1 o más tareas. Por ejemplo, tareas como enviar mensajes rápidamente, traducir texto, acortar URL y descargar archivos.

A continuación, implementemos una aplicación similar. En el siguiente código, definimos una Shortcutsclase, en la que creamos 5 métodos miembros como openUrl, shortenUrl, sendMessage, etc.

class Shortcuts {
  openUrl(url: string) {
    console.log(`Open url: ${url}`);
  }
  shortenUrl(url: string) {
    console.log(`Shorten url: ${url}`);
  }
  sendMessage(msg: string) {
    console.log(`Send message: ${msg}`);
  }
  translateText(originText: string) {
    console.log(`Translate text: ${originText}`);
  }
  downloadFile(fileUrl: string) {
    console.log(`Download file: ${fileUrl}`);
  }
}

class UIEventHandler {
  constructor(public shortcuts: Shortcuts) {}

  handleAction(action: ShortcutsMethods, arg: string) {
    this.shortcuts[action](arg);
  }
}

// "openUrl" | "shortenUrl" | "sendMessage" | "translateText" | "downloadFile"
type ShortcutsMethods = Methods<Shortcuts>;

type Methods<T> = {
  [P in keyof T]: T[P] extends (...args: any) => void ? P : never;
}[keyof T];

Con la UIEventHandlerclase, podemos usarla de la siguiente manera:

const shortcuts = new Shortcuts();
const eventHandler = new UIEventHandler(shortcuts);

eventHandler.handleAction("openUrl", "https://medium.com/@bytefer");
eventHandler.handleAction("sendMessage", "Hello Bytefer!");

• Al llamar al handleActionmétodo, debemos asegurarnos de que el actionnombre sea consistente con el nombre del método en la Shortcutsclase.
• Con el aumento continuo de funciones, habrá cada vez más métodos correspondientes en la Shortcutsclase. Como resultado, necesitamos modificar constantemente la Shortcutsclase.

De hecho, podemos envolver tareas como enviar mensajes, traducir texto y acortar URL en comandos individuales.

interface Command {
  name: string;
  execute(args: any): any;
}

class OpenUrlCommand implements Command {
  name = "openUrl";
  execute(args: any) {
    console.log(`Open url: ${args[0]}`);
  }
}

class SendMessageCommand implements Command {
  name = "sendMessage";
  execute(args: any) {
    console.log(`Send message: ${args[0]}`);
  }
}

class CommandManager {
  commands: Record<string, Command> = {};

  registerCommand(name: string, command: Command) {
    this.commands[name] = command;
  }

  executeCommand(command: string | Command, ...args: any) {
    if (typeof command === "string") {
      this.commands[command].execute(args);
    } else {
      command.execute(args);
    }
  }
}

class UIEventHandler {
  constructor(public cmdManager: CommandManager) {}
  handleAction(command: string | Command, arg: string) {
    this.cmdManager.executeCommand(command, arg);
  }
}

const commandManager = new CommandManager();
commandManager.registerCommand("openUrl", new OpenUrlCommand());
commandManager.registerCommand("msg", new SendMessageCommand());

const eventHandler = new UIEventHandler(commandManager);
eventHandler.handleAction("openUrl", "https://medium.com/@bytefer");
eventHandler.handleAction("msg", "Hello Medium!");
eventHandler.handleAction(new SendMessageCommand(), "Hello Bytefer!");

Open url: https://medium.com/@bytefer
Send message: Hello Medium!
Send message: Hello Bytefer!

Finalmente, resumamos los escenarios de uso del patrón de comando:

• Cuando es necesario abstraer varias acciones de ejecución, se utilizan diferentes parámetros para determinar qué acción ejecutar.
• El sistema necesita desacoplar la persona que llama y el receptor de la solicitud para que la persona que llama y el receptor no interactúen directamente. La persona que llama de la solicitud no necesita saber la existencia del receptor, ni necesita saber quién es el receptor, y el receptor no necesita preocuparse cuando se le llama.

Si desea aprender TypeScript, no se pierda la serie Mastering TypeScript .

Con más de 30 artículos, no se confundirá cuando aprenda TypeScript

Codificación de nivel superior

¡Gracias por ser parte de nuestra comunidad! Antes de que te vayas:

• Aplaude la historia y sigue al autor
• Ver más contenido en la publicación Level Up Coding
• Síguenos: Twitter | LinkedIn | Boletin informativo