कस्टम इवेंट्स एक्शन में

इस लेख में मैं आपको बताऊंगा कि मैं अपने काम में कस्टम jQuery इवेंट (कस्टम इवेंट) का उपयोग कैसे करता हूं।

घटनाओं का अनुकरण

एक सरल कार्य दिया जाता है, जिसके कार्यान्वयन को सभी खाबरोवस्क निवासियों द्वारा देखा जाता है: जब उपयोगकर्ता ने पृष्ठ को पर्याप्त रूप से नीचे स्क्रॉल किया है, तो ब्लॉक इन्सर्ट "24 घंटे में सर्वश्रेष्ठ" एनिमेटेड रूप से प्रदर्शित होता है और जब उपयोगकर्ता पृष्ठ को स्क्रॉल करता है तो छुपाता है। स्क्रॉल पर हैंडलर को निलंबित करने और एक विंडो की घटनाओं का आकार बदलने से यह समस्या हल हो जाती है, जो दो चीजों में व्यस्त है: यह ब्लॉक प्रविष्टि को दिखाने या छिपाने के लिए गणना करता है या नहीं, और परिणाम के आधार पर, एक प्रदर्शन एनीमेशन बनाता है या इसे छुपाता है।

यदि यह कार्य हमारे सामने था, तो हम इसके कार्यान्वयन के साथ कैसे आगे बढ़ेंगे? उदाहरण के लिए, उन्होंने ऐसा कोड लिखा था:

