DOM değişikliklerini Javascript Web API, Mutation Observer adlı kişiyle dinleme (ipucu: En iyi uygulama)

“MutationObserver”, DOM'daki değişiklikleri tespit etmek için modern tarayıcılar tarafından sağlanan bir Web API'sidir. Bu API'yi kullanarak DOM'daki değişiklikleri, eklenen veya kaldırılan düğümler gibi dinleyebilir, metin düğümlerinin metin içeriğindeki değişiklikleri veya değişiklikleri öznitelikle değiştirebilir ve değişiklikler yapabilirsiniz.

Web uygulamaları bugünlerde müşteri tarafında karmaşıklaşıyor. DOM değişikliklerini dinleyerek çok şey yapmanız gerekiyor. Örneğin, bir DOM değişikliğinden kullanıcıya gerçek zamanlı bir bildirim göndermek istiyorsunuz veya farklı bir değişiklik için farklı davranışa sahip bir JS çerçevesi kullanıyorsunuz ya da JS eklentisinin dönüş değerini temel alan bir şey yapmalısınız. .

SetInterval API ile “Polling”, Mutation Observer'ın birkaç alternatifinden biridir. “Mutasyon Gözlemcisi” nin ne yaptığını gerçekten daha iyi anlamak için bir göz atalım.

index.html

months.js

addMonth, 2 saniye sonra nameOfMonth dizisinden bir ayın veya sayının rastgele adını döndüren basit bir işlevdir.

Ondan sonra bir yoklama işlevi ekleyelim.

DOM Değişikliğini yazdırmak için, DOM'de herhangi bir değişiklik olup olmadığını kontrol ettikten sonra her saniyede bir kontrol etmesi ve bir kontrolün ardından outerHTML'den yazdırması gerekir. Değişikliği aldıktan sonra Aralığı temizleyin. setInterval WebAPI, değişiklik olup olmadığını periyodik olarak kontrol edecek bir görev ayarlayabilir. Doğal olarak, bu yöntem web uygulaması / web sitesi performansını önemli ölçüde düşürür.

MutationObserver Uygulaması:

MutationObserver'ın uygulamaya uygulanması oldukça kolaydır. Bir mutasyon gerçekleştiğinde her seferinde çağrılacak bir işlevi ileterek bir MutationObserver örneği oluşturmanız gerekir. Ve en iyisi, bu harika bir performans. Neredeyse tüm tarayıcılar onu destekliyor. MutationObserver uygulamasıyla önceki kodun nasıl yapılabileceği koduna geçelim.

Yoklama işlevini eklemek yerine, addMonth işlevinden sonra MutationObserver'ı kullanabiliriz.

Burada yaptığımız şey, DOM'a mutation.addedNodes.length tarafından herhangi bir düğüm eklenip eklenmediğini kontrol ettik. Doğruysa, eklenen Düğümü kaydediyoruz.

Oluşturulan nesnenin üç yöntemi vardır:

  • gözlemlemek - değişiklikleri dinlemeye başlar. İki argüman alır - gözlemlemek istediğiniz DOM düğümü ve bir ayar nesnesi
  • bağlantıyı kes - değişiklikleri dinlemeyi durdurur
  • takeRecords - geri arama başlatılmadan önceki son değişiklik grubunu döndürür.

Aşağıdaki kod parçası, gözlemlemeye nasıl başlanacağını gösterir:

Tam kod:

ChildList'i eklemekten başka, childList'in kaldırılmasını ve öznitelikler, alt ağaç vb. Gibi çok daha fazlasını dinlemeyi de dinleyebilir. Aşağıdaki kod bloğunu kontrol edin.

Tüm bunlarMutationObserver ile ilgili. Oylama ya da diğer çözümler üzerinde bir çok avantaj sunar. Gruplardaki değişiklikleri başlattıkça daha da optimize edilmiştir. Bunun üzerine, MutationObserver tüm modern tarayıcılar ve başlık altında MutationEvents kullanan birkaç polyfil ile desteklenir. MutationObserver API güçlü, bilgilendirici ve sonuçta hack ücretsizdir.

Asenkron JavaScript'i ayrıntılı olarak öğrenin (geri arama, söz, üretici ve zaman uyumsuz bekleme)

Aşağıdaki makaleden JS kancaları React hakkında bilgi edinin.

Hepsi bugün için :)