🌗 ◽️ 👨🏾‍🎤 DOM MutationObserver - ब्राउज़र के प्रदर्शन को मारे बिना DOM को बदलने के लिए प्रतिक्रिया 🕘 ☹️ 🕝

एक समय में DOM म्यूटेशन इवेंट एक महान विचार की तरह लग रहा था - वेब डेवलपर्स ने अधिक गतिशील एप्लिकेशन बनाना शुरू कर दिया, और जिसके साथ DOM को सुनने और उनके जवाब देने के नए अवसरों का आनंद स्वाभाविक लग रहा था। व्यवहार में, हालांकि, यह पता चला है कि DOM म्यूटेशन इवेंट्स को प्रदर्शन और स्थिरता के साथ गंभीर समस्याएं हैं। आश्चर्य नहीं कि एक साल बाद विनिर्देश को "अप्रचलित" का दर्जा मिला।

लेकिन DOM म्यूटेशन इवेंट्स के पीछे बहुत विचार आकर्षक लग रहा था, और इसलिए सितंबर 2011 में Google और मोज़िला इंजीनियरों के एक समूह ने DOM MutationObserver के लिए समान कार्यक्षमता लेकिन बेहतर प्रदर्शन के साथ एक प्रस्ताव पेश किया। यह नया DOM-API संस्करणों से शुरू होने वाला है: Firefox 14, Chrome 18, IE 11, Safari 6 (अन्य ब्राउज़र - caniuse.com/mutationobserver )

सरलतम मामले में, MutationObserver का उपयोग कुछ इस तरह से किया जाता है:

//   var target = document.querySelector('#some-id'); //    var observer = new MutationObserver(function(mutations) { mutations.forEach(function(mutation) { console.log(mutation.type); }); }); //   var config = { attributes: true, childList: true, characterData: true } //       observer.observe(target, config); //     observer.disconnect();

विरासत डोम उत्परिवर्तन घटनाओं पर नए विनिर्देशन का एक प्रमुख लाभ इसकी दक्षता है। DOM नोड का अवलोकन करते समय, जब तक DOM परिवर्तन पूर्ण नहीं हो जाते, तब तक आपका कॉलबैक फ़ंक्शन काम नहीं करेगा। जब कॉलबैक काम करता है, तो DOM परिवर्तनों की अंतिम सूची उसे भेजी जाएगी, जिसके चलने से परिवर्तनों के बारे में किसी भी तरह से प्रतिक्रिया संभव होगी।

यह भी माना जाता है कि कोड को किसी भी तरह से पर्यवेक्षक द्वारा प्रेषित परिणामों को संसाधित करने की आवश्यकता होगी ताकि हम उन परिवर्तनों के लिए विशेष रूप से प्रतिक्रिया कर सकें। यहाँ एक प्रेक्षक का एक छोटा सा उदाहरण है जो एक स्थान पर क्रमबद्ध सूची में परिवर्तन के लिए सुन रहा है:

 <!DOCTYPE html> <ol contenteditable oninput=""> <li>Press enter</li> </ol> <script> var MutationObserver = window.MutationObserver || window.WebKitMutationObserver || window.MozMutationObserver; var list = document.querySelector('ol'); var observer = new MutationObserver(function(mutations) { mutations.forEach(function(mutation) { if (mutation.type === 'childList') { var list_values = [].slice.call(list.children) .map( function(node) { return node.innerHTML; }) .filter( function(s) { if (s === '<br>') { return false; } else { return true; } }); console.log(list_values); } }); }); observer.observe(list, { attributes: true, childList: true, characterData: true }); </script>

ताकि आप कोड को कार्रवाई में देख सकें, मैंने इसे jsbin पर पोस्ट किया:

jsbin.com/ivamoh/53/edit

यदि आप सैंडबॉक्स में कोड के साथ खेलते हैं, तो आपने संभवतः एक विशेषता पर ध्यान दिया है: कॉलबैक फ़ंक्शन केवल तब काम करता है जब आप सूची के किसी भी तत्व पर "दर्ज करें" दबाते हैं - संक्षेप में, यह इसलिए है क्योंकि आपके कार्यों का नेतृत्व होता है DOM नोड जोड़ें या निकालें। यह अन्य तकनीकों, जैसे किस्ट्रोक्स, या माउस क्लिक की सदस्यता से एक बड़ा अंतर है। MutationObservers इन सभी तकनीकों की तरह काम नहीं करता है - यहां, ट्रिगर केवल तब होता है जब DOM बदलता है, और JS द्वारा ट्रिगर की गई घटनाओं या उपयोगकर्ता क्रियाओं की प्रतिक्रिया के रूप में नहीं।

तो इसका उपयोग कहां करें?

मुझे नहीं लगता कि सभी प्रोग्रामर अचानक सब कुछ छोड़ देंगे, और वे अपने कोड में MutationObservers को एम्बेड करना शुरू कर देंगे। जेएस फ्रेमवर्क के डेवलपर्स के लिए यह एपीआई सबसे उपयुक्त है कि कुछ नई, या कुछ ऐसी चीजों को लागू किया जाए जो प्रदर्शन की समस्याओं के कारण पहले लागू नहीं की गई हैं। यह तकनीक तब भी उपयोगी है जब आप एक ऐसे ढांचे का उपयोग कर रहे हैं जो DOM को संशोधित करता है, और आपको इन परिवर्तनों (जैसे कि setTimeout का उपयोग किए बिना बैसाखी) का जवाब देने की आवश्यकता है। खैर, आखिरी चीज ब्राउज़र एक्सटेंशन का विकास है।

संसाधन:

W3C विनिर्देशन
राफेल वेनस्टाइन द्वारा स्क्रेनेकास्ट
उत्परिवर्तन सारांश , एक जेएस लाइब्रेरी जो MutationObserver के उपयोग को सरल करता है।
MutationObserver मोज़िला पर

अनुवादक से: सामग्री एक वर्ष से अधिक पुरानी है, लेकिन MutationObserver के बारे में रूसी में कुछ बहुत कम है - यह काम में आ सकता है।

DOM MutationObserver - ब्राउज़र के प्रदर्शन को मारे बिना DOM को बदलने के लिए प्रतिक्रिया

More articles: