js实现封装历史记录功能，支持撤回、重做、清空等操作，可在其他任何需要历史记录的系统中使用.
实现历史记录class版
//最大历史栈长度constMAX_HISTORY_LENGTH=100;//获取数组最后一个元素constlast=(arr)=>arr[arr.length-1];//清空数组constclear=(arr)=>arr.splice(0,arr.length);classHistory{constructor(maxLength=MAX_HISTORY_LENGTH){//历史记录栈this.stack=[];//撤销栈this.undoStack=[];//最新的值this.currentValue=null;//最大历史栈长度this.maxLength=maxLength;}/***是否满*/isFull(){returnthis.stack.length>=this.maxLength;}/***添加历史记录*@param{*}value历史记录值*/push(value){this.stack.push(value);this.undoStack=[];this.currentValue=value;if(this.stack.length>this.maxLength){this.stack.splice(0,1);}}/***撤销*/undo(){if(this.stack.length===0){return;}constvalue=this.stack.pop();this.undoStack.push([value]);this.currentValue=last(this.stack);}/***重做*/redo(){if(this.undoStack.length===0){return;}constvalueList=this.undoStack.pop();this.stack.push(...valueList);this.currentValue=last(this.stack);}/***清空历史栈*/clear(){this.undoStack.push([...this.stack]);this.stack=[];}}构造函数版
历史栈为私有属性，避免被外部直接修改导致出错
/***历史记录构造函数版（栈为私有属性）*@param{number}maxLength最大长度*/functionHistoryFun(maxLength=MAX_HISTORY_LENGTH){//历史记录栈conststack=[];//撤销栈constundoStack=[];//最新的值this.currentValue=null;/***满*/this.isFull=()=>{returnstack.length>=maxLength;};/***历史栈长度*/this.getLength=()=>{returnstack.length;}/***获取历史栈*/this.getHistoryStack=()=>{return[...stack];}/***获取撤销栈*/this.getUndoStack=()=>{return[...undoStack];}/***添加历史记录*@param{*}value历史记录值*/this.push=(value)=>{stack.push(value);clear(undoStack);this.currentValue=value;if(stack.length>this.maxLength){stack.splice(0,1);}};/***撤销*/this.undo=()=>{if(stack.length===0){return;}constvalue=stack.pop();undoStack.push([value]);this.currentValue=last(stack);};/***重做*/this.redo=()=>{if(undoStack.length===0){return;}constvalueList=undoStack.pop();stack.push(...valueList);this.currentValue=last(stack);};/***清空历史栈*/this.clear=()=>{undoStack.push([...stack]);clear(stack);};}演示
为了方便理解做了一个demo，通过点击按钮进行历史记录的操作操作。
链接如下：历史记录演示demo