Pagina principala » Codificare » Cum se utilizează API-ul MutationObserver pentru modificările nodului DOM

    Cum se utilizează API-ul MutationObserver pentru modificările nodului DOM

    Iată un scenariu: Rita, scriitor de reviste, editează un articol online al ei. Își salvează schimbările și vede mesajul “schimbarile au fost salvate!” Doar atunci, ea observă o tipo care a ratat. Ea o rezolvă și este pe cale să facă clic “Salvați”, când primește un telefon telefon furios de la șeful ei.

    După terminarea apelului, se întoarce la ecran, vede “schimbarile au fost salvate!” închide computerul și se dezlănțuie din birou.

    În afară de ineptitudinea mea de povestire, am observat din acest scenariu scurt ce tulburare a făcut acest mesaj persistent. Deci, în viitor, vom decide să o evităm atunci când este posibil și să folosim unul care fie îi cere utilizatorului să recunoască făcând clic pe acesta - sau dispare singură. Folosirea celui de-al doilea pentru mesaje rapide este o idee bună.

    Știm deja cum să facem ca un element să dispară de pe o pagină, astfel încât aceasta să nu fie o problemă. Trebuie să știm că este când a apărut? Așa că o putem face să dispară după un timp plauzibil.

    MutationObserver API

    În general, atunci când un element DOM (ca un mesaj div) sau orice alte schimbări de noduri, ar trebui să fim capabili să-l cunoaștem. De mult timp dezvoltatorii au trebuit să se bazeze pe hack-uri și cadre datorită lipsei unui API nativ. Dar asta se schimbase.

    Acum avem MutationObserver (evenimente de mutație anterioare). MutationObserver este un obiect nativ JavaScript cu un set de proprietăți și metode. Ne lasă observați o modificare pe orice nod cum ar fi elementul DOM, document, text etc. Prin mutație, ne referim adăugarea sau eliminarea unui nod și modificarea atributului și datelor nodului.

    Să vedem un exemplu pentru o mai bună înțelegere. Mai întâi vom face un set în care apare un mesaj după clic pe buton, așa cum a văzut-o Rita. Atunci o vom face creați și conectați un observator de mutații la acea casetă de mesaje și codificați logica pentru ascunderea automată a mesajului. Pricepere?

    Notă: Poate că la un moment dat m-ați întrebat deja în cap “De ce nu ascundeți doar mesajul din interiorul butonului de clicuri din buton în JavaScript?” În exemplul meu, nu lucrez cu un server, așa că, desigur, clientul este responsabil să afișeze mesajul și poate să-l ascundă prea ușor. Dar, ca și în instrumentul de editare al lui Rita, dacă serverul este cel care decide să schimbe conținutul DOM, clientul poate rămâne atent și așteaptă.

    Mai întâi, vom crea setarea pentru a afișa mesajul după apăsarea butonului.


    var msg = document.querySelector ('# msg'), SUCCESSMSG = "Modificări salvate!"; / * Adăugați butonul pentru clic pe eveniment * / document .querySelector ('button') .addEventListener ('click', showMsg); funcția showMsg () msg.textContent = SUCCESSMSG; msg.style.background = 'teal';  

    Odată ce am început instalarea inițială, permiteți următoarele:

    • Creeaza o MutationObserver obiect cu o funcție de apel invers definită de utilizator (funcția este definită mai târziu în post). Funcția va fi executată la fiecare mutație observată de către MutationObserver.
    • Creați un obiect config pentru a specifica tipul de mutații care trebuie respectate de către MutationObserver.
    • Legați-vă MutationObserver la țintă, care este "msg" div în exemplul nostru.
    ()), / * 2) Crearea unui obiect config * / config = childList: function_name Adevărat; / * 3) Glue'em toate * / observer.observe (msg, config); ) (); 

    Mai jos este o listă de proprietăți pentru config obiect care identifică diferitele tipuri de mutații. Deoarece în exemplul nostru avem doar un nod de text copil creat pentru textul mesajului, am folosit childList proprietate.

    Tipuri de mutații observate

    Proprietate Când este setat la Adevărat
    childList Se observă introducerea și eliminarea nodurilor copilului țintă.
    atribute Sunt observate modificări ale atributelor țintă.
    characterData Modificările datelor din țintă sunt respectate.

    Acum, la funcția de apel invers care se execută pe fiecare mutație observată.

    mutația funcțieiObserverCallback (mutații) / * Prinde prima mutație * / var mutationRecord = mutații [0]; / * Dacă un nod copil a fost adăugat, ascunde mesajul după 2s * / if (mutationRecord.addedNodes [0]! == undefined) setTimeout (hideMsg, 2000);  funcția hideMsg () msg.textContent = "; msg.style.background = 'none'; 

    Deoarece adăugăm doar un mesaj la div, vom apuca prima mutație observată pe ea și vom verifica dacă a fost introdus un nod de text. Dacă se întâmplă mai mult de o schimbare, putem trece prin mutații mulțime.

    Fiecare mutație în mutații matricea este reprezentată de obiect MutationRecord cu următoarele proprietăți.

    Proprietăți ale MutationRecord

    Proprietate Se intoarce
    addedNodes Gama neagră sau o serie de noduri adăugate.
    Numele atributului Nul sau numele atributului care a fost adăugat, eliminat sau modificat.
    attributeNamespace Nul sau spațiul de nume al atributului care a fost adăugat, eliminat sau modificat.
    nextSibling Noul sau viitorul frate al nodului care a fost adăugat sau eliminat.
    OLDVALUE Valoarea nulă sau anterioară a atributului sau a datelor a fost modificată.
    previousSibling Federația nulă sau anterioară a nodului care a fost adăugat sau eliminat.
    removedNodes Gama matură sau matricea de noduri care au fost eliminate.
    ţintă Nod vizat de MutationObserver
    tip Tipul de mutație observat.

    Si asta e. trebuie doar să punem codul împreună pentru ultimul pas.

    Suport pentru browser

    IMAGE: Pot folosi. Web. 19 iunie 2015

    Referinţă

    • “W3C DOM4 Mutation Observer.” W3C. Web. 19 iunie 2015
    • “MutationObserver.” Rețeaua Mozilla pentru dezvoltatori. Web. 19 iunie 2015.