Melaksanakan operasi buat asal dan rollback editor berdasarkan ciri HTML5 baharu kemahiran tutorial Mutation Observer

Pengenalan kepada MutationObserver

MutationObserver menyediakan pembangun dengan keupayaan untuk bertindak balas dengan sewajarnya apabila pepohon DOM dalam julat tertentu berubah API ini direka untuk menggantikan acara Mutasi yang diperkenalkan dalam spesifikasi acara DOM3.

Pemerhati Mutasi ialah antara muka untuk memantau perubahan DOM. Pemerhati Mutasi akan dimaklumkan apabila sebarang perubahan berlaku dalam pepohon objek DOM.

Pemerhati Mutasi mempunyai ciri berikut:

•Ia menunggu semua tugasan skrip selesai sebelum dijalankan, iaitu, dalam cara tak segerak
•Ia merangkum rekod perubahan DOM ke dalam tatasusunan untuk diproses dan bukannya memproses perubahan DOM satu demi satu.
•Ia boleh memerhati semua perubahan yang berlaku dalam nod DOM, dan ia juga boleh melihat jenis perubahan tertentu

Maklumat MDN: MutationObserver

MutationObserver ialah pembina, jadi apabila menciptanya, anda perlu lulus MutationObserver baharu;

Apabila membuat seketika MutationObserver, fungsi panggil balik diperlukan apabila nod DOM (nod sasaran) berubah

Apabila dipanggil, objek pemerhati akan dihantar ke fungsi dengan dua parameter:

　1: Parameter pertama ialah tatasusunan yang mengandungi beberapa objek MutationRecord;

　2: Parameter kedua ialah objek pemerhati itu sendiri

Contohnya:

Salin kodKodnya adalah seperti berikut:

