如何在浏览器兼容的Javascript中撤销和重做事件
How to undo and redo event in Javascript with browser compatible?
我有一个t恤定制设计软件工具,必须为可拖动的文本添加重做和撤消事件
http://wordpress.tshirtecommerce.com/design-online/?product_id=17我试过撤消管理器插件http://mattjmattj.github.io/simple-undo/
我们到了。
这是一个简单的撤消&重做缓冲区,并使用函数闭包来处理重做…
这当然是一个非常简单的例子,所以它很容易理解,但是没有理由这种技术不能用于撤销/重做任何事情。传递给函数闭包的任何内容都可以被捕获,然后进行回放。
var e = {}; //lets store references to the dom elemements
Array.prototype.slice.call(document.querySelectorAll("[id]")).
forEach(function (el) { e[el.id] = el; });
var stack = [],
stackPos = 0,
names = [];
function showNames() {
e.lbNames.textContent = names.join(', ');
e.btUndo.disabled = stackPos <= 0;
e.btRedo.disabled = stackPos >= stack.length;
e.lbBuffer.textContent = stack.length;
}
btAdd.onclick = function () {
if (!ipName.value) return alert("Please enter some text");
//a function closure to capture the name
function add(name) {
return function () {
e.ipName.value = '';
e.ipName.focus();
names.push(name);
stackPos ++;
showNames();
}
}
//no need for closure here, as were just going to pop the
//last one of the names, and shift the undo-pos back
function undo() {
stackPos --;
names.pop();
showNames();
}
//now lets add our do & undo proc
var doadd = add(ipName.value);
stack.splice(stackPos);
stack.push({
do: doadd,
undo: undo
});
//lets now do our inital do
doadd();
};
btUndo.onclick = function () {
var p = stack[stackPos - 1];
p.undo();
};
btRedo.onclick = function () {
var p = stack[stackPos];
p.do();
};
showNames();
<form onsubmit="return false">
name: <input id="ipName">
<br><br>
<button type="submit" id="btAdd" >Add</button>
<button id="btUndo">Undo</button>
<button id="btRedo">Redo</button>
Buffer = <span id="lbBuffer"></span>
<pre id="lbNames"></pre>
</form>
好吧,关于我最初的帖子,有一件事让我很烦恼,那就是可重用性。撤销/重做也与实现细节捆绑得太紧。
所以我创建了一个可重用的类版本,同时也添加了一个清晰的选项。
我认为保留原版比较方便。这样人们就可以查看代码,并进行比较。
var e = {}; //lets store references to the dom elemements
Array.prototype.slice.call(document.querySelectorAll("[id]")).
forEach(function (el) { e[el.id] = el; });
function UndoRedo(update_callback, clear_callback) {
this.update_callback = update_callback;
this.clear_callback = clear_callback;
this.clear();
}
UndoRedo.prototype = {
clear: function () {
this.stack = [];
this.stackPos = 0;
if (this.clear_callback) this.clear_callback();
this.update();
},
update: function () {
if (this.update_callback) this.update_callback();
},
canUndo: function () {
return this.stackPos > 0;
},
canRedo: function () {
return this.stackPos < this.stack.length;
},
doAction: function (doProc, undoProc) {
this.stack.splice(this.stackPos);
this.stack.push({
do: doProc,
undo: undoProc
});
this.stackPos ++;
doProc();
this.update();
},
undo: function () {
var p = this.stack[this.stackPos - 1];
this.stackPos --;
p.undo();
this.update();
},
redo: function () {
var p = this.stack[this.stackPos];
this.stackPos ++;
p.do();
this.update();
}
};
var
names = [],
undoRedo = new UndoRedo(
function update() {
e.lbNames.textContent = names.join(', ');
e.btUndo.disabled = !this.canUndo();
e.btRedo.disabled = !this.canRedo();
e.lbBuffer.textContent = this.stack.length;
},
function cleared() {
names = [];
}
);
btAdd.onclick = function () {
if (!ipName.value) return alert("Please enter some text");
undoRedo.doAction(
function add(name) {
return function () {
e.ipName.value = '';
e.ipName.focus();
names.push(name);
}
}(ipName.value),
function undo() {
names.pop();
}
);
};
btUndo.onclick = function () {
undoRedo.undo();
};
btRedo.onclick = function () {
undoRedo.redo();
};
btClear.onclick = function () {
undoRedo.clear();
}
<form onsubmit="return false">
name: <input id="ipName">
<br><br>
<button type="submit" id="btAdd" >Add</button>
<button id="btUndo">Undo</button>
<button id="btRedo">Redo</button>
Buffer = <span id="lbBuffer"></span>
<button id="btClear">Clear</button>
<pre id="lbNames"></pre>
</form>
相关文章:
- 如何设置$.ajax请求的超时,并在超时时间过长时进行重做
- 使用本地存储在Javascript中撤消、重做
- 在html/javascript中请求撤消/重做事件
- 缩放和撤消在画布上重做无法正常工作
- 所见即所得内容中的撤消和重做SWT中的可编辑内容;不起作用
- 使用 jquery 修改文本区域上的撤消/重做行为
- 使用带有 AngularJS 的 onclick 事件重置范围
- 是否可以在文本区域中插入文本并更新撤消/重做队列
- 使用结构.js在画布中撤消和重做命令
- j查询单击事件重置复选框的检查属性
- 在这段代码中,复制自雄辩javascript的ch15,keyup事件监听器做什么
- 谷歌地图api v3:为编辑后的多边形添加自定义撤消/重做功能
- JavaScript用一组不同的字母替换每个字母,但不要重做已经替换的部分
- 撤消重做时出现逻辑错误
- 使用statproperties和hasstatechange在fabric.js中实现撤销/重做
- Canvas游戏的Javascript事件重置
- 在 JavaScript 中撤消/重做
- 将事件重定向到内部元素
- 在浏览器中禁用撤消和重做
- 如何在浏览器兼容的Javascript中撤销和重做事件