Separare il chiamante e il destinatario e appianare le differenze tra i diversi ricevitori. Consente di aggiungere facilmente diversi comandi per aggiungere diverse funzioni.

Benvenuti nella serie Design Patterns in TypeScript , che introduce alcuni utili modelli di progettazione nello sviluppo web utilizzando TypeScript.

9 modelli di progettazione che ogni ingegnere dovrebbe conoscere

I modelli di progettazione sono molto importanti per gli sviluppatori Web e possiamo scrivere codice migliore padroneggiandoli. In questo articolo, userò TypeScript per introdurre il modello di comando.

Su iOS e macOS, è presente un'applicazione Scorciatoie integrata. Con questo programma, gli utenti possono eseguire rapidamente 1 o più attività. Ad esempio, attività come l'invio rapido di messaggi, la traduzione di testo, l'abbreviazione di URL e il download di file.

Successivamente, implementiamo un'applicazione simile. Nel codice seguente, definiamo una Shortcutsclasse, in cui creiamo 5 metodi membro come openUrl, shortenUrl, sendMessage, ecc.

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 UIEventHandlerclasse, possiamo usarlo nel modo seguente:

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

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

• Quando chiamiamo il handleActionmetodo, dobbiamo assicurarci che il actionnome sia coerente con il nome del metodo nella Shortcutsclasse.
• Con il continuo aumento delle funzioni, ci saranno sempre più metodi corrispondenti nella Shortcutsclasse. Di conseguenza, dobbiamo modificare costantemente la Shortcutsclasse.

In effetti, possiamo racchiudere attività come l'invio di messaggi, la traduzione di testo e l'accorciamento di URL in singoli comandi.

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!

Infine, riassumiamo gli scenari di utilizzo del modello di comando:

• Quando è necessario astrarre varie azioni di esecuzione, vengono utilizzati diversi parametri per determinare quale azione eseguire.
• Il sistema deve disaccoppiare il chiamante della richiesta e il destinatario della richiesta in modo che il chiamante e il destinatario non interagiscano direttamente. Il chiamante della richiesta non ha bisogno di conoscere l'esistenza del destinatario, né ha bisogno di sapere chi sia il destinatario, e il destinatario non deve preoccuparsi quando viene chiamato.

Se vuoi imparare TypeScript, non perderti la serie Mastering TypeScript .

Con oltre 30 articoli, non sarai confuso quando impari il dattiloscritto

Codifica di livello superiore

Grazie per far parte della nostra comunità! Prima che tu vada:

• Batti le mani per la storia e segui l'autore
• Visualizza altri contenuti nella pubblicazione Level Up Coding
• Seguici: Twitter | Linkedin | Notiziario