直播平臺搭建原始碼，純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{
background-color: #07c160;
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實現編輯器撤消/重做，更多內容歡迎關注之後的文章

直播平臺搭建原始碼，純js實現編輯器撤消/重做

相關文章