JavaScript Undo-Redo(根据《在javascript中用command 模式实现undo和redo》修改兼容Firefox)

最新推荐文章于 2022-07-04 14:35:39 发布
最新推荐文章于 2022-07-04 14:35:39 发布
阅读量2.9k 收藏 1
点赞数 1
CC 4.0 BY-SA版权
文章标签： javascript command firefox function input button
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/NoahT_T/article/details/3979299
这篇博客介绍了如何在JavaScript中利用Command模式实现撤销（Undo）和重做（Redo）功能，特别针对Firefox浏览器进行了兼容性处理。通过创建BaseAction基类和具体的操作类如MoveAction、ChangeAction，实现了元素位置移动和值更改的可逆操作。全局函数undo()和redo()用于触发撤销和重做，同时，拖放和输入事件触发了对应操作的记录。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> test command </TITLE>
<META NAME="Author" CONTENT="emu">

<SCRIPT LANGUAGE="JavaScript">
<!--
var actionStack = [];//操作栈
var actionIndex = 0;//操作栈中当前操作的指针

//-----------------------  command对象基类 ------------------------------
function BaseAction(){
}
BaseAction.prototype.exec=function(){
        actionStack[actionIndex++] = this;
        actionStack.length = actionIndex;
}
BaseAction.prototype.undo=function(){
        alert("此操作未定义相应的undo操作");
}
BaseAction.prototype.redo=function(){
        alert("此操作未定义相应的redo操作");
}

//-----------------------  move操作的command对象 ------------------------------
function MoveAction(elm){
    this.oldX = elm.oldX;
    this.oldY = elm.oldY;
    this.newX = elm.newX;
    this.newY = elm.newY;
    this.sourceElement = elm;
    this.status = "done";
}
MoveAction.prototype = new BaseAction();
MoveAction.prototype.undo=function(){
    if (this.status != "done") return;
    this.sourceElement.style.left = this.oldX + "px";
    this.sourceElement.style.top = this.oldY + "px";
    this.status = "undone";
}
MoveAction.prototype.redo=function(){
    if (this.status != "undone") return;
    this.sourceElement.style.left = this.newX + "px";
    this.sourceElement.style.top = this.newY + "px";
    this.status = "done";
}
//-----------------------  change操作的command对象 ------------------------------
function ChangeAction(elm){
    this.sourceElement = elm;
    this.oldValue = elm.defaultValue;
    this.newValue = elm.value;
    elm.defaultValue = elm.value;
    this.status = "done";
}
ChangeAction.prototype = new BaseAction();
ChangeAction.prototype.undo = function(){
    if (this.status != "done") return;
    this.sourceElement.value = this.sourceElement.defaultValue = this.oldValue;
    this.status = "undone";
}

ChangeAction.prototype.redo = function(){
    if (this.status != "undone") return;
    this.sourceElement.value = this.newValue;
    this.status = "done";
}


//---------------------  全局函数  ----------------------------
function undo(){
    if (actionIndex>0){
        actionStack[--actionIndex].undo();
    }
}
function redo(){
    if (actionIndex<actionStack.length){
        actionStack[actionIndex++].redo();
    }
}

function checkMouseMove(event){
    if (window.activeElement){
        var elm = window.activeElement;
        elm.style.left = (event.clientX - elm.innerX) + "px";
        elm.style.top = (event.clientY - elm.innerY) + "px";
    }
}
function releaseMouse(event){
    event = (event)?event:window.event;
    if (window.activeElement){
        activeElement.newX = event.clientX - activeElement.innerX;
        activeElement.newY = event.clientY - activeElement.innerY;
        new MoveAction(activeElement).exec();
        window.activeElement = null;
    }
}
function drag(event){
    event = (event)?event:window.event;
    if (event.button!=2) return;
    var elm = event.srcElement || event.target
    window.activeElement = elm;
    elm.oldX = elm.offsetLeft;
    elm.oldY = elm.offsetTop;
//    elm.style.left = (event.x - elm.oldX) + "px";
//    elm.style.top = (event.y - elm.oldY) + "px";
    elm.innerX = event.clientX - elm.oldX;
    elm.innerY = event.clientY - elm.oldY;
}

function changeValue(event){
    event = (event) ? event:window.event;
    new ChangeAction(event.srcElement || event.target).exec();
}
//-->
</SCRIPT>
</HEAD>

<BODY onmousemove="checkMouseMove(event)" onmouseup="releaseMouse(event)" oncontextmenu="return false">
<input type=button onclick=undo() value=undo>
<input type=button onclick=redo() value=redo>
<input value="drag me" onmousedown="drag(event)" onchange="changeValue(event)" style="position:absolute;left:150px;color:blue">
<input value="drag me" onmousedown="drag(event)" onchange="changeValue(event)" style="position:absolute;left:350px;color:green">
<input value="drag me" onmousedown="drag(event)" onchange="changeValue(event)" style="position:absolute;left:550px;color:violet">
</BODY>
</HTML>

