基于HTML5新特性Mutation Observer實(shí)現(xiàn)編輯器的撤銷和回退操作

var observer = new MutationObserver(function(mutations) {
mutations.forEach(function(mutation) {
console.log(mutation.type);
});
});

observer.observe( document.body, {
'childList': true, //該元素的子元素新增或者刪除
'subtree': true, //該元素的所有子元素新增或者刪除
'attributes' : true, //監(jiān)聽屬性變化
'characterData' : true, // 監(jiān)聽text或者comment變化
'attributeOldValue' : true, //屬性原始值
'characterDataOldValue' : true
});

/**
* @desc MutationJs， 使用了DOM3的新事件 MutationObserve； 通過監(jiān)聽指定節(jié)點(diǎn)元素， 監(jiān)聽內(nèi)部dom屬性或者dom節(jié)點(diǎn)的更改， 并執(zhí)行相應(yīng)的回調(diào)；
* */
window.nono = window.nono || {};
/**
* @desc
* */
nono.MutationJs = function( dom ) {
//統(tǒng)一兼容問題
var MutationObserver = this.MutationObserver = window.MutationObserver ||
window.WebKitMutationObserver ||
window.MozMutationObserver;
//判斷瀏覽器是或否支持MutationObserver;
this.mutationObserverSupport = !!MutationObserver;
//默認(rèn)監(jiān)聽子元素， 子元素的屬性， 屬性值的改變;
this.options = {
'childList': true,
'subtree': true,
'attributes' : true,
'characterData' : true,
'attributeOldValue' : true,
'characterDataOldValue' : true
};
//這個(gè)保存了MutationObserve的實(shí)例;
this.muta = {};
//list這個(gè)變量保存了用戶的操作;
this.list = [];
//當(dāng)前回退的索引
this.index = 0;
//如果沒有dom的話，就默認(rèn)監(jiān)聽body;
this.dom = dom|| document.documentElement.body || document.getElementsByTagName("body")[0];
//馬上開始監(jiān)聽;
this.observe( );
};
$.extend(nono.MutationJs.prototype, {
//節(jié)點(diǎn)發(fā)生改變的回調(diào), 要把redo和undo都保存到list中;
"callback" : function ( records , instance ) {
//要把索引后面的給清空;
this.list.splice( this.index+1 );
var _this = this;
records.map(function(record) {
var target = record.target;
console.log(record);
//刪除元素或者是添加元素;
if( record.type === "childList" ) {
//如果是刪除元素;
if(record.removedNodes.length !== 0) {
//獲取元素的相對索引;
var indexs = _this.getIndexs(target.children , record.removedNodes );
_this.list.push({
"undo" : function() {
_this.disconnect();
_this.addChildren(target, record.removedNodes ,indexs );
_this.reObserve();
},
"redo" : function() {
_this.disconnect();
_this.removeChildren(target, record.removedNodes );
_this.reObserve();
}
});
//如果是添加元素;
};
if(record.addedNodes.length !== 0) {
//獲取元素的相對索引;
var indexs = _this.getIndexs(target.children , record.addedNodes );
_this.list.push({
"undo" : function() {
_this.disconnect();
_this.removeChildren(target, record.addedNodes );
_this.reObserve();
},
"redo" : function () {
_this.disconnect();
_this.addChildren(target, record.addedNodes ,indexs);
_this.reObserve();
}
});
};
//@desc characterData是什么鬼;
//ref : http://baike.baidu.com/link?url=Z3Xr2y7zIF50bjXDFpSlQ0PiaUPVZhQJO7SaMCJXWHxD6loRcf_TVx1vsG74WUSZ_0-7wq4_oq0Ci-8ghUAG8a
}else if( record.type === "characterData" ) {
var oldValue = record.oldValue;
var newValue = record.target.textContent //|| record.target.innerText, 不準(zhǔn)備處理IE789的兼容，所以不用innerText了;
_this.list.push({
"undo" : function() {
_this.disconnect();
target.textContent = oldValue;
_this.reObserve();
},
"redo" : function () {
_this.disconnect();
target.textContent = newValue;
_this.reObserve();
}
});
//如果是屬性變化的話style, dataset, attribute都是屬于attributes發(fā)生改變, 可以統(tǒng)一處理;
}else if( record.type === "attributes" ) {
var oldValue = record.oldValue;
var newValue = record.target.getAttribute( record.attributeName );
var attributeName = record.attributeName;
_this.list.push({
"undo" : function() {
_this.disconnect();
target.setAttribute(attributeName, oldValue);
_this.reObserve();
},
"redo" : function () {
_this.disconnect();
target.setAttribute(attributeName, newValue);
_this.reObserve();
}
});
};
});
//重新設(shè)置索引;
this.index = this.list.length-1;
},
"removeChildren" : function ( target, nodes ) {
for(var i= 0, len= nodes.length; i<len; i++ ) {
target.removeChild( nodes[i] );
};
},
"addChildren" : function ( target, nodes ,indexs) {
for(var i= 0, len= nodes.length; i<len; i++ ) {
if(target.children[ indexs[i] ]) {
target.insertBefore( nodes[i] , target.children[ indexs[i] ]) ;
}else{
target.appendChild( nodes[i] );
};
};
},
//快捷方法,用來判斷child在父元素的哪個(gè)節(jié)點(diǎn)上;
"indexOf" : function ( target, obj ) {
return Array.prototype.indexOf.call(target, obj)
},
"getIndexs" : function (target, objs) {
var result = [];
for(var i=0; i<objs.length; i++) {
result.push( this.indexOf(target, objs[i]) );
};
return result;
},
/**
* @desc 指定監(jiān)聽的對象
* */
"observe" : function( ) {
if( this.dom.nodeType !== 1) return alert("參數(shù)不對，第一個(gè)參數(shù)應(yīng)該為一個(gè)dom節(jié)點(diǎn)");
this.muta = new this.MutationObserver( this.callback.bind(this) );
//馬上開始監(jiān)聽;
this.muta.observe( this.dom, this.options );
},
/**
* @desc 重新開始監(jiān)聽;
* */
"reObserve" : function () {
this.muta.observe( this.dom, this.options );
},
/**
*@desc 不記錄dom操作， 所有在這個(gè)函數(shù)內(nèi)部的操作不會記錄到undo和redo的列表中;
* */
"without" : function ( fn ) {
this.disconnect();
fn&fn();
this.reObserve();
},
/**
* @desc 取消監(jiān)聽;
* */
"disconnect" : function () {
return this.muta.disconnect();
},
/**
* @desc 保存Mutation操作到list;
* */
"save" : function ( obj ) {
if(!obj.undo)return alert("傳進(jìn)來的第一個(gè)參數(shù)必須有undo方法才行");
if(!obj.redo)return alert("傳進(jìn)來的第一個(gè)參數(shù)必須有redo方法才行");
this.list.push(obj);
},
/**
* @desc ;
* */
"reset" : function () {
//清空數(shù)組;
this.list = [];
this.index = 0;
},
/**
* @desc 把指定index后面的操作刪除;
* */
"splice" : function ( index ) {
this.list.splice( index );
},
/**
* @desc 往回走， 取消回退
* */
"undo" : function () {
if( this.canUndo() ) {
this.list[this.index].undo();
this.index--;
};
},
/**
* @desc 往前走， 重新操作
* */
"redo" : function () {
if( this.canRedo() ) {
this.index++;
this.list[this.index].redo();
};
},
/**
* @desc 判斷是否可以撤銷操作
* */
"canUndo" : function () {
return this.index !== -1;
},
/**
* @desc 判斷是否可以重新操作;
* */
"canRedo" : function () {
return this.list.length-1 !== this.index;
}
});

