直播平台搭建源码，纯js实现编辑器撤消/重做
核心JS
//基类
var Core = function() {}
Core.prototype = {
arrayPrevStep: [], //存放撤消操作方法列表
arrayNextStep: [], //存放恢复操作方法列表
triggerUndo: false, //撤消操作标记
triggerRedo: false, //恢复操作标记
_undo: null, //撤消按钮
_redo: null, //恢复按钮
setStep: function(func) { //操作之后触发保存的方法（调用后台保存方法）
if (this.triggerUndo) {
this.arrayNextStep.push(func);
if (this._redo.classList.contains('unactive')) {
this._redo.classList.remove('unactive');
}
} else {
if (!this.triggerRedo) Core.prototype.arrayNextStep = [];
this.arrayPrevStep.push(func);
if (this.arrayPrevStep.length > 20) {
this.arrayPrevStep.shift();
}
if (this._undo.classList.contains('unactive')) {
this._undo.classList.remove('unactive');
}
if (this.arrayNextStep.length < 1) {
this._redo.classList.add('unactive');
}
}
Core.prototype.triggerUndo = false;
Core.prototype.triggerRedo = false;
},
_selectionNavUndo: function() {
var _this = this;
_this._undo.addEventListener('click', function() {
var head = _this.arrayPrevStep.length - 1;
if (head !== -1) {
Core.prototype.triggerUndo = true;
try {
_this.arrayPrevStep[head]();
} catch (e) {
_this.arrayPrevStep = [];
}
Core.prototype.arrayPrevStep = _this.arrayPrevStep.slice(0, head);
if (_this.arrayPrevStep.length === 0 &&
!_this._undo.classList.contains('unactive')) {
_this._undo.classList.add('unactive');
}
}
});
},
_selectionNavRedo: function() {
var _this = this;
_this._redo.addEventListener('click', function() {
var head = _this.arrayNextStep.length - 1;
if (head !== -1) {
Core.prototype.triggerRedo = true;
try {
_this.arrayNextStep[head]();
Core.prototype.arrayNextStep = _this.arrayNextStep.slice(0, head);
} catch (e) {
Core.prototype.arrayPrevStep = [];
Core.prototype.arrayNextStep = [];
Core.prototype.triggerUndo = false;
Core.prototype.triggerRedo = false;
console.error(e);
}
if (_this.arrayNextStep.length === 0 &&
!_this._redo.classList.contains('unactive')) {
_this._redo.classList.add('unactive');
}
}
});
}
}
Core.prototype.constructor = Core;
Core.prototype._undo = document.querySelector('.undo');
Core.prototype._redo = document.querySelector('.redo');
// 初始化撤消／恢复按钮
Core.prototype._selectionNavUndo();
Core.prototype._selectionNavRedo();
// 操作场景(输入框改变)
var EditorText = function(el) {
var _this = this;
this._targetObject = el;
this._targetObject.addEventListener("change", function(e) {
var saveVal = _this._text;
_this._text = this.value;
_this.setText(_this._text, saveVal);
})
}
// 继承Core基础类,并新增EditorText特有方法
EditorText.prototype = Object.assign(Object.create(Core.prototype), {
_targetObject: null,
_text: "",
setText: function(newValue, oldValue) {
var _this = this;
_this._targetObject.value = newValue;
_this.setStep(function() {
_this.setText(oldValue, newValue)
})
}
})
EditorText.prototype.constructor = EditorText;
document.querySelectorAll("input").forEach(item => {
// 建立监听
new EditorText(item);
});
HTML
<html>
<body>
<style>
.main {
margin: 400px auto;
width: 500px;
}
.btn-box {
margin-top: 20px;
}
button{
color: #ffffff;
border: none;
padding: 6px 18px;
border-radius: 3px;
}
button.unactive{
cursor: no-drop;
background-color: #f6f6f6;
color: #999999;
}
</style>
<div>
<div>
<input type="text" name="name" placeholder="请输入姓名">
<input type="text" name="age" placeholder="请输入年龄">
</div>
<div>
<button class="undo unactive">撤销</button>
<button class="redo unactive">恢复</button>
</div>
</div>
<script>
//核心js
</script>
</body>
</html>
以上就是直播平台搭建源码，纯js实现编辑器撤消/重做， 更多内容欢迎关注之后的文章
标签：Core,arrayPrevStep,unactive,arrayNextStep,js,编辑器,源码,._,prototype From： https://www.cnblogs.com/yunbaomengnan/p/16984880.html