基于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实现会有一些弊端，比如：