Trong quá trình phát triển các ứng dụng quản lý biểu mẫu dữ liệu (Form Management) ở cấp độ doanh nghiệp, làm thế nào để áp dụng cấu trúc dữ liệu Stack nhằm xây dựng tính năng Undo và Redo cho dữ liệu người dùng nhập liệu?

Question

Accepted Answer

Tính năng Undo và Redo là yêu cầu phổ biến trong các hệ thống nhập liệu phức tạp để cải thiện trải nghiệm người dùng. Cấu trúc dữ liệu Stack cung cấp giải pháp lưu trữ trạng thái theo mô hình LIFO (Last In, First Out) cực kỳ phù hợp cho bài toán này.
Bản chất cơ chế hoạt động

Hệ thống duy trì hai Stack riêng biệt: undoStack và redoStack.
Mỗi khi có thay đổi trạng thái dữ liệu hợp lệ (ví dụ: sau một khoảng thời gian debounce hoặc sau khi người dùng thực hiện một hành động cụ thể), trạng thái cũ được lưu vào undoStack.
Khi người dùng thực hiện thao tác Undo, trạng thái hiện tại được đẩy vào redoStack, và trạng thái đỉnh của undoStack được khôi phục.
Khi người dùng thực hiện thao tác Redo, trạng thái hiện tại được đẩy ngược lại vào undoStack, và trạng thái đỉnh của redoStack được khôi phục.

Ví dụ mã nguồn minh họa bằng JavaScript
class FormHistoryManager {
  constructor(initialState) {
    this.currentState = initialState;
    this.undoStack = [];
    this.redoStack = [];
  }

updateState(newState) {
    this.undoStack.push(this.currentState);
    this.currentState = newState;
    this.redoStack = [];
  }

undo() {
    if (this.undoStack.length === 0) return this.currentState;

this.redoStack.push(this.currentState);
    this.currentState = this.undoStack.pop();
    return this.currentState;
  }

redo() {
    if (this.redoStack.length === 0) return this.currentState;

this.undoStack.push(this.currentState);
    this.currentState = this.redoStack.pop();
    return this.currentState;
  }
}
Lưu ý kinh nghiệm thực chiến

Việc lưu trữ toàn bộ đối tượng trạng thái lớn (Deep Clone) vào Stack có thể gây tiêu tốn bộ nhớ. Nên áp dụng kỹ thuật Command Pattern hoặc Immutable State (như sử dụng cấu trúc dữ liệu phân cấp) để chỉ lưu trữ các thay đổi khác biệt (Diff).
Cần thiết lập giới hạn kích thước của undoStack để kiểm soát lượng bộ nhớ tiêu thụ trên trình duyệt.

Trong quá trình phát triển các ứng dụng quản lý biểu mẫu dữ liệu (Form Management) ở cấp độ doanh nghiệp, làm thế nào để áp dụng cấu trúc dữ liệu Stack nhằm xây dựng tính năng Undo và Redo cho dữ liệu người dùng nhập liệu?

Làm Chủ Phỏng Vấn & Nâng Cao Trình Độ Chuyên Nghiệp

Tải Tuyển Tập 100+ Câu Hỏi Phỏng Vấn Chuyên Sâu (PDF)

Cần Mentor Phỏng Vấn Thử 1-1 & Tối Ưu CV?

Kiểm Tra CV Chuẩn ATS Miễn Phí

Câu hỏi stacks liên quan cùng chủ đề