Design Patterns: Command Pattern trong TypeScript

Thứ Hai, 05/12/2022

Tram Ho

Chào mừng bạn đến với loạt bài Design Patterns trong TypeScript, tại đây mình giới thiệu một số Design Patterns hữu ích trong phát triển web bằng TypeScript.

Các Design Patterns rất quan trọng đối với các web developer và chúng ta có thể code tốt hơn bằng cách thành thạo chúng. Trong bài viết này, mình sẽ sử dụng TypeScript để giới thiệu Command Pattern.

Command Pattern tách rời Caller và Receiver. Cho phép bạn dễ dàng thêm các lệnh khác nhau để thêm các chức năng khác nhau.

Kịch bản sử dụng Pattern

Trên iOS và macOS, đã có chức năng Shortcuts được tích hợp sẵn. Với chức năng này, các bạn có thể thực hiện nhanh chóng thực hiện 1 hoặc nhiều tác vụ. Ví dụ: các tác vụ như gửi tin nhắn nhanh, dịch văn bản, rút ngắn URL và Download tệp.

Tiếp theo, hãy thực hiện một chức năng tương tự. Trong đoạn code sau, chúng ta định nghĩa một lớp Shortcuts, trong đó chúng ta tạo 5 hàm thành viên như openUrl, shortenUrl, sendMessage, v.v.

