基于HTML5新特性Mutation Observer实现编辑器的撤销和回退操作
基于HTML5新特性Mutation Observer实现编辑器的撤销和回退操作
发布时间:2016-12-27 来源:查字典编辑
摘要:MutationObserver介绍MutationObserver给开发者们提供了一种能在某个范围内的DOM树发生变化时作出适当反应的能力...

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>

<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下的截图:

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

MutatoinObserver的浏览器兼容性:

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support 18

webkit

26

14(14) 11 15 6.0WebKit

推荐文章
猜你喜欢
附近的人在看
推荐阅读
拓展阅读
相关阅读
网友关注
最新HTML5教程学习
热门HTML5教程学习
网页设计子分类