//這個(gè)是實(shí)例化一個(gè)MutationJS對象, 如果不傳參數(shù)默認(rèn)監(jiān)聽body元素的變動;
mu = new nono.MutationJs();
//可以傳一個(gè)指定元素，比如這樣;
mu = new nono.MutationJS( document.getElementById("div0") );
//那么所有該元素下的元素變動都會被插件記錄下來；

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="http://cdn.bootcss.com/jquery/1.9.0/jquery.js"></script>
<script src="http://files.cnblogs.com/files/diligenceday/MutationJS.js"></script>
</head>
<body>
<div>
<p>
MutationObserver是為了替換掉原來Mutation Events的一系列事件， 瀏覽器會監(jiān)聽指定Element下所有元素的新增，刪除，替換等;
</p>
<div style="padding:20px;border:1px solid #f00">
<input type="button" value="撤銷操作" id="prev">;
<input type="button" value="撤銷操作回退" id="next">;
</div>
<input type="button" value="添加節(jié)點(diǎn)" id="b0">;
<input value="text" id="value">
<div id="div"></div>
</div>
<script>
window.onload = function () {
window.mu = new nono.MutationJs();
//取消監(jiān)聽
mu.disconnect();
//重新監(jiān)聽
mu.reObserve();
document.getElementById("b0").addEventListener("click", function ( ev ) {
div = document.createElement("div");
div.innerHTML = document.getElementById("value").value;
document.getElementById("div").appendChild( div );
});
document.getElementById("prev").addEventListener("click", function ( ev ) {
mu.undo();
});
document.getElementById("next").addEventListener("click", function ( ev ) {
mu.redo();
});
};
</script>
</body>
</html>