基于HTML5新特性MutationObserver实现编辑器撤销和回退操作.doc

基于HTML5新特性Mutation Observer实现编辑器撤销和回退操作
?精品文档?
基于HTML5新特性Mutation Observer实
现编辑器撤销和回退操作
Mutation Observer,变动观察器,是监视DOM变动的接口。当DOM对象树发生任何变动时,Mutation Observer
会得到通知,本文给大家分享基于HTML5新特性Mutation Observer实现编辑器的撤销和回退操作,感兴趣的朋友参考下
MutationObserver介绍
.
Mutation Observer,变动观察器,是监视DOM变动的接口。当DOM对象树发生任何变动时,Mutation Observer
会得到通知。
Mutation Observer有以下特点,
•它等待所有脚本任务完成后,才会运行,即采用异步方式
•它把DOM变动记录封装成一个数组进行处理,而不是一条条地个别处理DOM变动。
•它即可以观察发生在DOM节点的所有变动,也可以观察某一类变动
MDN的资料, MutationObserver
1 / 19
?精品文档?
MutationObserver是一个构造函数, 所以创建的时候要
通过 new MutationObserver;
实例化MutationObserver的时候需要一个回调函数,该
回调函数会在指定的DOM节点(目标节点)发生变化时被调
用,
在调用时,观察者对象会 传给该函数 两个参数,
1,第一个参数是个包含了若干个MutationRecord对象
的数组,
2,第二个参数则是这个观察者对象本身.
比如这样:
代码如下:
var observer = new
MutationObserver(function(mutations) { 
(function(mutation) { 
(); 
}); 
});
observer的方法
实例observer有三个方法, 1: observe  ;2: disconnect ; 3: takeRecords   ;
observe方法
observe方法,给当前观察者对象注册需要观察的目标节
2 / 19
?精品文档?
点,在目标节点(还可以同时观察其后代节点)发生DOM变化时收到通知,
这个方法需要两个参数,第一个为目标节点, 第二个参数为需要监听变化的类型,是一个json对象,  实例如下,
代码如下:
( , {
‘childList’: true, //该元素的子元素新增或者删除
‘subtree’: true, //该元素的所有子元素新增或者删除
‘attributes’ : true, //监听属性变化
‘characterData’ : true, // 监听text或者comment变化
‘attributeOldValue’ : true, //属性原始值
‘characterDataOldValue’ : true 
});
disconnect方法
disconnect方法会停止观察目标节点的属性和节点变化, 直到下次重新调用observe方法,
takeRecords
清空 观察者对象的 记录队列,并返回一个数组, 数组中包含Mutation事件对象;
MutationObserver实现一个编辑器的redo和undo再适合不过了, 因为每次指定节点内部发生的任何改变都会被
3 / 19
?精品文档?
记录下来, 如果使用传统的keydown或者keyup实现会有一些弊端,比如,
1,失去滚动, 导致滚动位置不准确,
2,失去焦点,
....
用了几小时的时间,写了一个通过MutationObserver实现的 undo 和 redo (撤销回退的管理)的管理插件 MutationJS ,   可以作为一个单独的插件引入,
():
代码如下:
/**
* ***@desc MutationJs, 使用了DOM3的新事件 Mutation