JavaScript 中怎么用闭包保存表单历史操作记录-js教程-PHP中文网

闭包保存表单历史记录的核心是用立即执行函数封装私有历史栈，提供addrecord、gethistory、undo、clear等安全接口。示例实现自动捕获输入状态，限制长度、防篡改、支持撤销，并可扩展多步跳转与差异比对。

javascript 中怎么用闭包保存表单历史操作记录

用闭包保存表单历史操作记录，核心是把操作数据（如输入值、时间戳、字段名）封装在函数作用域内，避免全局污染，同时提供可控的增、查、回退接口。

闭包结构设计：私有历史栈 + 公共操作方法

定义一个立即执行函数，内部维护一个数组作为历史栈，返回一组方法供外部调用：

addRecord()：记录当前表单状态（可传入整个表单对象或指定字段）
getHistory()：获取全部历史（只读，不暴露原始数组）
undo()：还原上一步操作（弹出栈顶并应用到表单）
clear()：清空历史（谨慎使用）

实际示例：监听输入并自动存档

以下是一个轻量实用的实现：

Java Development Manual

Java开发手册规约集合，基于阿里巴巴Java开发手册（嵩山版）。涵盖7大维度：编程规约、异常日志、单元测试、安全规约、MySQL数据库、工程结构、设计规约。当用户需要：(1) 编写或审查Java代码 (2) 检查命名/代码规范 (3) 处理异常和日志 (4) 编写单元测试 (5) 安全编码 (6) 数据库设...

下载

const createFormHistory = (formElement) => {
  const history = [];
  const maxRecords = 50; // 防止内存溢出
<p>const saveState = () => {
const state = {};
const inputs = formElement.querySelectorAll('input, select, textarea');
inputs.forEach(el => {
if (el.name) state[el.name] = el.value;
});
history.push({
state,
timestamp: Date.now(),
length: history.length + 1
});
// 限制历史长度
if (history.length > maxRecords) history.shift();
};</p><p>return {
addRecord: saveState,
getHistory: () => [...history], // 返回副本，防篡改
undo: () => {
if (history.length  {
const el = formElement.querySelector(<code>[name="${name}"]</code>);
if (el) el.value = value;
});
}
},
clear: () => history.length = 0,
size: () => history.length
};
};</p><p>// 使用
const myForm = document.getElementById('myForm');
const formHistory = createFormHistory(myForm);</p><p>// 每次输入后记录（节流更佳）
myForm.addEventListener('input', () => formHistory.addRecord());
// 点击“撤销”按钮
document.getElementById('undoBtn').addEventListener('click', () => formHistory.undo());</p>