Како користити МутатионОбсервер АПИ за ДОМ Ноде Цхангес

Ево сценарија: Рита, писац часописа, уређује њен чланак на интернету. Она чува промене и види поруку “промене су сачуване!” Управо тада, она примећује погрешну грешку коју је пропустила. Она то поправља и спрема се да кликне “сачувати”, када добије љути телефонски позив од свог шефа.

Након што се позив заврши, она се враћа на екран, види “промене су сачуване!” искључује компјутер и избија из канцеларије.

Осим моје неспособности за причање прича, из тог кратког сценарија приметили смо који проблем је стварала трајна порука. Дакле, у будућности ћемо одлучити да га избегнемо када је то могуће и употребимо онај који или од корисника тражи да га потврди кликом на њега - или нестаје сам од себе. Коришћење другог за брзе поруке је добра идеја.

Већ знамо како да неки елемент нестане са странице, тако да то не би требало да буде проблем. Оно што треба да знамо је када се појавио? Тако да можемо да натерамо да нестане после вероватног времена.

МутатионОбсервер АПИ

Све у свему, када је ДОМ елемент (као порука див) или било које друге промјене чвора, требали бисмо бити у могућности то знати. Дуго времена програмери су се морали ослањати на хакове и оквире због недостатка изворног АПИ-ја. Али то се променило.

Сада имамо МутатионОбсервер (претходно Мутатион Евентс). МутатионОбсервер је ЈаваСцрипт природни објекат са скупом својстава и метода. То нам дозвољава посматрајте промену на било ком чвору као ДОМ Елемент, Доцумент, Тект, итд додавање или уклањање чвора и промене атрибута и података чвора.

Да видимо пример за боље разумевање. Прво ћемо направити подешавање где ће се појавити порука када кликнете на дугме, као што је она видела. Онда ћемо креирајте и повежите посматрача мутације са том кутијом за поруке и кодирајте логику да бисте аутоматски сакрили поруку. Савви?

Белешка: Можете у неком тренутку или сте ме већ питали у глави “Зашто не бисте само сакрили поруку унутар самог догађаја кликом на дугме у ЈаваСцрипту?” У мом примјеру, не радим са сервером, тако да је клијент одговоран да покаже поруку и да је може превише лако сакрити. Али као у Ритиној алатки за уређивање ако је сервер онај који одлучује да промени ДОМ садржај, клијент може само да остане упозорење и чека.

Прво креирамо подешавање да прикажемо поруку о клику на дугме.

вар мсг = доцумент.куериСелецтор ('# мсг'), СУЦЦЕССМСГ = "Измене сачуване!"; / * Додај тастер клик на догађај * / доцумент .куериСелецтор ('буттон') .аддЕвентЛистенер ('клик', сховМсг); фунцтион сховМсг () мсг.тектЦонтент = СУЦЦЕССМСГ; мсг.стиле.бацкгроунд = 'теал';

Када смо покренули почетно подешавање, учинимо следеће;

Створити МутатионОбсервер објект са кориснички дефинисаном функцијом повратног позива (функција је дефинисана касније у посту). Функција ће се извршити на свакој мутацији коју посматра МутатионОбсервер.
Креирајте цонфиг објекат да одредите врсту мутација које ће посматрати МутатионОбсервер.
Бинд тхе МутатионОбсервер до циља, што је "мсг" див у нашем примеру.

(фунцтион стартОбсерватион () вар / * 1) Креирајте МутатионОбсервер објекат * / обсервер = нев МутатионОбсервер (функција (мутације) мутатионОбсерверЦаллбацк (мутације);), / * 2) Креирајте цонфиг објект * / цонфиг = цхилдЛист: истина; / * 3) Глуе'ем алл * / обсервер.обсерве (мсг, цонфиг); ) ();

Испод је листа својстава за цонфиг објекат који идентификује различите врсте мутација. Пошто се у нашем примеру бавимо само дечијим текстуалним чвором креираним за текст поруке, користили смо цхилдЛист својство.

Примијећене врсте мутација

Својство	Када је подешено на `истина`
цхилдЛист	Уочено је убацивање и уклањање дечјих чворова мете.
атрибути	Проматрају се промјене у атрибутима мете.
цхарацтерДата	Проматрају се промјене података о мети.

Сада, на ону повратну функцију која се извршава на свакој посматраној мутацији.

функција мутатионОбсерверЦаллбацк (мутације) / * Ухватите прву мутацију * / вар мутатионРецорд = мутације [0]; / * Ако је додан дечији чвор, сакријте поруку након 2с * / иф (мутатионРецорд.аддедНодес [0]! == ундефинед) сетТимеоут (хидеМсг, 2000);  фунцтион хидеМсг () мсг.тектЦонтент = "; мсг.стиле.бацкгроунд = 'ноне';

Пошто додајемо само поруку див, само ћемо ухватити прву мутацију која је уочена на њој и проверити да ли је уметнут текстуални чвор. Ако се деси више од једне промене, можемо само да прођемо кроз мутације арраи.

Свака мутација у мутације поље је представљено објектом МутатионРецорд са следећим својствима.

Пропертиес оф МутатионРецорд

Својство	Ретурнс
аддедНодес	Додаје се празан низ или низ чворова.
аттрибутеНаме	Нулл или име атрибута који је додат, уклоњен или промењен.
аттрибутеНамеспаце	Нулл или именски простор атрибута који је додан, уклоњен или промењен.
нектСиблинг	Нула или следећи брат од чвора који је додат или уклоњен.
олдВалуе	Нулл или претходна вредност атрибута или података је промењена.
превиоусСиблинг	Нула или претходни брат од чвора који је додан или уклоњен.
ремоведНодес	Празан низ или низ чворова који су уклоњени.
таргет	Чвор циљан од стране `МутатионОбсервер`
тип	Врста проматране мутације.

И то је то. само морамо да ставимо код заједно за последњи корак.

Бровсер Суппорт

СЛИКА: Могу ли користити. 19. јун 2015. \ т

Референце

“В3Ц ДОМ4 Мутатион Обсервер.” В3Ц. Веб. 19. јун 2015. \ т
“МутатионОбсервер.” Мозилла Девелопер Нетворк. Веб. 19. јун 2015. \ т.