🤚🏽 🌊 👩‍🍳 हम जावास्क्रिप्ट में प्रतिनिधिमंडल के बारे में भूल गए। प्रतिक्रिया में इवेंट प्रतिनिधिमंडल 👍 👒 🕞

सभी को नमस्कार। यह लेख जावास्क्रिप्ट में इवेंट डेलिगेशन और रिएक्शन.जेएस में इसके कार्यान्वयन के बारे में है।

यह वास्तव में क्या है? क्यों और क्यों?

आरंभ करने के लिए, आइए संक्षेप में चर्चा करें:

क्या घटना है;
वितरण कैसे होता है;
जावास्क्रिप्ट में एक उदाहरण के साथ डोम स्तर 2 प्रसंस्करण;

और अंत में: क्यों प्रतिक्रिया में प्रतिनिधिमंडल के बारे में मत भूलना।

घटना

जावास्क्रिप्ट और HTML घटनाओं के माध्यम से एक दूसरे के साथ बातचीत करते हैं। प्रत्येक घटना जावास्क्रिप्ट को यह बताने के लिए कार्य करती है कि दस्तावेज़ या ब्राउज़र विंडो में कुछ हुआ है। इन घटनाओं को पकड़ने के लिए, हमें श्रोताओं (श्रोताओं) की आवश्यकता होती है, ऐसे हैंडलर जो किसी घटना की स्थिति में ट्रिगर होते हैं।

घटना का प्रचार

आदेश। समस्या का हल: यह समझना कि घटना के किस भाग में पेज किस हिस्से से संबंधित है? दो तरीकों को लागू किया गया था: इंटरनेट एक्सप्लोरर में, "ईवेंट बुदबुदाहट," और नेटस्केप कम्युनिकेटर में, "ईवेंट हुकिंग।"

घटना बुदबुदाई

इस मामले में, घटना को दस्तावेज़ के पेड़ में सबसे गहरी नोड पर ट्रिगर किया जाता है, जिसके बाद यह पदानुक्रम के माध्यम से खिड़की पर ही उगता है।

<!DOCTYPE html> <html> <head> <title>Some title</title> </head> <body> <div id="myDiv">Click Me</div> </body> </html>

इस मामले में निम्नलिखित आदेश होंगे:

div तत्व
शरीर का तत्व
html तत्व
दस्तावेज़
खिड़की

अब सर्फिंग को सभी आधुनिक ब्राउज़रों द्वारा समर्थित किया गया है, भले ही यह अलग-अलग कार्यान्वयन के साथ हो।

घटना अवरोधन के मामले में, विपरीत सच है:

खिड़की
दस्तावेज़
html तत्व
शरीर का तत्व
div तत्व

यह सोचा गया था कि लक्ष्य तत्व तक पहुंचने से पहले घटना को संसाधित किया जा सकता है (जैसा कि नेटस्केप में तय किया गया था बाद में सभी आधुनिक ब्राउज़रों द्वारा उठाया गया)।

परिणामस्वरूप, हमारे पास DOM इवेंट वितरित करने के लिए निम्न संरचना है:

खिड़की
दस्तावेज़
html तत्व
शरीर तत्व // अवरोधन चरण समाप्त होता है
div एलिमेंट // लक्ष्य चरण
शरीर तत्व // चढ़ाई का चरण शुरू होता है
html तत्व
दस्तावेज़
खिड़की

इस योजना को तीन चरणों में विभाजित किया गया है: इंटरसेप्शन चरण - ईवेंट को तत्व, टारगेट फेज - टारगेट एलिमेंट और एसेंट फेज द्वारा प्रोसेस करने से पहले ईवेंट के जवाब में कोई भी अंतिम क्रिया करने के लिए इंटरसेप्ट किया जा सकता है।

इसलिए, हम ईवेंट प्रोसेसिंग की ओर रुख करते हैं

आइए जावास्क्रिप्ट में ईवेंट हैंडलिंग का एक विशिष्ट उदाहरण देखें।

 const btn = document.getElementById('myDiv') btn.addEventListener("click", handler) // some code btn.removeEventListener("click", handler)

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

लेकिन हम कोडर्स के बाहर g * नहीं हैं। चलो सब कुछ कैनन के अनुसार करते हैं:

 var EventUtil = { addHandler: function (elem, type, handler) { if (elem.addEventListener) { elem.addEventListener(type, handler, false) } else if (elem.attachEvent) { elem.attachEvent("on" + type, handler) } else { elem["on" = type] = hendler } }, removeHandler: function (elem, type, handler) { if (elem.removeEventListener) { elem.removeEventListener(type, handler, false) } else if (elem.detachEvent) { elem.detachEvent("on" + type, handler) } else { elem["on" = type] = null } } }

