1/18
文档分类:IT计算机

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


下载后只包含 1 个 DOC 格式的文档,没有任何的图纸或源代码,查看文件列表

特别说明:文档预览什么样,下载就是什么样。

下载所得到的文件列表
基于HTML5新特性MutationObserver实现编辑器撤销和回退操作.doc
文档介绍:
基于HTML5新特性Mutation Observer实现编辑器撤销和回退操作
?精品文档?
基于HTML5新特性Mutation Observer实
现编辑器撤销和回退操作
Mutation Observer,变动观察器,是监视DOM变动的接口。当DOM对象树发生任何变动时,Mutation Observer
会得到通知,本文给大家分享基于HTML5新特性Mutation Observer实现编辑器的撤销和回退操作,感兴趣的朋友参考下
MutationObserver介绍
MutationObserver给开发者们提供了一种能在某个范围内的DOM树发生变化时作出适当反应的能力.该API设计用来替换掉在DOM3事件规范中引入的Mutation事件.
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) { 
mutations.forEach(function(mutation) { 
console.log(mutation.type); 
}); 
});
observer的方法
实例observer有三个方法, 1: observe  ;2: disconnect ; 3: takeRecords   ;
observe方法
observe方法,给当前观察者对象注册需要观察的目标节

2 / 19
?精品文档?
点,在目标节点(还可以同时观察其后代节点)发生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再适合不过了, 因为每次指定节点内部发生的任何改变都会被
3 / 19
?精品文档?
记录下来, 如果使用传统的keydown或者keyup实现会有一些弊端,比如,

1,失去滚动, 导致滚动位置不准确,
2,失去焦点,
....
用了几小时的时间,写了一个通过MutationObserver实现的 undo 和 redo (撤销回退的管理)的管理插件 MutationJS ,   可以作为一个单独的插件引入,
():
代码如下:
/**
* ***@desc MutationJs, 使用了DOM3的新事件 Mutat
内容来自淘豆网www.taodocs.com转载请标明出处.
相关文档
非法内容举报中心
文档信息
文档标签