परिचय

जब मेरी नजर Kbar पर पड़ी तो इसने मुझे अपने स्वादों के साथ वैसा ही बनाने के लिए आकर्षित किया।

1. मैंने एक कस्टम कमांड पैलेट विकसित किया है जिसे मैक पर Cmd D या Windows/Linux पर Ctrl D का उपयोग करके ट्रिगर किया जा सकता है।

2. यह कमांड पैलेट एक पोर्टल के रूप में कार्य करता है, जो उपयोगकर्ताओं को एप्लिकेशन के भीतर किसी भी पूर्वनिर्धारित स्थिर मार्गों पर नेविगेट करने की अनुमति देता है।

3. इसे Esc कुंजी का उपयोग करके बंद किया जा सकता है, और प्रदर्शन उद्देश्यों के लिए, मैंने क्लोज बटन के साथ एक मोडल शामिल किया है।

4. इस लेख में, मैं आपको इस परियोजना के पीछे के प्रमुख घटकों और डिजाइन निर्णयों के बारे में बताऊंगा, जिसमें रिएक्ट पोर्टल्स, ऑब्जर्वेबल पैटर्न और विंडो इवेंट लिसनर का उपयोग शामिल है।

प्रयुक्त प्रमुख प्रौद्योगिकियाँ और पैटर्न

1. प्रतिक्रिया पोर्टल

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

द्वितीय. पोर्टल आपको किसी घटक के बच्चों को मूल घटक के बाहर, DOM पदानुक्रम के एक अलग हिस्से में प्रस्तुत करने की अनुमति देते हैं।

III. कमांड पैलेट की DOM संरचना को बाकी एप्लिकेशन से अलग करने के लिए यह महत्वपूर्ण था, यह सुनिश्चित करते हुए कि रूट DOM अप्रभावित रहे।

2. अवलोकनीय पैटर्न

मैं। मैंने Angular के RxJS के समान एक ऑब्जर्वेबल पैटर्न लागू किया। इस पैटर्न को अपनाने का प्राथमिक कारण राज्य प्रबंधन और इवेंट हैंडलिंग लॉजिक को घटक से अलग करना था।

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

III. यह पैटर्न कोडबेस की मॉड्यूलैरिटी और रखरखाव में सुधार करता है।

IV. इसके अलावा, मैंने यह सुनिश्चित किया कि जब ऑब्जर्वेबल्स की अब आवश्यकता नहीं है, तो उन्हें ठीक से सदस्यता समाप्त कर दी जाए, संभावित मेमोरी लीक को रोककर एप्लिकेशन के प्रदर्शन को अनुकूलित किया जाए।

3. इवेंट श्रोता

मैं। उपयोगकर्ता इंटरैक्शन का पता लगाने के लिए, मैंने विंडो इवेंट श्रोताओं का उपयोग किया। जब विशिष्ट कीबोर्ड शॉर्टकट (जैसे Cmd D या Ctrl D) दबाए जाते हैं तो ये श्रोता निगरानी करते हैं।

द्वितीय. इन कीप्रेस का पता लगाने पर, प्रासंगिक स्थिति की जांच की जाती है, और संतुष्ट होने पर, ऑब्जर्वेबल घटना को प्रसारित करता है।

वेब वर्कर्स का उपयोग क्यों नहीं करते?

मैं। आपको आश्चर्य हो सकता है कि मैंने वेब वर्कर्स का उपयोग न करने का निर्णय क्यों लिया।

द्वितीय. जबकि वेब वर्कर मुख्य थ्रेड से भारी कम्प्यूटेशनल कार्यों को पूरा करने के लिए उत्कृष्ट हैं, वे DOM-संबंधित इवेंट श्रोताओं के लिए उपयुक्त नहीं हैं।
तृतीय. यह देखते हुए कि इस परियोजना का फोकस DOM घटनाओं को कुशलतापूर्वक संभालने पर था, ऑब्जर्वेबल पैटर्न एक अधिक उपयुक्त विकल्प था।

सहयोग और अगले चरण

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

द्वितीय. बेझिझक कोड का अन्वेषण करें और यदि आप योगदान देना चाहें तो संपर्क करें!

*गिटहब लिंक:- *(https://github.com/Ashutoshsaranti/react-portal)

संदर्भ
https://github.com/timc1/kbar?tab=readme-ov-file