Mẫu Command (Design Pattern) giải thích kèm ví dụ

Mục đích và vấn đề mà mẫu này giải quyết

Mục đích: đóng gói một yêu cầu thành một đối tượng, nhờ đó có thể tham số hóa client với các yêu cầu khác nhau, xếp hàng hoặc ghi log các yêu cầu và hỗ trợ các thao tác có thể hoàn tác. Command là một trong các mẫu hành vi trong sách Gang of Four (GoF).

Hãy nghĩ đến một trình soạn thảo văn bản. Cùng một hành động, như “in đậm văn bản”, có thể được kích hoạt bởi nút trên thanh công cụ, mục menu và phím tắt Ctrl+B. Nếu mỗi nơi này gọi thẳng trình soạn thảo, logic bị lặp ở ba chỗ. Tệ hơn, trình soạn thảo còn phải hỗ trợ undo: sau khi người dùng nhấn Ctrl+Z, chương trình cần biết hành động trước đó là gì và cách đảo ngược nó.

Command giải quyết cả hai vấn đề. Mỗi hành động trở thành một đối tượng có phương thức execute và tùy chọn phương thức undo. Nút bấm, menu và phím tắt đều giữ cùng một đối tượng command. Trình soạn thảo giữ một danh sách lịch sử các command đã thực hiện, nên undo nghĩa là lấy command cuối cùng trong danh sách và gọi undo của nó.

Cấu trúc và các thành phần

Cài đặt bằng TypeScript: undo và redo

TextDocument là receiver. InsertText và DeleteLast là các command nhớ đủ thông tin để tự đảo ngược. Editor là invoker với hai ngăn xếp: một cho undo và một cho redo.

interface Command {
  execute(): void;
  undo(): void;
}
class TextDocument {
  text = "";
}
class InsertText implements Command {
  constructor(private doc: TextDocument, private value: string) {}
  execute() { this.doc.text += this.value; }
  undo() { this.doc.text = this.doc.text.slice(0, -this.value.length); }
}
class DeleteLast implements Command {
  private removed = "";
  constructor(private doc: TextDocument, private count: number) {}
  execute() {
    this.removed = this.doc.text.slice(-this.count);
    this.doc.text = this.doc.text.slice(0, -this.count);
  }
  undo() { this.doc.text += this.removed; }
}
class Editor {
  private done: Command[] = [];
  private undone: Command[] = [];
  run(cmd: Command) { cmd.execute(); this.done.push(cmd); this.undone = []; }
  undo() { const c = this.done.pop(); if (c) { c.undo(); this.undone.push(c); } }
  redo() { const c = this.undone.pop(); if (c) { c.execute(); this.done.push(c); } }
}
const doc = new TextDocument();
const editor = new Editor();
editor.run(new InsertText(doc, "Hello"));
editor.run(new InsertText(doc, ", world"));
editor.run(new DeleteLast(doc, 7));
console.log(doc.text); // Hello
editor.undo();
console.log(doc.text); // Hello, world
editor.redo();
console.log(doc.text); // Hello

Trước và sau

Không có mẫu này, giao diện gọi thẳng tài liệu và không thể undo, vì không có gì ghi lại điều đã xảy ra:

// Before: each trigger calls the receiver directly
boldButton.onclick = () => doc.makeBold(selection);
menuBold.onclick = () => doc.makeBold(selection);
// After: every trigger shares one command, and the editor records it
const bold = () => new MakeBold(doc, selection);
boldButton.onclick = () => editor.run(bold());
menuBold.onclick = () => editor.run(bold());

Phiên bản thứ hai là một đoạn mã giả định có lớp command MakeBold giống các lớp ở trên. Giao diện không còn biết cách in đậm hoạt động ra sao, và mọi hành động đi qua một nơi mà ở đó chúng có thể được ghi lại, ghi log hoặc hoàn tác.

Khi nào nên dùng và khi nào không

• Dùng cho undo và redo, macro (danh sách command chạy cùng nhau) và lịch sử command.
• Dùng để xếp hàng hoặc lên lịch công việc: hàng đợi job lưu các đối tượng command và worker thực hiện chúng sau.
• Dùng để ghi log hoặc phát lại thao tác, ví dụ gửi các command đã tuần tự hóa sang máy chủ khác.
• Dùng để tách các thành phần giao diện khỏi mã mà chúng kích hoạt.
• Đừng dùng khi bạn chỉ cần một callback. Trong TypeScript, hàm vốn là giá trị hạng nhất, nên button.onclick = save là một command hoàn toàn ổn khi không cần undo. Hãy thêm lớp command khi bạn cần hành vi bổ sung như undo, tên để hiển thị hoặc tuần tự hóa.

Ứng dụng thực tế

• Interface Runnable của Java là một command với một phương thức run, được thread và executor dùng để chạy công việc sau.
• Action của Redux là các đối tượng thuần túy mô tả một thay đổi; reducer áp dụng chúng, và log các action cho phép gỡ lỗi du hành thời gian. Đây là họ hàng gần của Command, với logic nằm ở reducer thay vì ở command.
• VS Code và nhiều trình soạn thảo khác đăng ký các command có tên có thể gán vào phím, menu và command palette.
• Database migration thường có bước up và down, chính là cặp execute và undo của một command.

Các mẫu liên quan