$(window).on('scroll resize', function(){ //   , ,   / //    ( ) }); 

मैं तुरंत ध्यान देता हूं कि संस्करण 1.7 के बाद से, समय .delegate() .bind() , .delegate() .bind() , .delegate() समाप्त हो गया है: अब हम ईवेंट हैंडलर कनेक्ट करने के सार्वभौमिक तरीके का उपयोग करते हैं .on() (उन मामलों को छोड़कर जब हमें एक "ईवेस्टरडॉपिंग" का उपयोग करने की आवश्यकता होती है। » .one() , और $(function(){ }) के साथ डॉम-रेडी भी पकड़ें।

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

कुछ भूल तो नहीं गए? हाँ, जैसे नहीं। हम जांच करते हैं। जब एक विंडो स्क्रॉल घटना होती है, हैंडलर फ़ंक्शन का शरीर संसाधित होता है: दृश्य आयत के आयामों को लें, निर्देशांक की गणना करें और उन्हें div को स्थानांतरित करें। प्रतीक्षा करें। और अगर उपयोगकर्ता कुछ भी "ट्विस्ट" नहीं करता है, तो हम अपने तत्व को काम की शुरुआत में स्थिति में नहीं लाएंगे? खैर, हां। लगता है वे भूल गए हैं। ठीक है, हम इसे इस तरह लिखते हैं:

 $(window).on('scroll resize', function(){ // get new coordinates // animate repositioning }); // get new coordinates // animate repositioning 

मुसीबत: कोड "एक प्यारे के साथ" निकला। शांत रहें और कॉपी-पेस्ट से छुटकारा पाएं:

 $(window).on('scroll resize', repositionAnchor); function repositionAnchor(){ // get new coordinates // animate repositioning } repositionAnchor(); 

मैं आपके बारे में नहीं जानता, लेकिन मुझे यह कम पसंद है।

कोई कहेगा: "मूल उदाहरण पर वापस जाएं और 'लोड' ईवेंट पर हुक करें।" कोई सवाल नहीं, मैं पकड़ लूंगा। लेकिन क्या होगा अगर लोड कोड को पारित करने के बाद किसी कारण से इस कोड को निष्पादित किया जाता है?

समाधान सतह पर है। JQuery के लिए धन्यवाद, हम स्वतंत्र रूप से उन घटनाओं के प्रवाह का अनुकरण कर सकते हैं जो हम .trigger() विधि का उपयोग करने की अपेक्षा करते हैं। हमारा प्रारंभिक उदाहरण बन जाता है:

 $(window).on('load scroll resize', function(){ // get new coordinates // animate repositioning }).trigger('scroll'); 

हम लोड, स्क्रॉल और आकार पर लटकाते हैं, और किसी भी होने की प्रतीक्षा किए बिना, हम उनमें से एक की शुरुआत की नकल करते हैं। लाभ। घोषणा और आरंभीकरण दोनों।

कस्टम ईवेंट

ठीक है, क्या होगा यदि दस्तावेज़ को छोटा कर दिया गया था या किसी तरह से बदलकर नए डेटा के ड्राइंग को अतुल्यकालिक रूप से प्राप्त किया गया था? क्या ब्लॉक प्रदर्शित करने की आवश्यकता होगी, लेकिन 'स्क्रॉल' ईवेंट नहीं होगा? तब ... जब यह आवश्यक हो जाता है, तो हम " $(window).trigger('scroll') " $(window).trigger('scroll') को "कॉल" करेंगे - जो बहुत आसान है।

यह आसान है, हाँ, लेकिन यह तथ्य कि "स्क्रॉल" का अर्थ है "स्क्रॉल करना" और "दस्तावेज़ के अंदरूनी को बदलना" कुछ भी नहीं है? व्यक्तिगत रूप से, मेरे लिए - क्या । एह, window ऑब्जेक्ट में एक 'change' या 'redraw' घटना होगी, कहते हैं। फिर उस पर लटका देना संभव होगा, और बाद में - समय आने पर उन्हें "शूट" करें।

लेकिन क्या होगा अगर मैं आपको बताऊं कि कुछ भी हमें ऐसा करने से रोकता है? इससे क्या फर्क पड़ता है कि वस्तु में ऐसी घटना है या नहीं? बस ऐसे ही:

 $(window).on('load scroll resize redraw', function(){ // get new coordinates // animate repositioning }).trigger('scroll'); // some time later, just when we need it: $(window).trigger('redraw'); // << custom event 

कोई मानक घटना नहीं है जिसे redraw कहा जाता है। हमने खुद अब इसका आविष्कार किया है। इसलिए, इसे "कस्टम" कहा जाता है।

JQuery में, हम टेक्स्ट नोड्स और टिप्पणी नोड्स को छोड़कर सभी तत्वों पर इस तरह की घटना को सुन सकते हैं।

तो, देखो, यह पता चलता है कि हम DOM के साथ उपयोगकर्ता इंटरैक्शन घटनाओं की एक कठोर सूची तक सीमित नहीं हैं: हम घटनाओं के लिए अपने स्वयं के नाम का आविष्कार कर सकते हैं, उन्हें "शूट" कर सकते हैं, और निश्चित रूप से, उनके हैंडलर्स को लटका सकते हैं। इस तरह की कार्रवाई से हमें एप्लिकेशन ब्लॉक (मॉड्यूल) की परिभाषा में उच्च स्तर तक पहुंचने और ढीली युग्मन के सिद्धांतों पर उनकी बातचीत सुनिश्चित करने का अवसर मिलता है।

बेशक, हम पहले से ही jQuery एपीआई प्रलेखन से इस बारे में जानते थे: एक घटना का कोई भी नाम या प्रकार हो सकता है , उदाहरण के लिए, 'onDataAvailable' , 'elvisHasLeftTheBuilding' और 'the_answer_to_life_the_universe_and_everything_is_ready' । कई लोग यह जानते थे, लेकिन मुझे यकीन है कि हर कोई इसका इस्तेमाल नहीं करता।

ईवेंट नेमस्पेस के बारे में दो शब्द। ईवेंट के नाम पर डॉट के माध्यम से जाने वाली सब कुछ इस ईवेंट का तथाकथित नामस्थान है ( 'onDataAvailable.widgetOne' - "widgetOne" - इस इवेंट के लिए नामस्थान)। कई हो सकते हैं ( 'onDataAvailable.widgetOne.dataEvents' - दो नामस्थान इसमें शामिल हैं: widgetOne और dataEvents)। यह समूह की घटनाओं के लिए एक सुविधाजनक तरीका है। लेकिन नाम स्थान एक अलग लेख के लायक है, इसलिए उनके बारे में एक शब्द भी अधिक नहीं है। ऊपर से एक निष्कर्ष: हम डॉट्स के साथ घटना के नाम से बचते हैं।

क्यों चिपके हुए हैं?

हमने बस फिर से सीखा कि आप किसी भी नाम के साथ घटनाओं को "शूट" और "सुन" सकते हैं। हालांकि, एक और सवाल सामने आता है। यदि एक क्लिक ( 'click' ) को सुनने के लिए, हम DOM तत्व पर लटकाते हैं .. (या उसके माता-पिता में से जो पॉप अप करने पर वांछित घटना प्राप्त करेगा), तो जब हम किसी उपयोगकर्ता की घटना को सुनना चाहते हैं, तो हमें क्या लटकाना चाहिए? उदाहरण के लिए, 'onDataAvailable' की घटना, जो हमारी योजना के अनुसार होनी चाहिए, जब एप्लिकेशन के लिए महत्वपूर्ण डेटा लोड और संसाधित किया जाता है?

सबसे पहले, अपने लिए, मैंने इस सवाल का जवाब इस प्रकार दिया:

 $(window).on('onDataAvailable', function(){ //  }); 

लेकिन उन्होंने तुरंत इस काम के विकल्प को छोड़ दिया। मुझे "चलना" उपयोगकर्ता घटनाओं के लिए प्रवेश द्वार के रूप में क्लाइंट पर्यावरण की सबसे महत्वपूर्ण वस्तु का उपयोग करना गलत लगा। कारणों में से एक: आप कभी नहीं जानते हैं, कैसे या कैसे, घटनाओं में से एक ज्ञात घटनाओं ( 'load' , 'resize' , आदि) का नाम लेगा, और गलत "श्रोताओं" काम करेगा।

फिर मैंने दस्तावेज़ को बनाए बिना, एक खाली तत्व ( var eventNode = $('') ) बनाया और श्रोताओं को इससे जोड़ा - eventNode.on('customEvent', function(){ /*...*/ }) " eventNode.on('customEvent', function(){ /*...*/ }) या"। " एक घटना के साथ "से गोली मार दी: eventNode.trigger('customEvent') ।

लेकिन यह अभी भी मुझे गलत लगा कि हम कस्टम ईवेंट बना सकते हैं, लेकिन गैर-डोम तत्वों से उन्हें भेजने या सुनने के लिए नहीं। और अब, प्रलेखन को फिर से पढ़ने और jQuery के स्रोतों के माध्यम से अफवाह के बाद, मैं इस निष्कर्ष पर पहुंचा कि हमारे उदाहरण से इवेंटकोड अच्छी तरह से एक साधारण वस्तु ( {} ) $() में लिपटे हो सकता है $() इस तरह: var eventNode = $({}) । ऐसी वस्तु में न केवल विधियाँ हैं .trigger() , .trigger() , .one() इसके प्रोटोटाइप में हैं, लेकिन वास्तव में उनके साथ भी काम करता है।

यहाँ, सरलीकृत, क्या हुआ:

 var events = (function(){ var eventNode = $({}); return { on: on, trigger: trigger }; function on(){ eventNode.on.apply(eventNode, arguments); } function trigger(){ eventNode.trigger.apply(eventNode, arguments); } })(); // events.on('customEvent', function() {}); // events.trigger('customEvent'); 

क्या कहना है?

मैं उपरोक्त सभी उदाहरणों में मौजूद चूक को समाप्त करने जा रहा हूं। हमारी घटनाएं किसी भी डेटा को प्रसारित नहीं करती हैं।

यह चूक आसानी से समाप्त हो जाती है: .trigger() विधि के दूसरे पैरामीटर द्वारा, घटना के नाम के तुरंत बाद, हम अपने स्वयं के डेटा को स्थानांतरित कर सकते हैं, जिसे हैंडलर दूसरे पैरामीटर के रूप में प्राप्त करेगा (पहला, जैसा कि आप जानते हैं, घटना का उद्देश्य है)। मुझे हाल के उदाहरण को फिर से लिखना नहीं पड़ेगा:

 events.on('onDataAvailable', function(evt, data) { var items = data.items, page = data.page, total = data.total; // render items based on data }); events.trigger('onDataAvailable', { items: [ /*... */ ], page: 3, total: 10 }); 

इस पर मैं बीच में आऊंगा। दूसरे भाग में, मैं घटनाओं को टाइप करने की कोशिश करने, अपेक्षित डेटा के पैटर्न के आधार पर फ़िल्टरिंग करने और रिंग लूप की समस्या को हल करने के बारे में भी बात करूंगा।

आपका ध्यान के लिए धन्यवाद!