Mẫu Visitor (Visitor pattern) giải thích kèm ví dụ

Mục đích và vấn đề cần giải quyết

Mục đích: biểu diễn một thao tác sẽ thực hiện trên các phần tử của một cấu trúc đối tượng. Mẫu Visitor cho phép định nghĩa thao tác mới mà không đổi các lớp phần tử mà nó tác động lên. Đây là một trong các mẫu hành vi trong cuốn sách của nhóm Gang of Four (GoF).

Giả sử một chương trình vẽ có ba lớp hình: Circle, Rectangle và Group. Theo thời gian bạn cần nhiều thao tác trên chúng: tính tổng diện tích, xuất ra SVG, xuất ra JSON, đếm số hình, kiểm tra chồng lấn. Nếu mỗi thao tác trở thành một phương thức trên mọi lớp hình, các lớp hình sẽ phình ra với mã chẳng liên quan gì đến việc là một hình, và mỗi thao tác mới đều phải đụng đến tất cả chúng.

Với mẫu Visitor, mỗi thao tác là một lớp (visitor tính diện tích, visitor xuất SVG) chứa mã cho mọi kiểu hình. Các hình chỉ cần một phương thức chung, accept. Thêm thao tác nghĩa là viết thêm một visitor mới; các lớp hình giữ nguyên.

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

Vì sao cần accept: trong TypeScript, Java và C#, một lời gọi phương thức chọn cách triển khai dựa trên kiểu của đối tượng được gọi (single dispatch, điều phối đơn). Lời gọi accept điều phối theo kiểu phần tử, còn lời gọi bên trong nó, như visitor.visitCircle(this), điều phối theo kiểu visitor. Kết hợp lại, chúng tạo thành double dispatch.

Triển khai bằng TypeScript

Interface visitor là generic theo kiểu trả về, nhờ vậy một visitor có thể tính số còn visitor khác sinh ra chuỗi.

interface ShapeVisitor<R> {
  visitCircle(c: Circle): R;
  visitRectangle(r: Rectangle): R;
  visitGroup(g: Group): R;
}
interface Shape {
  accept<R>(visitor: ShapeVisitor<R>): R;
}

class Circle implements Shape {
  constructor(readonly radius: number) {}
  accept<R>(v: ShapeVisitor<R>) { return v.visitCircle(this); }
}
class Rectangle implements Shape {
  constructor(readonly width: number, readonly height: number) {}
  accept<R>(v: ShapeVisitor<R>) { return v.visitRectangle(this); }
}
class Group implements Shape {
  constructor(readonly children: Shape[]) {}
  accept<R>(v: ShapeVisitor<R>) { return v.visitGroup(this); }
}

class AreaVisitor implements ShapeVisitor<number> {
  visitCircle(c: Circle) { return Math.PI * c.radius ** 2; }
  visitRectangle(r: Rectangle) { return r.width * r.height; }
  visitGroup(g: Group): number {
    return g.children.reduce((sum, child) => sum + child.accept(this), 0);
  }
}

class SvgVisitor implements ShapeVisitor<string> {
  visitCircle(c: Circle) { return '<circle r="' + c.radius + '"/>'; }
  visitRectangle(r: Rectangle) { return '<rect width="' + r.width + '" height="' + r.height + '"/>'; }
  visitGroup(g: Group): string { return "<g>" + g.children.map((c) => c.accept(this)).join("") + "</g>"; }
}

const drawing = new Group([new Circle(1), new Rectangle(2, 3), new Group([new Rectangle(1, 1)])]);
console.log(drawing.accept(new AreaVisitor()).toFixed(2)); // 10.14
console.log(drawing.accept(new SvgVisitor()));
// <g><circle r="1"/><rect width="2" height="3"/><g><rect width="1" height="1"/></g></g>

Một thao tác thứ ba, như đếm số hình, sẽ là một lớp mới triển khai ShapeVisitor<number>. Không lớp hình nào phải thay đổi.

Cách thay thế trong TypeScript: union type và switch

Trong TypeScript, một discriminated union cùng câu lệnh switch đầy đủ mang lại nhiều lợi ích tương tự với ít mã hơn. Trình biên dịch báo lỗi nếu thiếu một case, thay thế cho sự an toàn mà interface visitor cung cấp:

type Shape =
  | { kind: "circle"; radius: number }
  | { kind: "rect"; width: number; height: number }
  | { kind: "group"; children: Shape[] };

function area(s: Shape): number {
  switch (s.kind) {
    case "circle": return Math.PI * s.radius ** 2;
    case "rect": return s.width * s.height;
    case "group": return s.children.reduce((sum, c) => sum + area(c), 0);
    default: {
      const unreachable: never = s; // compile error if a kind is not handled
      return unreachable;
    }
  }
}

console.log(area({ kind: "group", children: [{ kind: "rect", width: 2, height: 3 }] })); // 6

Mỗi thao tác mới là một hàm mới. Phong cách này phù hợp với dữ liệu thuần, như JSON hoặc cây cú pháp, và là cách nhiều codebase TypeScript dùng thay cho visitor dựa trên lớp.

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

• Nên dùng khi bạn có một tập lớp phần tử ổn định và cần nhiều thao tác không liên quan trên chúng, như đánh giá, in, kiểm tra kiểu và tối ưu hóa trên một cây cú pháp.
• Nên dùng để giữ mã của một thao tác ở cùng một chỗ: toàn bộ phần xuất SVG nằm trong một visitor, không rải rác qua nhiều lớp.
• Nên dùng khi visitor cần tích lũy trạng thái trong lúc duyệt một cấu trúc, như bảng ký hiệu hoặc tổng chạy.
• Không nên dùng khi các kiểu phần tử thay đổi thường xuyên; mỗi thay đổi lan sang mọi visitor.
• Không nên dùng khi có ít phần tử và các thao tác đơn giản. Phương thức trên các lớp, hoặc một hàm với switch, dễ đọc hơn.
• Lưu ý rằng visitor thường cần truy cập dữ liệu của phần tử, điều này có thể khiến bạn phải để các trường ở chế độ công khai.

Ứng dụng trong thực tế

• Plugin Babel là các visitor: một đối tượng có các phương thức đặt tên theo kiểu nút, như Identifier hoặc CallExpression, mà @babel/traverse gọi khi duyệt cây cú pháp.
• Các rule của ESLint trả về một đối tượng gồm các phương thức visitor theo khóa là kiểu nút, và ESLint gọi chúng trong lúc duyệt.
• Các lớp ast.NodeVisitor và ast.NodeTransformer của Python gọi các phương thức visit_ đặt tên theo lớp nút, như visit_Name.
• java.nio.file.FileVisitor của Java, dùng với Files.walkFileTree, nhận callback cho từng thư mục và tệp trong một cây tệp.

Các mẫu liên quan