हैंडलिंग कीस्ट्रोक्स उर्फ ​​शॉर्टकट और डिबगिंग

नमस्ते! हम WEBAPI + जावास्क्रिप्ट में गर्म कुंजियों के बारे में बात करेंगे, उनके संगठन के तरीकों और समस्याओं पर विचार करें जो मुख्य रूप से बड़े अनुप्रयोगों में उत्पन्न होते हैं।

किसी विशिष्ट कार्य के लिए कुंजियों को संभालने के तरीकों पर विचार करें।

"टास्क"

कल्पना करें कि किसी मौजूदा प्रोजेक्ट में आपको कीबोर्ड इनपुट प्रोसेसिंग को लागू करने की आवश्यकता है। उसी समय, प्रोजेक्ट इंटरफ़ेस और इसके नियंत्रक, विशुद्ध रूप से ऐतिहासिक कारणों के लिए, निश्चित रूप से, जैसे वे हैं। और निम्नलिखित हैं:

ParentController जिसमें उनके राज्य और राज्य के साथ दो घटक होते हैं। Controller1 और एक तत्व जो साइट को खोजने के लिए CTRL+SHIFT+F का उपयोग करता है, और Controller2 अपने DOM तत्व के साथ, जो एक स्थानीय क्षेत्र है, जिसमें इसके अंदर एक खोज है। हालांकि, वे एक साथ स्क्रीन पर हो सकते हैं। नीचे इस समस्या को हल करने के कुछ तरीके दिए गए हैं।

2. " KeyboardEvent और इसकी मैनुअल प्रोसेसिंग"

KeyboardEvent वस्तुओं का वर्णन है कि उपयोगकर्ता कीबोर्ड के साथ कैसे इंटरैक्ट करता है। प्रत्येक घटना एक कुंजी द्वारा वर्णित है; ईवेंट का प्रकार (कीडाउन, कीप या कीप) उत्पादित क्रिया के प्रकार को निर्धारित करता है।

