{"id":731,"date":"2024-02-23T07:02:04","date_gmt":"2024-02-23T07:02:04","guid":{"rendered":"https:\/\/webdevs.blog\/pl\/?p=731"},"modified":"2026-02-20T07:28:07","modified_gmt":"2026-02-20T07:28:07","slug":"wzorzec-obserwatora-w-javascripcie","status":"publish","type":"post","link":"https:\/\/webdevs.blog\/pl\/wzorzec-obserwatora-w-javascripcie\/","title":{"rendered":"Wzorzec obserwatora w Javascripcie"},"content":{"rendered":"\n
\"\"<\/figure>\n\n\n\n

Wzorzec obserwatora jest bardzo prosty. W swoim za\u0142o\u017ceniu polega na tym, \u017ce jeden obiekt powiadamia inne obiekty o swojej zmianie. W JavaScript istniej\u0105 predefiniowane observators, kt\u00f3re u\u0142atwiaj\u0105 \u017cycie programistom.<\/p>\n\n\n\n

MutationObserver<\/h2>\n\n\n\n

Pozwala na \u015bledzenie zmian, takich jak zmiana atrybut\u00f3w czy dodanie nowego w\u0119z\u0142a w strukturze DOM.<\/p>\n\n\n\n

Konstruktor klasy MutationObserver<\/a><\/strong> przyjmuje jako parametr callback. Callback z kolei otrzyma tablic\u0119 z obiektami MutationRecord<\/a><\/strong> oraz jako drugi parametr instancj\u0119 MutationObserver.<\/p>\n\n\n\n

Aby rozpocz\u0105\u0107 obserwacj\u0119, nale\u017cy wywo\u0142a\u0107 metod\u0119 observe, kt\u00f3ra jako argumenty przyjmuje Node<\/a> (np. HTMLElement) oraz konfiguracj\u0119<\/a>.<\/p>\n\n\n\n

Przyk\u0142ad<\/h3>\n\n\n\n

Za\u0142\u00f3\u017cmy, \u017ce mamy pole tekstowe i chcemy zlicza\u0107 ilo\u015b\u0107 znak\u00f3w.<\/p>\n\n\n

function<\/span> mutationObserverCallback<\/span>(mutations<\/span>) <\/span>{\n  mutations.forEach((mutation<\/span>) =><\/span> {\n    if<\/span> (mutation.type === 'characterData'<\/span>) {\n      updateCounter(mutation.target.value.length);\n    }\n  });\n}\n\nfunction<\/span> updateCounter<\/span>(length<\/span>) <\/span>{\n  document<\/span>.getElementById('char-counter'<\/span>)?.innerText = length;\n}\n\nconst<\/span> observeConfig = {\n  characterData<\/span>: true<\/span>,\n};\n\n(new<\/span> MutationObserver(mutationObserverCallback))\n  .observe(document<\/span>.getElementById('text-area'<\/span>), observeConfig);\n\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
Przy wprowadzaniu tekstu do textarea<\/code> za ka\u017cdym razem b\u0119dzie aktualizowana warto\u015b\u0107 w elemencie #char-counter<\/code>.<\/p>\n\n\n\n
IntersectionObserver<\/h2>\n\n\n\n
Sta\u0142ym problemem we frontend developmencie od zawsze by\u0142o ustalenie, czy dany element jest widoczny w obszarze u\u017cytkownika, czy nie. Stara szko\u0142a uczy\u0142a, aby nas\u0142uchiwa\u0107 zdarzenia scroll<\/code>, a nast\u0119pnie ustala\u0107 przesuni\u0119cie elementu wzgl\u0119dem g\u00f3ry dokumentu i przesuni\u0119cia. By\u0142o to obci\u0105\u017caj\u0105ce zadanie, zw\u0142aszcza gdy musieli\u015bmy \u015bledzi\u0107 wiele takich element\u00f3w w ogromnej strukturze DOM. Ten problem rozwi\u0105zuje IntersectionObserver<\/a><\/strong>.<\/p>\n\n\n\n
Podobnie jak inne interfejsy, konstruktor IntersectionObserver przyjmuje Callback, kt\u00f3ry reaguje na zmiany oraz konfiguracj\u0119<\/a><\/strong>. Callback przyjmuje tablic\u0119 IntersectionObserverEntry<\/a><\/strong> oraz instancj\u0119 obserwatora.<\/p>\n\n\n\n
Do uruchomienia obserwacji s\u0142u\u017cy metoda observe<\/strong>, kt\u00f3ra jako argument przyjmuje obiekt dziedzicz\u0105cy po Element<\/a>.<\/p>\n\n\n\n
Przyk\u0142ad<\/h3>\n\n\n\n
Za\u0142\u00f3\u017cmy, \u017ce chcemy wykrywa\u0107 elementy .ad<\/code>, w kt\u00f3rych wyst\u0119puj\u0105 reklamy.<\/p>\n\n\n
function<\/span> itersectionObserverCallback<\/span>(entries<\/span>) <\/span>{\n  entries.forEach(entry<\/span> =><\/span> {\n    if<\/span> (entry.isIntersecting) {\n      console<\/span>.log('Element jest widoczny'<\/span>);\n    } else<\/span> {\n      console<\/span>.log('Element jest poza obszarem widzenia'<\/span>);\n    }\n  });\n}\n\n\/\/ konfiguracja domy\u015blna<\/span>\nconst<\/span> observer = new<\/span> IntersectionObserver(itersectionObserverCallback);\n\ndocument<\/span>.querySelectorAll('.ad'<\/span>).forEach(element<\/span> =><\/span> observer.observe(element));<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
Kod wybierze wszystkie elementy z klas\u0105 .ad<\/code> i zacznie je obserwowa\u0107. Gdy znikn\u0105 lub pojawi\u0105 si\u0119 na ekranie, w konsoli zostanie zalogowany odpowiedni komunikat. <\/p>\n\n\n\n
ResizeObserver<\/h2>\n\n\n\n
Ostatnim prezentowanym dzisiaj obserwatorem jest ResizeObserver<\/a><\/strong> i s\u0142u\u017cy do obserwowania rozmiaru elementu. Chocia\u017c wi\u0119kszo\u015b\u0107 zada\u0144 zwi\u0105zanych z rozmiarem mo\u017cna wykona\u0107 za pomoc\u0105 media query<\/code>, czasem istniej\u0105 specyficzne przypadki, kiedy ResizeObserver znajdzie zastosowanie.<\/p>\n\n\n\n
Konstruktor jako parametr otrzymuje Callback, kt\u00f3ry przyjmuje dwa argumenty: tablic\u0119 z ResizeObserverEntry<\/a><\/strong> oraz instancj\u0119 obserwatora.<\/p>\n\n\n\n
Do zainicjowania obserwacji s\u0142u\u017cy metoda observe<\/strong>, kt\u00f3ra jako argument przyjmuje obiekt dziedzicz\u0105cy po Element<\/a> oraz konfiguracj\u0119<\/a>. W chwili pisania tego artyku\u0142u, konfiguracja ma tylko jedn\u0105 w\u0142a\u015bciwo\u015b\u0107 box <\/strong>z mo\u017cliwymi parametrami: border-box, content-box, device-pixel-content-box<\/code>.<\/p>\n\n\n\n
Przyk\u0142ad<\/h3>\n\n\n\n
Za\u0142\u00f3\u017cmy, \u017ce na stronie znajduj\u0105 si\u0119 reklamy, kt\u00f3re s\u0105 pobierane dynamicznie. Zanim zostan\u0105 pobrane i wy\u015bwietlany jest obraz zast\u0119pczy. Chcemy dynamicznie zamienia\u0107 obraz zast\u0119pczy z prawdziw\u0105 reklam\u0105.<\/p>\n\n\n
function<\/span> resizeObserverCallback<\/span>(entries, observer<\/span>) <\/span>{\n  entries.forEach(entry<\/span> =><\/span> {\n    if<\/span> (entry.contentRect.height > 20<\/span>) {\n      entry.target.nextElementSibling.remove();\n      observer.unsubscribe(entry.target);\n    }\n  });\n}\n\nconst<\/span> observer = new<\/span> ResizeObserver(resizeObserverCallback);\n\ndocument<\/span>.querySelectorAll('.ad'<\/span>).forEach(element<\/span> =><\/span> observer.observe(element));<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n

Je\u015bli reklama b\u0119dzie mia\u0142a wysoko\u015b\u0107 wi\u0119ksz\u0105 ni\u017c 20px<\/code>, wtedy zostanie usuni\u0119ty element wyst\u0119puj\u0105cy po nim. W naszym przyk\u0142adzie jest to domy\u015blna reklama. Zadbali\u015bmy r\u00f3wnie\u017c o zaprzestanie obserwacji na elemencie .ad<\/code>, gdy reklama zostanie wy\u015bwietlona.<\/p>\n\n\n\n
Podsumowanie<\/h2>\n\n\n\n
Observators w JavaScript to pot\u0119\u017cne narz\u0119dzia, kt\u00f3re pozwalaj\u0105 wprowadzi\u0107 jeszcze lepsz\u0105 interakcj\u0119 z stron\u0105 internetow\u0105. Jednak niew\u0142a\u015bciwe lub nadmierne ich stosowanie mo\u017ce pogorszy\u0107 wydajno\u015b\u0107. Dlatego powinny by\u0107 stosowane z ostro\u017cno\u015bci\u0105, a konfiguracja powinna by\u0107 dostosowana do wymaga\u0144.<\/p>\n","protected":false},"excerpt":{"rendered":"
Istnieje kilka interfejs\u00f3w w JS do obserwacji element\u00f3w. W tym artykule troch\u0119 si\u0119 im przyjrzymy.<\/p>\n","protected":false},"author":17,"featured_media":737,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[10,4],"tags":[89,58,36,35],"class_list":["post-731","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-js","category-web-development","tag-it","tag-js","tag-web-development","tag-wordpress"],"_links":{"self":[{"href":"https:\/\/webdevs.blog\/pl\/wp-json\/wp\/v2\/posts\/731","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/webdevs.blog\/pl\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/webdevs.blog\/pl\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/webdevs.blog\/pl\/wp-json\/wp\/v2\/users\/17"}],"replies":[{"embeddable":true,"href":"https:\/\/webdevs.blog\/pl\/wp-json\/wp\/v2\/comments?post=731"}],"version-history":[{"count":9,"href":"https:\/\/webdevs.blog\/pl\/wp-json\/wp\/v2\/posts\/731\/revisions"}],"predecessor-version":[{"id":762,"href":"https:\/\/webdevs.blog\/pl\/wp-json\/wp\/v2\/posts\/731\/revisions\/762"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/webdevs.blog\/pl\/wp-json\/wp\/v2\/media\/737"}],"wp:attachment":[{"href":"https:\/\/webdevs.blog\/pl\/wp-json\/wp\/v2\/media?parent=731"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webdevs.blog\/pl\/wp-json\/wp\/v2\/categories?post=731"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webdevs.blog\/pl\/wp-json\/wp\/v2\/tags?post=731"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}