<span class="token keyword">class</span> <span class="token class-name">Shortcuts</span> <span class="token punctuation">{</span>
  <span class="token function">openUrl</span><span class="token punctuation">(</span><span class="token parameter">url<span class="token operator">:</span> string</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">Open url: </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>url<span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
  <span class="token function">shortenUrl</span><span class="token punctuation">(</span><span class="token parameter">url<span class="token operator">:</span> string</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">Shorten url: </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>url<span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
  <span class="token function">sendMessage</span><span class="token punctuation">(</span><span class="token parameter">msg<span class="token operator">:</span> string</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">Send message: </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>msg<span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
  <span class="token function">translateText</span><span class="token punctuation">(</span><span class="token parameter">originText<span class="token operator">:</span> string</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">Translate text: </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>originText<span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
  <span class="token function">downloadFile</span><span class="token punctuation">(</span><span class="token parameter">fileUrl<span class="token operator">:</span> string</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">Download file: </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>fileUrl<span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>

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}`);

}

Sau đó chúng ta định nghĩa một class UIEventHandler chứa hàm handleAction để xử lý các sự kiện của user.

<span class="token keyword">class</span> <span class="token class-name">UIEventHandler</span> <span class="token punctuation">{</span>
  <span class="token function">constructor</span><span class="token punctuation">(</span><span class="token parameter"><span class="token keyword">public</span> shortcuts<span class="token operator">:</span> Shortcuts</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><span class="token punctuation">}</span>

  <span class="token function">handleAction</span><span class="token punctuation">(</span><span class="token parameter">action<span class="token operator">:</span> ShortcutsMethods<span class="token punctuation">,</span> arg<span class="token operator">:</span> string</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>shortcuts<span class="token punctuation">[</span>action<span class="token punctuation">]</span><span class="token punctuation">(</span>arg<span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>

<span class="token comment">// "openUrl" | "shortenUrl" | "sendMessage" | "translateText" | "downloadFile"</span>
type ShortcutsMethods <span class="token operator">=</span> Methods<span class="token operator">&lt;</span>Shortcuts<span class="token operator">&gt;</span><span class="token punctuation">;</span>

type Methods<span class="token operator">&lt;</span><span class="token constant">T</span><span class="token operator">&gt;</span> <span class="token operator">=</span> <span class="token punctuation">{</span>
  <span class="token punctuation">[</span><span class="token constant">P</span> <span class="token keyword">in</span> keyof <span class="token constant">T</span><span class="token punctuation">]</span><span class="token operator">:</span> <span class="token constant">T</span><span class="token punctuation">[</span><span class="token constant">P</span><span class="token punctuation">]</span> <span class="token keyword">extends</span> <span class="token punctuation">(</span><span class="token parameter"><span class="token operator">...</span>args<span class="token operator">:</span> any</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token keyword">void</span> <span class="token operator">?</span> <span class="token constant">P</span> <span class="token operator">:</span> never<span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">[</span>keyof <span class="token constant">T</span><span class="token punctuation">]</span><span class="token punctuation">;</span>

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];

Phương thức handleAction nhận 2 tham số là action và arg. Type của tham số action là Shortcuts, được tạo thông qua utility type Methods. Nếu bạn muốn tìm hiểu thêm về các Mapped types, mình khuyên bạn nên tìm đọc một bài viết của mình về chủ đề này.

Với class UIEventHandler, chúng ta có thể sử dụng nó theo cách sau:

<span class="token keyword">const</span> shortcuts <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Shortcuts</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> eventHandler <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">UIEventHandler</span><span class="token punctuation">(</span>shortcuts<span class="token punctuation">)</span><span class="token punctuation">;</span>

eventHandler<span class="token punctuation">.</span><span class="token function">handleAction</span><span class="token punctuation">(</span><span class="token string">"openUrl"</span><span class="token punctuation">,</span> <span class="token string">"https://medium.com/@bytefer"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
eventHandler<span class="token punctuation">.</span><span class="token function">handleAction</span><span class="token punctuation">(</span><span class="token string">"sendMessage"</span><span class="token punctuation">,</span> <span class="token string">"Hello Bytefer!"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

const shortcuts = new Shortcuts();

const eventHandler = new UIEventHandler(shortcuts);

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

eventHandler.handleAction("sendMessage", "Hello Bytefer!");

Đối với code trước đó, có vẻ như không có vấn đề gì. Nhưng sau khi phân tích cẩn thận, bạn sẽ thấy các vấn đề sau:

Khi gọi hàm handleAction, chúng ta cần đảm bảo rằng tên action đó phải phù hợp với tên của hàm trong lớp Shortcuts.
Với sự gia tăng liên tục của các chức năng, sẽ có ngày càng nhiều hàm tương ứng trong lớp Shortcuts. Kết quả là, chúng ta cần liên tục sửa đổi lớp Shortcuts.

Vậy chúng ta nên giải quyết vấn đề trên như thế nào? Đối với vấn đề này, chúng ta có thể sử dụng Command Pattern.

Command Pattern

Trước tiên chúng ta hãy xem sơ đồ UML tương ứng:

Trên thực tế, chúng ta có thể gói các tác vụ như gửi tin nhắn, dịch văn bản và rút ngắn URL thành các lệnh riêng lẻ.

<span class="token keyword">interface</span> <span class="token class-name">Command</span> <span class="token punctuation">{</span>
  name<span class="token operator">:</span> string<span class="token punctuation">;</span>
  <span class="token function">execute</span><span class="token punctuation">(</span>args<span class="token operator">:</span> any<span class="token punctuation">)</span><span class="token operator">:</span> any<span class="token punctuation">;</span>
<span class="token punctuation">}</span>

interface Command {

name: string;

execute(args: any): any;

}

Trong đoạn code trên, chúng ta sử dụng các keyword interface để xác định type Command. Trong kiểu Command, một hàm execute được định nghĩa để đóng gói logic mà mỗi lệnh cần thực hiện. Với Interface Command, hãy xác định các lệnh cụ thể.

<span class="token keyword">class</span> <span class="token class-name">OpenUrlCommand</span> <span class="token keyword">implements</span> <span class="token class-name">Command</span> <span class="token punctuation">{</span>
  name <span class="token operator">=</span> <span class="token string">"openUrl"</span><span class="token punctuation">;</span>
  <span class="token function">execute</span><span class="token punctuation">(</span><span class="token parameter">args<span class="token operator">:</span> any</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">Open url: </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>args<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>

<span class="token keyword">class</span> <span class="token class-name">SendMessageCommand</span> <span class="token keyword">implements</span> <span class="token class-name">Command</span> <span class="token punctuation">{</span>
  name <span class="token operator">=</span> <span class="token string">"sendMessage"</span><span class="token punctuation">;</span>
  <span class="token function">execute</span><span class="token punctuation">(</span><span class="token parameter">args<span class="token operator">:</span> any</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">Send message: </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>args<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>

class OpenUrlCommand implements Command {

name = "openUrl";

execute(args: any) {

console.log(`Open url: ${args[0]}`);

}

class SendMessageCommand implements Command {

name = "sendMessage";

console.log(`Send message: ${args[0]}`);

}

Trong đoạn code trên, chúng ta đã tạo các lớp OpenUrlCommand và SendMessageCommand. Trong tương lai, các lệnh của chúng ta sẽ tiếp tục tăng lên. Để thuận tiện cho việc quản lý các lớp lệnh khác nhau, chúng ta cần định nghĩa một lớp để quản lý các lệnh:

<span class="token keyword">class</span> <span class="token class-name">CommandManager</span> <span class="token punctuation">{</span>
  commands<span class="token operator">:</span> Record<span class="token operator">&lt;</span>string<span class="token punctuation">,</span> Command<span class="token operator">&gt;</span> <span class="token operator">=</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">;</span>

  <span class="token function">registerCommand</span><span class="token punctuation">(</span><span class="token parameter">name<span class="token operator">:</span> string<span class="token punctuation">,</span> command<span class="token operator">:</span> Command</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>commands<span class="token punctuation">[</span>name<span class="token punctuation">]</span> <span class="token operator">=</span> command<span class="token punctuation">;</span>
  <span class="token punctuation">}</span>

  <span class="token function">executeCommand</span><span class="token punctuation">(</span><span class="token parameter">command<span class="token operator">:</span> string <span class="token operator">|</span> Command<span class="token punctuation">,</span> <span class="token operator">...</span>args<span class="token operator">:</span> any</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token keyword">typeof</span> command <span class="token operator">===</span> <span class="token string">"string"</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
      <span class="token keyword">this</span><span class="token punctuation">.</span>commands<span class="token punctuation">[</span>command<span class="token punctuation">]</span><span class="token punctuation">.</span><span class="token function">execute</span><span class="token punctuation">(</span>args<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span>
      command<span class="token punctuation">.</span><span class="token function">execute</span><span class="token punctuation">(</span>args<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>

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);

}

Trong lớp CommandManager, hàm registerCommand được sử dụng để đăng ký lệnh. Và hàm executeCommand được sử dụng để thực thi một lệnh. Với lớp CommandManager, hãy cập nhật lớp UIEventHandler đã tạo trước đó.

<span class="token keyword">class</span> <span class="token class-name">UIEventHandler</span> <span class="token punctuation">{</span>
  <span class="token function">constructor</span><span class="token punctuation">(</span><span class="token parameter"><span class="token keyword">public</span> cmdManager<span class="token operator">:</span> CommandManager</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><span class="token punctuation">}</span>
  <span class="token function">handleAction</span><span class="token punctuation">(</span><span class="token parameter">command<span class="token operator">:</span> string <span class="token operator">|</span> Command<span class="token punctuation">,</span> arg<span class="token operator">:</span> string</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>cmdManager<span class="token punctuation">.</span><span class="token function">executeCommand</span><span class="token punctuation">(</span>command<span class="token punctuation">,</span> arg<span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>

class UIEventHandler {

constructor(public cmdManager: CommandManager) {}

handleAction(command: string | Command, arg: string) {

this.cmdManager.executeCommand(command, arg);

}

Sau khi cập nhật lớp UIEventHandler, hãy khai báo chức năng tương ứng của nó.

<span class="token keyword">const</span> commandManager <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">CommandManager</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
commandManager<span class="token punctuation">.</span><span class="token function">registerCommand</span><span class="token punctuation">(</span><span class="token string">"openUrl"</span><span class="token punctuation">,</span> <span class="token keyword">new</span> <span class="token class-name">OpenUrlCommand</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
commandManager<span class="token punctuation">.</span><span class="token function">registerCommand</span><span class="token punctuation">(</span><span class="token string">"msg"</span><span class="token punctuation">,</span> <span class="token keyword">new</span> <span class="token class-name">SendMessageCommand</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token keyword">const</span> eventHandler <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">UIEventHandler</span><span class="token punctuation">(</span>commandManager<span class="token punctuation">)</span><span class="token punctuation">;</span>
eventHandler<span class="token punctuation">.</span><span class="token function">handleAction</span><span class="token punctuation">(</span><span class="token string">"openUrl"</span><span class="token punctuation">,</span> <span class="token string">"https://medium.com/@bytefer"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
eventHandler<span class="token punctuation">.</span><span class="token function">handleAction</span><span class="token punctuation">(</span><span class="token string">"msg"</span><span class="token punctuation">,</span> <span class="token string">"Hello Medium!"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
eventHandler<span class="token punctuation">.</span><span class="token function">handleAction</span><span class="token punctuation">(</span><span class="token keyword">new</span> <span class="token class-name">SendMessageCommand</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token string">"Hello Bytefer!"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>

const commandManager = new CommandManager();

commandManager.registerCommand("openUrl", new OpenUrlCommand());

commandManager.registerCommand("msg", new SendMessageCommand());

const eventHandler = new UIEventHandler(commandManager);

eventHandler.handleAction("msg", "Hello Medium!");

eventHandler.handleAction(new SendMessageCommand(), "Hello Bytefer!");

);

Trong đoạn code trên, trước tiên chúng ta tạo đối tượng CommandManager và đăng ký 2 lệnh. Sau đó, chúng ta tạo một đối tượng UIEventHandler và sử dụng hàm handleAction trên đối tượng để thực thi lệnh đã đăng ký. Sau khi đoạn code trên được thực thi thành công, Interface điều khiển sẽ xuất thông tin sau:

Open url<span class="token operator">:</span> https<span class="token operator">:</span><span class="token operator">/</span><span class="token operator">/</span>medium<span class="token punctuation">.</span>com<span class="token operator">/</span>@bytefer
Send message<span class="token operator">:</span> Hello Medium<span class="token operator">!</span>
Send message<span class="token operator">:</span> Hello Bytefer<span class="token operator">!</span>

Open url: https://medium.com/@bytefer

Send message: Hello Medium!

Send message: Hello Bytefer!

Trong contexts của text editor và chức năng command-line, Command Pattern cũng thường được sử dụng. Ví dụ: CAC, thư viện của bên thứ ba để tạo chức năng dòng lệnh, cũng sử dụng Command Pattern. Nếu bạn quan tâm, bạn có thể đọc source code tương ứng.

Các kịch bản sử dụng của Command Pattern:

Khi cần trừu tượng hóa các hành động thực thi khác nhau, các tham số khác nhau được sử dụng để xác định hành động nào sẽ thực hiện.
Hệ thống cần tách rời Caller request và Receiver request để Caller và Receiver không tương tác trực tiếp. Caller request không cần biết sự tồn tại của Receiver, cũng không cần biết Receiver là ai và Receiver không cần quan tâm khi nào nó được gọi.

Roundup

Như mọi khi, mình hy vọng bạn thích bài viết này và học thêm được điều gì đó mới.

Cảm ơn và hẹn gặp lại các bạn trong những bài viết tiếp theo!

Nếu bạn thấy Blog này hay xin hãy cho mình một like và đăng ký để ủng hộ mình nhé. Thank you.

Ref

https://tuan200tokyo.blogspot.com/2022/12/blog56-design-patterns-command-pattern.html

Chia sẻ bài viết ngay

Nguồn bài viết : Viblo

Design Patterns: Command Pattern trong TypeScript

Kịch bản sử dụng Pattern

Command Pattern

Roundup

Ref

TikTok trở thành nền tảng mảng xã hội lớn thứ hai ở Nam Phi

Mất giá nhanh nhất sau 9 tháng ra mắt, iPhone 14 Pro Max tiếp tục phá đáy tại Việt Nam

Hướng dẫn sử dụng ngôn ngữ R cho người mới bắt đầu

10 plugin cần thiết của SublimeText dành cho các lập trình viên JavaScript