Как да използваме MutationObserver API за DOM Node Changes

Ето един сценарий: Рита, писателка на списание, редактира нейната статия онлайн. Тя запазва промените си и вижда съобщението “промените са запазени!” Точно тогава тя забелязва пропусната печатна грешка. Тя го фиксира и е на път да кликне “спасяване”, когато получи ядосано телефонно обаждане от шефа си.

След като разговорът приключи, тя се връща към екрана, вижда “промените са запазени!” изключва компютъра си и излиза от офиса.

Отделно от моята неспособност за разказване на истории, от този кратък сценарий забелязахме какъв проблем стои упоритото съобщение. Така че, в бъдеще ще решим да го избегнем, когато е възможно, и използваме такъв, който напомня на потребителя да го потвърди, като го кликне - или изчезва самостоятелно. Използването на втория за бързи съобщения е добра идея.

Вече знаем как да направим даден елемент изчезва от страница, така че това не трябва да е проблем. Това, което трябва да знаем, е кога се появи? Така че можем да го накараме да изчезне след правдоподобно време.

API на MutationObserver

Като цяло, когато DOM елемент (като съобщение Разделение) или други промени в възела, трябва да можем да го знаем. Дълго време разработчиците трябваше да разчитат на хакове и рамки поради липсата на роден API. Но това се промени.

Сега имаме MutationObserver (предишни мутационни събития). MutationObserver е роден обект на JavaScript с набор от свойства и методи. Това ни позволява наблюдавайте промяна на всеки възел като DOM Element, Document, Text и др добавяне или премахване на възел и промени в атрибута & данни на възел.

Нека видим пример за по-добро разбиране. Първо ще направим настройка, където се появява съобщение при щракване с бутон, подобно на това, което е видяла Рита. Тогава ще го направим създайте и свържете наблюдател на мутацията с това съобщение и кодирайте логиката за автоматично скриване на съобщението. акъл?

Забележка: Можеш в някакъв момент или вече да ме питаш в главата си “Защо просто не скриете съобщението от самото събитие при щракване върху бутона в JavaScript?” В моя пример не работя със сървър, така че, разбира се, клиентът е отговорен да покаже съобщението и да го скрие твърде лесно. Но както и в инструмента за редактиране на Rita, ако сървърът е този, който реши да промени съдържанието на DOM, клиентът може само да остане в готовност и да изчака.

Първо, създаваме настройката, за да покажем съобщението при натискане на бутон.

 Показване на съобщение

var msg = document.querySelector ('# msg'), SUCCESSMSG = "Промени записани!"; / * Добавяне на бутон събитие * / документ .querySelector ('бутон') .addEventListener ('click', showMsg); функция showMsg () msg.textContent = SUCCESSMSG; msg.style.background = 'teal';  

След като стартираме първоначалната настройка, нека изпълним следното;

• Създавам MutationObserver обект с дефинирана от потребителя функция за обратно извикване (функцията се дефинира по-късно в публикацията). Функцията ще се изпълнява при всяка мутация, наблюдавана от MutationObserver.
• Създайте конфигурационен обект, за да укажете вида на мутациите, които ще се наблюдават от MutationObserver.
• Свържете MutationObserver към целта, която е "msg" Разделение в нашия пример.

(функция startObservation () var / * 1) Създаване на обект MutationObserver * / observer = new MutationObserver (функция (мутации) mutationObserverCallback (мутации);), / * 2) Създаване на конфигурационен обект * / config = childList: вярно; / * 3) Glue'em all * / observer.observe (msg, config); ) (); 

По-долу е даден списък на свойствата за конфигурационния обект, идентифициращ различните видове мутации. Тъй като в нашия пример се занимаваме само с детски текстов възел, създаден за текста на съобщението, използвахме childList Имот.

Видове наблюдавани мутации

Сега, към тази функция за обратно извикване, която се изпълнява на всяка наблюдавана мутация.

функция mutationObserverCallback (мутации) / * Вземете първата мутация * / var mutationRecord = мутации [0]; / * Ако е добавен детски възел, скрийте съобщението след 2s * / if (mutationRecord.addedNodes [0]! == undefined) setTimeout (hideMsg, 2000);  function hideMsg () msg.textContent = "; msg.style.background = 'none'; 

Тъй като добавяме само съобщение към Разделение, ще вземем първата наблюдавана мутация и ще проверим дали е въведен текстов възел. Ако се случи повече от една промяна, можем просто да прелистим мутации масив.

Всяка мутация в мутации масив е представен от обекта MutationRecord със следните свойства.

Свойства на MutationRecord

И това е. просто трябва да поставим кода заедно за последната стъпка.

Поддръжка на браузър

препратка

• “W3C DOM4 мутационен наблюдател.” W3C. Web. 19 юни 2015 г.
• “MutationObserver.” Мрежа на разработчиците на Mozilla. Web. 19 юни 2015 г..