बहुत अच्छा लगता है? आइए एक नज़र डालें।
आमतौर पर वैश्विक खोज कॉल के अनुरूप CTRL+SHIFT+F कुंजी अवरोधन पर विचार करें।

 element.addEventListener('keypress', (event) => { const keyName = event.key; //        // ..     SHIFT      if (event.ctrlKey && event.shiftKey && event.key.toLowerCase() === 't') { alert('CTRL+SHIFT+T pressed'); } }); 

अब, हमारे कार्य पर लागू, आप दो तरीके से कर सकते हैं (उदाहरण के लिए)

नियंत्रकों 1 और 2 में कुंजियों की अवरोधन को अलग से करें

यह इस तथ्य को जन्म देगा कि डोम में आदेश के आधार पर, आपको यह सुनिश्चित करने के useCapture का useCapture करने की आवश्यकता हो सकती है कि नियंत्रक 2 और फिर नियंत्रक 1 का प्रसंस्करण useCapture लेगा। तो आपको अलग-अलग तर्क मिलते हैं, लेकिन यदि आवेदन जटिल है और ऐसे कई नियंत्रक हैं, तो यह समाधान अच्छा नहीं है क्योंकि कुछ स्क्रीन पर एक साथ हो सकते हैं और उनके पास अपना सख्त प्रसंस्करण क्रम हो सकता है, जो DOM ट्री में उनकी स्थिति पर निर्भर नहीं करता है। ( बबलिंग और कैप्चरिंग देखें)

CommonController में मुख्य कब्जा

एक वैकल्पिक समाधान एक आम अभिभावक नियंत्रक में क्लिक को संभालने के लिए होगा, जो जानता है कि अपने बच्चों को पहले और दूसरे नियंत्रक द्वारा नियंत्रित कब दिखाना है। यह बाल नियंत्रकों को बढ़ाते समय घटनाओं को पकड़ने और निर्णय लेने के लिए कौन सी नियंत्रक प्रक्रिया के साथ कठिनाइयों का कारण नहीं होगा। हालांकि, एक और समस्या होगी - एक मोटी if माता-पिता नियंत्रक में दिखाई देती है, जो सभी संभावित मामलों को संभालती है। बड़े अनुप्रयोगों के लिए, यह समाधान उपयुक्त नहीं है, क्योंकि कुछ बिंदु पर, एक और Controller प्रकट हो सकता है जो ParentController का बच्चा नहीं है ParentController तो आपको हैंडलर को अपने आम माता-पिता तक एक स्तर तक ParentController होगा और इसी तरह ... जब तक कि जल्दी या बाद में नियंत्रकों में से एक इसके अंदर के तत्वों के बारे में बहुत अधिक जानने लगे।

वास्तव में, केवल 80% ब्राउज़र KeboardEvent.key साथ काम करने में सक्षम हैं, बाकी सभी में आपको KeboardEvent.keyCode को संचालित KeboardEvent.keyCode : प्रमुख कोड के साथ Number । जो जीवन को बहुत उलझा देता है। यहां यह इस दृष्टिकोण के नुकसान का वर्णन करने के लिए लायक है।

विपक्ष:

• कोड का संगठन बहुत सुविधाजनक नहीं है, इसके लिए वर्ण कोड और उनके पाठ समकक्ष के कार्ड की आवश्यकता होती है, और अन्य उपयोगिताओं जो कोड की मात्रा को कम करते हैं।
• अपने कोड का उपयोग किए बिना प्रतीकों के साथ काम करने के लिए ब्राउज़रों द्वारा 80% समर्थन अभी भी पर्याप्त नहीं है।
• एक हैंडलर से दूसरे useCapture का उपयोग करते हुए ओवरलैपिंग।
• यदि एक ही हैंडलर के साथ useCapture और नेस्टेड तत्वों के साथ हुक हैं
  डिबगिंग मुश्किल है।
• खराब मापक।

लेकिन मूल रूप से, कोई अनावश्यक निर्भरता और पुस्तकालय नहीं हैं

अगला, हम दो पुस्तकालयों के बारे में बात करेंगे, जिनमें से एक को अपनी इसी तरह की समस्याओं को हल करने के लिए डिज़ाइन किया गया था।

2. " HotKeys लाइब्रेरी का उपयोग करना"

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

 //   hotkeys('ctrl+shift+f', function(event, handler){ alert('CTRL+SHIFT+T pressed'); }); 

सिंटैक्स पहले से बहुत छोटा दिखता है, और समस्या को हल करने के लिए मुख्य चिप सीधे स्क्रीन पर नियंत्रक 1 और 2 के घटकों को दिखाएगा। लाइब्रेरी के कोड में थोड़ी सी अफवाह होने के बाद, यह नोटिस करना आसान है कि हैंडलर एक स्टैक बनाते हैं जो भरे हुए या साफ़ होते हैं क्योंकि वे स्क्रीन पर दिखाई देने वाले उर्फ ​​पंजीकृत हैं (मान लीजिए कि हैंडलर वाला एक तत्व जो मौजूदा एक की तुलना में बाद में दिखाई दिया था, जो हॉट कीज़ को प्रोसेस करने के लिए कतार में प्राथमिकता देगा)।

अक्सर ऐसा होता है कि प्रसंस्करण को बाधित करने वाले तत्व बाद में प्रकट होते हैं। इस मामले में, हम प्रत्येक नियंत्रक को क्लिक की हैंडलिंग के तर्क को सुरक्षित रूप से फैला सकते हैं। और अन्य चिप्स जैसे कि स्कोप हमें क्लिकों की एक धारा को दूसरे से अलग करने में मदद करेंगे। लेकिन इस मामले में जब ≠ का ≠ - वही समस्याएं उत्पन्न होती हैं जो मूल ईवेंट लर्नर के रूप में होती हैं। हम सब कुछ एक आम माता पिता नियंत्रक में डाल देंगे।

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

कुल जोड़:

• स्कोप आपको धाराओं को अलग करने की अनुमति देता है।
• वाक्यविन्यास स्पष्ट और छोटा है।
• आदेश तत्व की उपस्थिति को निर्धारित करता है, डोम में स्थिति नहीं।
• आकार और निर्भरता की कमी।

विपक्ष:

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

यह विशिष्ट कार्यों को हल करने के लिए उपयुक्त है, लेकिन निश्चित रूप से डिबगिंग के लिए ट्रेडिंग टर्मिनल या एक बड़े व्यवस्थापक पैनल को लिखने के साथ समस्याएं होंगी।

3. " स्टैक-शॉर्टकट लाइब्रेरी का उपयोग करना"

कई रेक और किसी और के समाधान का उपयोग करने के प्रयासों के परिणामस्वरूप, मुझे अपना बनाना पड़ा बाइक एक पुस्तकालय, जो सबसे पहले, सामान्य रूप से पदार्पण करने, लोकप्रिय लोगों के सभी सर्वोत्तम गुणों को संरक्षित करने और कुछ नया लाने में मदद करेगा।

सृजन में कौन से कार्य हल किए गए थे?

• संचालन का प्रतिक्रियाशील सिद्धांत
• सरल डिबगिंग हैंडलर
• अस्पष्ट घटना प्रसंस्करण स्थिति
• क्रॉस-प्लेटफॉर्म
• आयात और वैश्विक कार्यों की कमी की सुविधा
• कनेक्ट करते समय कोई सीधी विंडो एक्सेस नहीं
• stopPropagation लिए कोई ज़रूरत नहीं है stopPropagation या stopPropagation

 //  this.shortcuts = shortcuts({ 'CMD+SHIFT+F': function (event, next) { alert('CMD+SHIFT+F pressed'); } }); //  this.shortcuts.destroy(); 

हमारे कार्य के लिए लागू, समाधान पूरी तरह से पिछले पुस्तकालय के साथ मेल खाता है। एक दूसरे के बारे में बहुत अधिक ज्ञान के बिना प्रसंस्करण तर्क का एक पूर्ण अलगाव अभी भी नहीं हुआ है, लेकिन बहुत सरल और अधिक समझ में आ गया है। निम्नलिखित के लिए धन्यवाद:

• डोम के लिए अभी भी कोई बाध्यकारी नहीं है (एक श्रोता के अपवाद के साथ) और हैंडलर का ढेर उस क्रम के आधार पर भरा जाता है जिसमें वे पंजीकृत हैं।
• scope तुरंत अलगाव की scope का उपयोग करने से इनकार कर दिया। यह स्पष्ट नहीं है कि यह किस कार्य को हल करता है और ऐसा लगता है कि यह केवल वास्तुकला को जटिल बनाता है।
• डिबगिंग और इसके बारे में अगले समारोह शायद अधिक मूल्य के हैं ...
• इवेंट की घटनाओं में म्यूटेशन करता है जो वह इवेंट में event.detail

डिबगिंग हैंडलर को इस तरह से व्यवस्थित किया जाता है कि कॉल से पहले उनके द्वारा एक callstack का निर्माण किया जाता है। यह आपको कंसोल की घटना की पूरी श्रृंखला को पहले हैंडलर से अगले में देखने की अनुमति देता है।

अगला () - एक फ़ंक्शन कॉल का मतलब है कि घटना संसाधित नहीं हुई है और अगले हैंडलर को पास कर दी जाएगी। एक बहुत परिचित अनुबंध जो मध्यवर्ती हैंडलर या मिडलवेयर को express में लागू होता है। तो आपको हमेशा पता चलेगा कि क्या घटना संसाधित है या केवल उत्परिवर्तित या "ध्यान में रखा गया" है।

यदि आप उनमें से किसी एक में ब्रेकपॉइंट सेट करते हैं तो कॉल स्टैक दिखता है।

खैर, विपक्ष के बारे में:

• अभी तक कोई टाइपस्क्रिप्ट टाइप नहीं हैं।
• कोई स्कोप नहीं - एक स्क्रीनस्क्रीन साइट नहीं बनाई जा सकती)
• पंजीकरण के दौरान एक संयोजन (यह CMD+F,CMD+V,T अल्पविराम को नहीं समझेगा)