基于HTML5新特性Mutation Observer实现编辑器的撤销和回退操作

mutationobserver介绍

mutationobserver给开发者们提供了一种能在某个范围内的dom树发生变化时作出适当反应的能力.该api设计用来替换掉在dom3事件规范中引入的mutation事件.

mutation observer（变动观察器）是监视dom变动的接口。当dom对象树发生任何变动时，mutation observer会得到通知。

mutation observer有以下特点：

 •它等待所有脚本任务完成后，才会运行，即采用异步方式
 •它把dom变动记录封装成一个数组进行处理，而不是一条条地个别处理dom变动。
 •它即可以观察发生在dom节点的所有变动，也可以观察某一类变动

mdn的资料： mutationobserver

mutationobserver是一个构造函数， 所以创建的时候要通过 new mutationobserver;

实例化mutationobserver的时候需要一个回调函数，该回调函数会在指定的dom节点(目标节点)发生变化时被调用，

在调用时，观察者对象会 传给该函数 两个参数：

　　　　1：第一个参数是个包含了若干个mutationrecord对象的数组；

　　　　2：第二个参数则是这个观察者对象本身.

比如这样:

     

复制代码

代码如下:

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

observer的方法

实例observer有三个方法： 1: observe  ;2: disconnect ; 3: takerecords   ;

observe方法

observe方法：给当前观察者对象注册需要观察的目标节点,在目标节点(还可以同时观察其后代节点)发生dom变化时收到通知；

这个方法需要两个参数，第一个为目标节点， 第二个参数为需要监听变化的类型，是一个json对象，  实例如下：

       

复制代码

代码如下:

observer.observe( document.body, {
'childlist': true, //该元素的子元素新增或者删除
'subtree': true, //该元素的所有子元素新增或者删除
'attributes' : true, //监听属性变化
'characterdata' : true, // 监听text或者comment变化
'attributeoldvalue' : true, //属性原始值
'characterdataoldvalue' : true
});

disconnect方法

disconnect方法会停止观察目标节点的属性和节点变化， 直到下次重新调用observe方法；

takerecords

清空 观察者对象的 记录队列,并返回一个数组， 数组中包含mutation事件对象;

mutationobserver实现一个编辑器的redo和undo再适合不过了， 因为每次指定节点内部发生的任何改变都会被记录下来， 如果使用传统的keydown或者keyup实现会有一些弊端，比如：

1：失去滚动， 导致滚动位置不准确；

2：失去焦点；
....
用了几小时的时间，写了一个通过mutationobserver实现的 undo 和 redo (撤销回退的管理)的管理插件 mutationjs ,   可以作为一个单独的插件引入：(http://files.cnblogs.com/files/diligenceday/mutationjs.js):

复制代码

代码如下:

/**
* @desc mutationjs， 使用了dom3的新事件 mutationobserve； 通过监听指定节点元素， 监听内部dom属性或者dom节点的更改， 并执行相应的回调；
* */
window.nono = window.nono || {};
/**
* @desc
* */
nono.mutationjs = function( dom ) {
//统一兼容问题
var mutationobserver = this.mutationobserver = window.mutationobserver ||
window.webkitmutationobserver ||
window.mozmutationobserver;
//判断浏览器是或否支持mutationobserver;
this.mutationobserversupport = !!mutationobserver;
//默认监听子元素， 子元素的属性， 属性值的改变;
this.options = {
'childlist': true,
'subtree': true,
'attributes' : true,
'characterdata' : true,
'attributeoldvalue' : true,
'characterdataoldvalue' : true
};
//这个保存了mutationobserve的实例;
this.muta = {};
//list这个变量保存了用户的操作;
this.list = [];
//当前回退的索引
this.index = 0;
//如果没有dom的话，就默认监听body;
this.dom = dom|| document.documentelement.body || document.getelementsbytagname("body")[0];
//马上开始监听;
this.observe( );
};
$.extend(nono.mutationjs.prototype, {
//节点发生改变的回调, 要把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, 不准备处理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发生改变, 可以统一处理;
}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();
}
});
};
});
//重新设置索引;
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在父元素的哪个节点上;
"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 指定监听的对象
* */
"observe" : function( ) {
if( this.dom.nodetype !== 1) return alert("参数不对，第一个参数应该为一个dom节点");
this.muta = new this.mutationobserver( this.callback.bind(this) );
//马上开始监听;
this.muta.observe( this.dom, this.options );
},
/**
* @desc 重新开始监听;
* */
"reobserve" : function () {
this.muta.observe( this.dom, this.options );
},
/**
*@desc 不记录dom操作， 所有在这个函数内部的操作不会记录到undo和redo的列表中;
* */
"without" : function ( fn ) {
this.disconnect();
fn&fn();
this.reobserve();
},
/**
* @desc 取消监听;
* */
"disconnect" : function () {
return this.muta.disconnect();
},
/**
* @desc 保存mutation操作到list;
* */
"save" : function ( obj ) {
if(!obj.undo)return alert("传进来的第一个参数必须有undo方法才行");
if(!obj.redo)return alert("传进来的第一个参数必须有redo方法才行");
this.list.push(obj);
},
/**
* @desc ;
* */
"reset" : function () {
//清空数组;
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;
}
});

mutationjs如何使用

那么这个mutationjs如何使用呢?

复制代码

代码如下:

//这个是实例化一个mutationjs对象, 如果不传参数默认监听body元素的变动;
mu = new nono.mutationjs();
//可以传一个指定元素，比如这样;
mu = new nono.mutationjs( document.getelementbyid("div0") );
//那么所有该元素下的元素变动都会被插件记录下来；

mutation的实例mu有几个方法：

1：mu.undo()  操作回退；

2：mu.redo()   撤销回退；

3：mu.canundo() 是否可以操作回退， 返回值为true或者false；

4：mu.canredo() 是否可以撤销回退， 返回值为true或者false；

5：mu.reset() 清空所有的undo列表， 释放空间；

6：mu.without() 传一个为函数的参数， 所有在该函数内部的dom操作， mu不做记录；

mutationjs实现了一个简易的 undomanager 提供参考，在火狐和chrome，谷歌浏览器，ie11上面运行完全正常:

复制代码

代码如下:

<!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的一系列事件， 浏览器会监听指定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="添加节点" id="b0">;
<input value="text" id="value">
<div id="div"></div>
</div>
<script>
window.onload = function () {
window.mu = new nono.mutationjs();
//取消监听
mu.disconnect();
//重新监听
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>

demo在ie下的截图：

mutatoinobserver的浏览器兼容性:

feature	chrome	firefox (gecko)	internet explorer	opera	safari
basic support	18 webkit 26	14(14)	11	15	6.0webkit