var observer = new MutationObserver( function(mutasi ) {

mutation.forEach(function(mutation) {
console.log(mutation.type);
});

kaedah pemerhati

Pemerhati instance mempunyai tiga kaedah: 1: observe ; 3: takeRecords ;

kaedah amati

Kaedah pemerhatian: Daftarkan nod sasaran yang perlu diperhatikan pada objek pemerhati semasa dan terima pemberitahuan apabila DOM berubah dalam nod sasaran (anda juga boleh memerhati nod turunannya pada masa yang sama); Kaedah ini memerlukan dua parameter, yang pertama ialah nod sasaran, dan parameter kedua ialah jenis yang perlu dipantau untuk perubahan, iaitu objek json contohnya seperti berikut:

Salin kod

Kodnya adalah seperti berikut: observer.observe( document. badan, { 'childList': true, //Elemen anak elemen ini ditambah atau dipadam

'subtree': true, //Semua elemen anak elemen ini ditambah atau dipadamkan

' attributes' : true, //Dengar untuk perubahan atribut

'characterData' : true, //Dengar untuk perubahan teks atau ulasan
'attributeOldValue' : true, //Nilai asal atribut
'characterDataOldValue' : benar
});

kaedah putus sambungan

Kaedah putus sambungan akan berhenti memerhatikan sifat dan perubahan nod nod sasaran sehingga kaedah pemerhatian dipanggil semula pada masa akan datang;

takeRecords

Kosongkan baris gilir rekod objek pemerhati dan kembalikan tatasusunan yang mengandungi objek peristiwa Mutasi;

MutationObserver sesuai untuk melaksanakan buat semula dan buat asal editor, kerana sebarang perubahan yang berlaku dalam nod yang ditentukan akan direkodkan setiap kali Jika anda menggunakan keydown tradisional atau pelaksanaan keyup, akan terdapat beberapa kelemahan, seperti: 1: Kehilangan tatal, mengakibatkan kedudukan tatal yang tidak tepat; 2: Hilang fokus;

....

Ia mengambil masa beberapa jam untuk menulis pemalam pengurusan MutationJS untuk buat asal dan buat semula (pengurusan buat asal dan balik) yang dilaksanakan melalui MutationObserver, yang boleh digunakan sebagai pengenalan pemalam Berasingan: (

http://files.cnblogs.com/files/diligenceday/MutationJS.js

Salin kod

Kod tersebut adalah seperti berikut:

/**
* @desc MutationJs, menggunakan peristiwa baharu DOM3 MutationObserve dengan mendengar elemen nod yang ditentukan, mendengar perubahan dalam atribut dom dalaman atau nod dom dan melaksanakan panggilan balik yang sepadan;*/
window.nono = window.nono || {};
/**
* @desc
**/
nono.MutationJs = function( dom ) {
//Isu keserasian seragam
var MutationObserver = this.MutationObserver = window.MutationObserver ||
window.WebKitMutationObserver ||
window.MozMutationObserver;
//Tentukan sama ada penyemak imbas adalah atau Sama ada untuk menyokong MutationObserver;
this.mutationObserverSupport = !!MutationObserver;
//Secara lalai, dengar perubahan dalam elemen anak, atribut unsur anak dan nilai atribut;
this.options = {
'childList': benar,
'subtree' : benar,
'attributes' : true,
'characterData' : true,
'attributeOldValue' : true,
'characterDataOldValue' : true
} ;
//Ini menyimpan contoh MutationObserve;
this.muta = {};
//Pembolehubah senarai menyimpan operasi pengguna;
this.list = [ ];
//Indeks rollback semasa
this.index = 0;
//Jika tiada dom, ia akan mendengar isi secara lalai;
this.dom = dom|| .documentElement.body ||. dokumen getElementsByTagName("body")[0];
//Mulakan pemantauan segera;
this.observe( );
};
$.extend(nono. MutationJs.prototype, {
//Panggil balik untuk perubahan nod, anda perlu menyimpan buat semula dan buat asal pada senarai;
"panggilan balik" : fungsi ( rekod , contoh ) {
//Anda perlu mengosongkan yang di belakang indeks;
this .list.splice( this.index 1 );
var _this = this;
records.map(function(record) {
var target = record.target;
console.log(record) ;
//Padam atau tambah elemen;
if( record.type === "childList" ) {
//If you delete elements;
if (record.removedNodes.length ! == 0) {
//Dapatkan indeks relatif elemen;
var indexs = _this.getIndexs(target.children, record.removedNodes);
_this.list .push({
"undo " : function() {
_this.disconnect();
_this.addChildren(target, record.removedNodes ,indexs );
_this.reObserve();
},
"buat semula " : function() {
_this.disconnect();
_this.removeChildren(target, record.removedNodes );
_this.reObserve();
}
});
//Jika elemen ditambah;
};
if(record.addedNodes.length !== 0) {
//Dapatkan indeks relatif elemen ;
var indexs = _this.getIndexs( target.children , record.addedNodes );
_this.list.push({
"undo" : function() {
_this.disconnect();
_this.removeChildren(sasaran, rekod. tambahNod );
_this.reObserve();
},
"buat semula" : fungsi () {
_this.disconnect();
_this.addChildren(target, record.addedNodes, indexes);
_this.reObserve();
}
});
};
//@desc What the hell is characterData ;
//ruj: http:// baike.baidu.com/link?url=Z3Xr2y7zIF50bjXDFpSlQ0PiaUPVZhQJO7SaMCJXWHxD6loRcf_TVx1vsG74WUSZ_0-7wq4_oq0Ci-8ghels jika " ) {
var oldValue = rekod. oldValue;
var newValue = rekod .target.textContent //|| record.target.innerText, tidak bersedia untuk mengendalikan keserasian IE789, jadi innerText tidak diperlukan;
_this.list.push({
"buat asal" : function() {
_this.disconnect();
target.textContent = oldValue;
_this.reObserve();
},
"buat semula" : fungsi () {
_this.disconnect();
target.textContent = newValue;
_this.reObserve();
}
});
//Jika atribut berubah , gaya, set data, atribut semuanya tergolong dalam perubahan atribut, anda boleh pemprosesan Bersatu;
}lain jika( rekod.jenis === "atribut" ) {
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 target.removeChild( nodes[i] );
};
},
"addChildren" : function ( target, nodes ,indexs) {
for(var i= 0, len= nodes.length; 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 result.push( this.indexOf(target, objs[i]) );
};
return result;
},
/**
* @desc specifies the listening object
**/
"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 restart monitoring;
**/
"reObserve" : function () {
this.muta.observe( this.dom, this.options );
},
/**
*@desc does not record DOM operations, all operations inside this function will not be recorded in the undo and redo lists;
**/
"without" : function ( fn ) {
this.disconnect();
fn&fn();
this.reObserve();
},
/**
* @desc Cancel monitoring;
**/
"disconnect" : function () {
return this.muta.disconnect();
},
/**
* @desc Save Mutation operations to 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 Delete the operation after the specified index;
**/
"splice" : function ( index ) {
this.list.splice( index );
},
/**
* @desc Go back, cancel the rollback
**/
"undo" : function () {
if( this.canUndo() ) {
this.list[this.index].undo();
this.index--;
};
},
/**
* @desc Go forward and do it again
**/
"redo" : function () {
if( this.canRedo() ) {
this.index ;
this.list[this.index].redo();
};
},
/**
* @desc determines whether the operation can be undone
**/
"canUndo" : function () {
return this.index !== -1;
},
/**
* @desc determines whether it can be re-operated;
**/
"canRedo" : function () {
return this.list.length-1 !== this.index;
}
});

MutationJS如何使用

那么这个MutationJS如何使用呢?

复制代码

代码如下:

//Ini adalah untuk membuat instantiat objek MutationJS jika tiada parameter diluluskan, ia akan memantau perubahan dalam elemen badan secara lalai;
mu = new nono.MutationJs();
// Anda boleh lulus elemen yang ditentukan. Contohnya:
mu = new nono.MutationJS( document.getElementById("div0") );
//Kemudian semua perubahan elemen di bawah elemen ini akan direkodkan oleh pemalam ;

Contoh mutasi mu mempunyai beberapa kaedah:

1: mu.undo() operasi balik;

2: mu.redo() Buat asal rollback;

3: Sama ada mu.canUndo() boleh beroperasi semula, nilai pulangan adalah benar atau salah;

4: Sama ada mu.canRedo() boleh membatalkan rollback, nilai pulangan adalah benar atau salah;

5: mu.reset() mengosongkan semua senarai buat asal dan melepaskan ruang;

6: mu.without() melepasi parameter fungsi dan semua operasi DOM di dalam fungsi tidak akan direkodkan oleh mu

MutationJS melaksanakan undoManager mudah untuk rujukan, yang berjalan dengan sempurna pada Firefox, Chrome, Google Chrome dan IE11:

Salin kod

Kod tersebut adalah seperti berikut:

Mutasi
adalah untuk penggantian Alih keluar siri asal Peristiwa Mutasi dan penyemak imbas akan memantau penambahan, pemadaman, penggantian, dsb. semua elemen di bawah Elemen yang ditentukan;

;
;

;

Artikel terbaru oleh pengarang