Hogyan használjuk a MutationObserver API-t DOM csomópont-változásokhoz

Itt egy forgatókönyv: Rita, egy magaziníró szerkeszti az online cikkét. Megmenti a változásait, és látja az üzenetet “változtatások elmentve!” Éppen akkor észrevesz egy hiányzó tintát. Megjavítja és rákattint “mentés”, amikor dühös telefonhívást kap a főnöke.

Miután a hívás befejeződött, visszafordul a képernyőre, látja “változtatások elmentve!” leállítja számítógépét és viharokat az irodából.

Eltekintve attól, hogy elmondom a történetet, ezt a rövid forgatókönyvet észleltük, milyen baj, amit a tartós üzenet táplált. Tehát a jövőben úgy döntünk, hogy elkerüljük, ha lehetséges, és használjuk azt, amelyik a felhasználónak arra kéri, hogy rákattintjon rá - vagy eltűnik. A második üzenetek használata gyors üzenetekhez jó ötlet.

Már tudjuk, hogyan lehet egy elemet eltűnni az oldalról, így nem lehet probléma. Amit tudnunk kell mikor jelenik meg? Tehát egy hihetetlen idő után eltűnik.

MutationObserver API

Összességében, ha egy DOM elem (mint egy üzenet div) vagy bármely más csomópont megváltozik, tudnunk kell tudni. Hosszú ideig a fejlesztőknek natív API hiánya miatt hackekre és keretekre kellett támaszkodniuk. De ez megváltozott.

Most már van MutationObserver (korábban mutációs események). MutationObserver egy JavaScript natív objektum, amelynek tulajdonságai és módszerei vannak. Ez lehetővé teszi számunkra figyeljen a csomópontokra mint a DOM elem, a dokumentum, a szöveg stb egy csomópont hozzáadása vagy eltávolítása, és a csomópont attribútumának és adatainak módosítása.

Lássunk egy példát a jobb megértés érdekében. Először készítsünk egy beállítást, ahol egy üzenet jelenik meg a gombnyomásra, mint a Rita látta. Akkor majd hozzon létre és kapcsoljon egy mutációs megfigyelőt az üzenetablakhoz és kódolja a logikát az üzenet automatikus elrejtéséhez. Hozzáértés?

jegyzet: Lehet, hogy valamikor vagy már megkérdezte a fejedben “Miért nem csak elrejteni az üzenetet a gombnyomtató esemény belsejéből a JavaScript-ben?” Például én nem dolgozom egy szerverrel, így természetesen az ügyfél felelős az üzenet megjelenítéséért, és túl könnyen elrejtheti azt. De mint a Rita szerkesztőeszközéhez hasonlóan, ha a szerver az, amely úgy dönt, hogy megváltoztatja a DOM tartalmát, az ügyfél csak éber és várhat.

Először hozzunk létre egy beállítást, amely megmutatja az üzenetet a gombnyomásra.

 Üzenet megjelenítése

var msg = document.querySelector ('# msg'), SUCCESSMSG = "Elmentett mentések!"; / * Gomb hozzáadása esemény * / dokumentum .querySelector ('gomb') .addEventListener ('click', showMsg); showMsg () msg.textContent = SUCCESSMSG; msg.style.background = 'réce';  

Miután megkaptuk a kezdeti beállítást, tegye a következőket:

• Hozzon létre egy MutationObserver a felhasználó által megadott visszahívási funkcióval rendelkező objektum (a funkció a későbbiekben definiálható). A függvény minden, a MutationObserver.
• Hozzon létre egy konfigurációs objektumot annak meghatározásához, hogy milyen típusú mutációk szükségesek a MutationObserver.
• Kötés a MutationObserver a célhoz, ami az "msg" div példánkban.

(startObservation () var / * 1 funkció) MutationObserver objektum létrehozása * / observer = új MutationObserver (funkció (mutációk) mutationObserverCallback (mutációk);), / * 2) Konfigurációs objektum * / config = childList: igaz; / * 3) Glue'em all * / observer.observe (msg, config); ) (); 

Az alábbiakban felsoroljuk a config objektum azonosítja a különböző mutációkat. Mivel példánkban csak az üzenet szövegéhez létrehozott gyermekszövegcsomópontot kezeljük, ezt használtuk childList ingatlan.

A megfigyelt mutációk fajtái

Most, hogy a visszahívási függvény minden megfigyelt mutáción végrehajtódik.

funkció mutationObserverCallback (mutációk) / * Fogd az első mutációt * / var mutationRecord = mutációk [0]; / * Ha gyermekcsomópont került hozzáadásra, elrejtse az üzenetet 2s * / if után (mutationRecord.addedNodes [0]! == undefined) setTimeout (hideMsg, 2000);  funkció hideMsg () msg.textContent = "; msg.style.background = 'none'; 

Mivel csak egy üzenetet adunk hozzá a div, csak megragadjuk az első mutációt, és ellenőrizzük, hogy beillesztett-e egy szövegcsomópontot. Ha egynél több változás történik, akkor csak a hurokon keresztül tudunk áthidalni mutációk sor.

Minden mutáció a mutációk A tömböt az objektum képviseli MutationRecord a következő tulajdonságokkal.

A MutationRecord

És ez az. csak a kódot kell összeadnunk az utolsó lépéshez.

Böngésző támogatás

Referencia

• “W3C DOM4 mutációs megfigyelő.” W3C. Web. 2015. június 19. \ t
• “MutationObserver.” Mozilla fejlesztői hálózat. Web. 2015. június 19. \ t.