इतना अच्छा, लेकिन घटना वस्तु के बारे में क्या? आखिरकार, IE में .target .srcElement, preventDefault नहीं है? कोई वापसी नहीं = झूठी। लेकिन कुछ तरीकों को जोड़ने के लिए कुछ भी नहीं है:

 var EventUtil = { addHandler: function (elem, type, handler) { if (elem.addEventListener) { elem.addEventListener(type, handler, false) } else if (elem.attachEvent) { elem.attachEvent("on" + type, handler) } else { elem["on" = type] = hendler } }, getEvent: function (event) { return event ? event : window.event }, getTarget: function (event) { return event.target || event.srcElement }, preventDefault: function (event) { if (event.preventDefault) { event.preventDefault() } else { event.returnValue = false } }, removeHandler: function (elem, type, handler) { if (elem.removeEventListener) { elem.removeEventListener(type, handler, false) } else if (elem.detachEvent) { elem.detachEvent("on" + type, handler) } else { elem["on" = type] = null } }, stopPropagation: function (event) { if (event.stopPropagation) { event.stopPropagation() } else { event.cancelBubble = true } } }

आदि आदि और ये सभी नृत्य हैं।

खैर हम अच्छी तरह से कर रहे हैं, हमने सभी समस्याओं को हल किया, सब कुछ ठीक है सच है, कोड बल्कि बोझिल बाहर आया था। अब कल्पना करें कि हमें कई तत्वों के लिए बहुत अधिक सदस्यता की आवश्यकता है। वाह, यह कोड की कुछ लाइनें ले जाएगा। एक उदाहरण:

 <ul> <li id="id1">go somewhere</li> <li id="id2">do something</li> <li id="some-next-id">next</li> </ul> var item1 = document.getElementById('id1') var item2 = document.getElementById('id2') var itemNext = document.getElementById('some-next-id') EventUtil.addHandler(item1, "click", someHandle) EventUtil.addHandler(item2, "click", someHandle2) EventUtil.addHandler(itemNext, "click", someHandle3)

और इसलिए प्रत्येक तत्व के लिए, और हमें हटाना नहीं चाहिए, लक्ष्य और पसंद के साथ काम करना चाहिए

और यहाँ घटना प्रतिनिधिमंडल हमारी सहायता के लिए आता है।

हमें केवल एक ही हैंडलर को DOM ट्री में उच्चतम बिंदु से जोड़ना है:

 <ul id="main-id"> //  id    <li id="id1">go somewhere</li> <li id="id2">do something</li> <li id="some-next-id">next</li> </ul> var list = document.getElementById('main-id') EventUtil.addHandler(list, "click", function(event) { event = EventUtil.getEvent(event) var target = EventUtil.getTarget(event) switch(target.id) { case "id1": //  -    id1 break case "id2": //  -    id1 break case "some-next-id": //  -    break } })

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

अब रिएक्ट का क्या

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

सब ठीक है।

फिर भी, एक अतिरिक्त हैंडलर एक अतिरिक्त हैंडलर है। मैं कई बार मिला, और मुझे खुद पर पश्चाताप हुआ, मैंने इस तरह का कोड लिखा था:

 class Example extends React.Component { handleClick () { console.log('click') } render () { return ( <div> {new Array(20).fill().map((_, index) => <div key={index} // elem.id id={index} // elem.id onClick={() => console.log('click')} /> )} </div> ) } }

उदाहरण मामले को दिखाता है जब तत्वों की एन-संख्या के साथ कुछ प्रकार की शीट होती है, और इसलिए हैंडलर के पंजीकरण की एन-संख्या के साथ।

चलो, पृष्ठ पर जाएं और जांचें कि कितने हैंडलर अभी कार्रवाई में हैं। इसके लिए मुझे एक अच्छी स्क्रिप्ट मिली:

 Array.from(document.querySelectorAll('*')) .reduce(function(pre, dom){ var clks = getEventListeners(dom).click; pre += clks ? clks.length || 0 : 0; return pre }, 0)

क्रोम देव-उपकरण में काम करता है।

और अब हम यह सब अभिभावक डिव और चीयर्स को सौंपते हैं, हमने सिर्फ हमारे आवेदन n = array.length समय को अनुकूलित किया है। नीचे उदाहरण कोड:

 class Example extends React.Component { constructor () { super() this.state = { useElem: 0 } } handleClick (elem) { var id = elem.target.id this.setState({ useElem: id }) } render () { return ( <div onClick={this.handleClick}> {new Array(20).fill().map((_, index) => <div key={index} // elem.id id={index} // elem.id useElem={index === this.state.useElem} /> )} </div> ) } }

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

यह लेख पेशेवर वेब डेवलपर्स के लिए एक जावास्क्रिप्ट पुस्तक पर आधारित है, जिसे निकोलस ज़कस द्वारा लिखा गया है।

आपका ध्यान देने के लिए बहुत-बहुत धन्यवाद। यदि आपके पास कुछ साझा करने या किसी तरह की खामी खोजने के लिए है, तो शायद कोई गलती हो या बस एक सवाल हो, तो टिप्पणियों में लिखें। मैं किसी भी प्रतिक्रिया के लिए खुशी होगी!

हम जावास्क्रिप्ट में प्रतिनिधिमंडल के बारे में भूल गए। प्रतिक्रिया में इवेंट प्रतिनिधिमंडल