DOM Node Changes के लिए MutationObserver API का उपयोग कैसे करें

यहाँ एक परिदृश्य है: रीता, एक पत्रिका लेखक ऑनलाइन के एक लेख का संपादन कर रही है। वह अपने परिवर्तनों को सहेजती है, और संदेश देखती है “बदलाव सुरक्षित किया गया!” बस फिर, वह एक टाइपो नोटिस किया वह याद किया। वह इसे ठीक करती है और क्लिक करने वाली है “बचाना”, जब उसे अपने बॉस से गुस्से में फोन आता है.

कॉल खत्म होने के बाद, वह स्क्रीन पर वापस जाती है, देखती है “बदलाव सुरक्षित किया गया!” कार्यालय के बाहर उसके कंप्यूटर और तूफान बंद.

कहानी कहने के लिए मेरी अयोग्यता के अलावा, हमने उस छोटे परिदृश्य से देखा कि किस समस्या ने लगातार संदेश काढ़ा। इसलिए, भविष्य में हम इसे संभव होने से बचने का निर्णय लेते हैं और एक का उपयोग करते हैं जो या तो उपयोगकर्ता को इसे क्लिक करके स्वीकार करने का संकेत देता है - या अपने आप गायब हो जाता है. त्वरित संदेशों के लिए दूसरे का उपयोग करना एक अच्छा विचार है.

हम पहले से ही जानते हैं कि किसी पृष्ठ से एक तत्व कैसे गायब किया जाए, ताकि कोई समस्या न हो। हमें जो जानना है वह है यह कब दिखाई दिया? तो हम इसे एक प्रशंसनीय समय के बाद गायब कर सकते हैं.

MutationObserver एपीआई

कुल मिलाकर, जब एक DOM तत्व (एक संदेश की तरह) div) या कोई अन्य नोड परिवर्तन, हमें यह जानने में सक्षम होना चाहिए। देशी एपीआई की कमी के कारण लंबे समय तक डेवलपर्स को हैक और फ्रेमवर्क पर निर्भर रहना पड़ता था। लेकिन वह बदल गया था.

अब हमारे पास है MutationObserver (पहले म्यूटेशन इवेंट्स). MutationObserver गुणों और विधियों के एक सेट के साथ एक जावास्क्रिप्ट देशी वस्तु है। यह हमें देता है किसी भी नोड पर परिवर्तन देखें जैसे कि DOM एलिमेंट, डॉक्यूमेंट, टेक्स्ट आदि, म्यूटेशन द्वारा, हमारा मतलब है एक नोड के अलावा या हटाने और नोड की विशेषता और डेटा में परिवर्तन.

आइए बेहतर समझ के लिए एक उदाहरण देखें। हम पहले एक सेट अप करेंगे जहां एक बटन पर क्लिक करने पर एक संदेश दिखाई देता है, जैसे कि रीटा ने देखा। फिर ठीक उस संदेश बॉक्स में एक उत्परिवर्तन पर्यवेक्षक बनाएं और लिंक करें तथा संदेश छिपाने के लिए ऑटो को लॉजिक कोड करें. सामान्य बुद्धि?

ध्यान दें: आप किसी बिंदु पर हो सकते हैं या मुझसे पहले ही आपके सिर में पूछ सकते हैं “सिर्फ बटन पर क्लिक करके संदेश को जावास्क्रिप्ट में ही क्यों छिपाएं?” मेरे उदाहरण में, मैं सर्वर के साथ काम नहीं कर रहा हूं, इसलिए निश्चित रूप से क्लाइंट संदेश दिखाने के लिए जिम्मेदार है और इसे आसानी से छिपा भी सकता है। लेकिन रीटा के एडिटिंग टूल की तरह यदि सर्वर वह है जो DOM कंटेंट को बदलने का निर्णय लेता है, तो क्लाइंट केवल अलर्ट रह सकता है और प्रतीक्षा कर सकता है.

सबसे पहले, हम बटन क्लिक पर संदेश दिखाने के लिए सेटअप बनाते हैं.

 संदेश दिखाओ

var msg = document.querySelector ('# msg'), SUCCESSMSG = "परिवर्तन सहेजा गया है!" / * बटन जोड़ें क्लिक करें घटना * / दस्तावेज .querySelector ('बटन') .addventventListener ('क्लिक', showMsg); function showMsg () msg.textContent = SUCCESSMSG; msg.style.background = 'teal';  

एक बार जब हमें प्रारंभिक सेटअप चालू हो जाता है, तो निम्नलिखित कार्य करते हैं;

• बनाओ MutationObserver उपयोगकर्ता-परिभाषित कॉलबैक फ़ंक्शन के साथ ऑब्जेक्ट (फ़ंक्शन पोस्ट में बाद में परिभाषित किया गया है)। फ़ंक्शन द्वारा देखे गए प्रत्येक म्यूटेशन पर कार्य करेगा MutationObserver.
• द्वारा देखे जाने वाले प्रकार के उत्परिवर्तन को निर्दिष्ट करने के लिए एक कॉन्फिग ऑब्जेक्ट बनाएं MutationObserver.
• बाँधो MutationObserver लक्ष्य के लिए, जो 'संदेश' है div हमारे उदाहरण में.

(function startObservation () var / * 1) एक MutationObserver ऑब्जेक्ट बनाएं * / ऑब्जर्वर = नया MutationObserver (फ़ंक्शन (म्यूटेशन)) mutationObserverCallback (म्यूटेशन);), / * 2) एक config ऑब्जेक्ट बनाएं * / config = childList: सच; / * 3) Glue'em all * / observer.observe (msg, config); ) (); 

नीचे गुणों की एक सूची दी गई है config विभिन्न प्रकार के उत्परिवर्तन की पहचान करने वाली वस्तु। चूंकि हमारे उदाहरण में हम केवल संदेश पाठ के लिए बनाए गए एक बाल पाठ नोड से निपटते हैं, हमने इसका उपयोग किया है childList संपत्ति.

म्यूटेशन के प्रकार मनाया

अब, उस कॉलबैक फ़ंक्शन पर, जिसे प्रत्येक देखे गए म्यूटेशन पर निष्पादित किया जाता है.

function mutationObserverCallback (म्यूटेशन) / * पहले म्यूटेशन को पकड़ो * / var म्यूटेशनरकार्ड = म्यूटेशन [0]; / * यदि एक बच्चा नोड जोड़ा गया था, तो 2s * के बाद msg छिपाएं * / (mutationRecord.addedNad [0]! == अपरिभाषित) setTimeout (HideMsg, 2000);  function hideMsg () msg.textContent = "; msg.style.background = 'none'; 

चूंकि हम केवल एक संदेश जोड़ रहे हैं div, हम केवल उस पर देखे गए पहले म्यूटेशन को पकड़ लेंगे और जांच लेंगे कि क्या टेक्स्ट नोड डाला गया था। अगर हमें एक से अधिक परिवर्तन हो रहे हैं, तो हम बस के माध्यम से लूप कर सकते हैं म्यूटेशन सरणी.

में हर म्यूटेशन म्यूटेशन सरणी का प्रतिनिधित्व वस्तु द्वारा किया जाता है MutationRecord निम्नलिखित गुणों के साथ.

के गुण MutationRecord

और बस। हमें बस अंतिम चरण के लिए कोड को एक साथ रखना है.

ब्राउज़र का समर्थन

संदर्भ

• “W3C DOM4 म्यूटेशन ऑब्जर्वर.” W3C। वेब। 19 जून 2015
• “MutationObserver.” मोज़िला डेवलपर नेटवर्क। वेब। 19 जून 2015.