打造你的个人历史记录系统，实现撤回、重做、清空等操作！

2023-11-13 06:49:14

实现历史记录功能的方法有很多，今天给大家分享一种基于JavaScript的封装方案，它支持撤回、重做、清空等常见操作，适用于需要历史记录的系统中。

1. Class 版本

// 定义 History class
class History {
    constructor() {
        this.stack = []; // 历史记录栈
        this.index = -1; // 当前操作位置
    }

    // 添加记录项到历史栈
    add(item) {
        this.stack.length = this.index + 1; // 清除未来记录
        this.stack.push(item);
        this.index++;
    }

    // 撤回
    undo() {
        if (this.index > 0) {
            this.index--;
            return this.stack[this.index];
        }

        return null;
    }

    // 重做
    redo() {
        if (this.index < this.stack.length - 1) {
            this.index++;
            return this.stack[this.index];
        }

        return null;
    }

    // 清空
    clear() {
        this.stack = [];
        this.index = -1;
    }
}

// 用法示例
const history = new History();
history.add('操作1');
history.add('操作2');
history.add('操作3');

console.log(history.undo()); // '操作3'
console.log(history.undo()); // '操作2'
console.log(history.redo()); // '操作3'
console.log(history.clear()); // []

2. 构造函数版本

// 定义 History 函数
function History() {
    // 私有变量
    var stack = [];
    var index = -1;

    // 公共方法
    this.add = function(item) {
        stack.length = index + 1;
        stack.push(item);
        index++;
    };

    this.undo = function() {
        if (index > 0) {
            index--;
            return stack[index];
        }

        return null;
    };

    this.redo = function() {
        if (index < stack.length - 1) {
            index++;
            return stack[index];
        }

        return null;
    };

    this.clear = function() {
        stack = [];
        index = -1;
    };
}

// 用法示例
const history = new History();
history.add('操作1');
history.add('操作2');
history.add('操作3');

console.log(history.undo()); // '操作3'
console.log(history.undo()); // '操作2'
console.log(history.redo()); // '操作3'
console.log(history.clear()); // []