NoahT_T
关注
JS 实现undo
04-21
NULL 博文链接：https://yangguoyk.iteye.com/blog/1929750
UndoRedo.js:功能强大且简单的Javascript库提供了撤消功能的历史记录。 就像一台时光机！ :one_o’clock:
04-29
UndoRedo.js 功能强大且简单的Javascript库提供了撤消/重做功能的历史记录。 就像一台时光机！ :one_o’clock: 安装： Node.js ： 使用以下命令来安装节点模块： npm install undoredo.js --save 然后简单地要求它： const UndoRedojs = require ( "undoredo.js" ) 浏览器： 您可以从获取UndoRedo.js文件： < script src =' https://cdn.jsdelivr.net/gh/iMrDJAi/UndoRedo.js/src/UndoRedo.js ' > </ script > 您可以下载它并在本地使用它： :page_facing_up:index.html :file_folder:js ↳ :page_facing_up:UndoRedo.js 这次将是： < script src =' ./js/UndorRedo.js ' >
JS中实现undo/redo
仅次于狼的博客
05-02 2287
很久以前做过这个，最近有用到，在硬盘堆里翻了一下，终于找到了，记录在这里。 基于jquery的undo/redo设计思路： 1、建立一个命令管理类，里面有两个数组保存undo和redo的命令队列，有几个方法实现命令管理的操作，代码如下： var commandManager=function(){ this.undoList=[]; this.redoList=[]; this.undoCount=20; //-1为无限 this.changed=null;
javascript undo redo
enix2212的专栏
12-09 664
在浏览器中用调试工具看调用结果 [code="javascript"] javascript /*function a() { Do([].slice.call(arguments)); } function Do() { var temp = (arguments[0]),indicator = argument...
JS-undo-redo:使用 HTML5 Localstorage 在浏览器中使用 JS 进行撤消、重做和持久性实现
06-26
JS-撤消-重做 使用 HTML5 Localstorage 在浏览器中使用 JS 进行撤消、重做和持久性实现 这是一个非常小的（大约 100 行）javascript 库，它允许利用 HTML5 Localstorage 来实现页面上数据的撤消、重做和持久化。 它是如何开始的 我正在为我们的费用记录创建一个数据输入表。 我很快发现意外删除、关闭选项卡等可能会非常烦人且耗时，因为数据丢失后必须重新输入。 所以，我想：如何定期保存条目表单的状态并能够撤消和重做。 此外，如果选项卡或浏览器窗口已关闭，我可以恢复上次保存的状态。 如何使用它 加载 JS 文件，或者将它包含在你的另一个 JS 文件中（因为它太小了） 初始化撤销重做对象： var myUndoRedo=undoRedo(10,_object_to_save_or_restore) 其中10是要保存的最大状态数，第二个参数是
undo-redo-vuex:一个Vuex插件，用于模块命名空间的撤消和重做功能
04-28
src =" node_modules/undo-redo-vuex/dist/undo-redo-vuex.min.js " > </ script > 模块 import undoRedo from "undo-redo-vuex" ; 用法 作为的标准， undo-redo-vuex可以用于以下设置： 如何在商店模块中...
undo-redo:撤消重做堆栈
04-11
undo-redo是免费软件：您可以根据自由软件基金会发布的GNU通用公共许可证的条款（许可证的版本3）或（可选）任何更高版本来重新分发和/或修改它。 分发undo-redo是希望它有用，但是没有任何保证； 甚至没有对适销...
undo：低级的undo-redo功能
02-05
总之，"undo: 低级的undo-redo功能"可能是一个专注于提供核心撤销/重做功能的库，它利用数据结构和设计模式来实现高效的历史记录管理，以支持用户在各种应用程序中的操作撤销和重做。在Rust中实现这样的功能需要对...
angular-undo-redo:使用命令模式的 Angular 撤消重做功能
07-11
这个存储库展示了如何使用在 AngularJS 前端实现撤销/重做功能： 如果程序中的所有用户操作都实现为命令对象，则程序可以保留最近执行的命令的堆栈。 当用户想要撤销一个命令时，程序简单地弹出最近的命令对象并...
使用 WijmoJS 轻松实现撤消重做（Undo /Redo）
weixin_38167262的博客
09-19 372
使用 WijmoJS 轻松实现撤消重做（Undo /Redo） 在V2019.0 Update2 的全新版本中，WijmoJS能够轻松实现撤消和重做操作，使Web应用程序的使用更加友好、更加高效。 不同于HTML提供的基本的撤销/重做功能 HTML只提供非常基本的撤销/重做功能，甚至这种功能在浏览器中也有不一致的表现，即便有一个HTMLUndoManager类，但目前没有任何浏览...
UndoManager.js:一个简单（且懒惰）的撤销重做管理器
06-09
撤消管理器.js UndoManager.js 是一个简单（且懒惰）的撤消/重做管理器，可与您的自定义所见即所得一起使用。 代码与库无关，应该在现代浏览器中工作（见下文）。 警告：这还没有在生产中经过仔细测试，可能有点问题。 特征 使用观察修改 自动更新您的元素 侦听 CTRL+Z、CTRL+SHIFT+Z 和 CTRL+Y 公开公共方法以挂钩您的按钮 ** 去做 ** 在推送时保存光标位置并在更新时恢复它 也挂钩上下文菜单的撤消功能 返工防止存储单个字符修改的机制 浏览器支持 支持和现代浏览器应该不错。 这意味着 IE11+、FF14+、Chrome 27+、Safari 6.1+、Opera 15+、iOS 7+ 和 Android 4.4+ 上的 Safari。 同样，这还没有经过彻底的测试。 将在下一次提交之前完成，并且可能会添加对更多浏览器的支持 用法 在任何 DOM
undo:Undo.js
05-12
Undo.js Undo.js提供了用于撤消和重做任何任务的抽象。 它可以在浏览器和服务器上运行（定位于node.js）。 它可用于向自定义应用程序添加撤消和重做功能，例如，撤消和重做可更改TODO列表中任务的优先级。 它也可以用于撤消和重做本机浏览器功能：单击复选框，编辑文本框，最后，编辑contenteditable元素。 基本抽象将独立于任何框架，而插件（如编辑可排序列表的命令）可能依赖于jQuery之类的库。 安装 通过npm： npm install undo.js 演示路线图添加： 使用jQuery UI sortable扩展可排序列表演示 表单：跟踪所有表单更改：文本输入，复选框更改，单选更改，选择更改 将撤消/重做添加到Backbone TODO演示中 使用粗体命令可编辑的内容 演示： 要提出功能，报告错误或进行一般讨论：
Clickago.js:JavaScript中undoredo的简单实现
07-14
Clickago.js Clickago.js 是一个用于撤销和重做功能的轻量级 JavaScript 框架。 见。 依赖性。 没有依赖关系。 浏览器支持 Clickago.js 适用于大多数浏览器，包括旧版本的 IE。 入门。 1. 在您的项目中包含 Clickago。 dist文件夹中有几个文件： clickago.amd(.min).js - AMD 模块。 clickago.commonjs(.min).js - CommonJS 模块。 clickago(.min),js - 全局变量（ window.Clickago ）。 2. 初始化 Clickago。 使用全局变量的示例（ clickago.js ）； var clickago = new Clickago ( ) ; 3. 注册动作。 理想情况下，您应该包装您的函数并将事件（您在其中注册您的操作）与功
撤消操作（undo/redo）
12-13
代码中应用了QUndoCommand来实现撤销与反撤销操作，希望对你有用。
undo-manager
06-21
撤消管理器 JavaScript 中的撤消管理器实现。 它遵循以及未记录和禁用的实现。 加载中 撤消管理器与 Web 浏览器、AMD 和 CommonJS 兼容。 网页浏览器 < script type =" text/javascript " src =" undo-manager.min.js " > </ script > AMD 该模块被命名为“undo-manager”，但可以通过从定义语句中删除名称来轻松地将其设为匿名模块。 require ( [ 'undo-manager' , ... ] , function ( UndoManager , ... ) { ... } ) ; 通用JS var UndoManager = require ( 'undo-manager' ) ; 用法 初始化 撤消管理器可以使用以下方法实例化： var undoManag
纯javascript对撤销和重写(undo、redo)的完美实现,适用于任何页面元素操作
weixin_33852020的博客
12-08 778
最近项目组开发一个报表设计器，需要用到撤销和重写的功能，这样用户就能方便的看到历史操作。 不知道大家看过java的命令模式没有，命令模式在英文里也叫undo,在javascript设计模式这本书里里就是这样子说的，虽然有好几个英文名称。 具体思路是每个对应页面的操作，譬如对表格的操作，在js里都是一个命令对象，我们暂且叫Undo.Command,Undo.Command里都有und...
纯js实现编辑器撤消/重做（回退）功能 undo/redo
thj13896076523的博客
07-04 3341
通过对基础类的继承重写，可自定义各种场景下的撤消/恢复功能
js 栈 html标签修复,javascript – 获取/恢复Monaco编辑器Undo&Redo堆栈
weixin_39723248的博客
06-20 2352
这一切都与模型有关.如果您恢复相同的型号,您将拥有Undo& Redo堆栈见例子var model = editorInstance.getModel();var viewState = editorInstance.saveViewState();//Destroy your instance for whatever reasoneditorInstance.dispose();//W...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值