एक डिज़ाइन पैटर्न एक टेम्प्लेट है जो सॉफ़्टवेयर डिज़ाइन में सामान्य रूप से आवर्ती समस्या को हल करता है।
ऑब्जर्वर पैटर्न, जिसे पब्लिश-सब्सक्राइब पैटर्न के रूप में भी जाना जाता है, एक व्यवहारिक पैटर्न है। यह आपको कई वस्तुओं या ग्राहकों को किसी भी घटना के बारे में सूचित करने की अनुमति देता है जो उस वस्तु में प्रकाशित होती है जिसे वे देख रहे हैं।
यहां आप सीखेंगे कि टाइपस्क्रिप्ट में ऑब्जर्वर डिज़ाइन पैटर्न को कैसे लागू किया जाए।
पर्यवेक्षक पैटर्न
पर्यवेक्षक पैटर्न प्रकाशक और उसके ग्राहकों के बीच एक-से-कई संबंधों को परिभाषित करके काम करता है। जब प्रकाशक में कोई घटना होती है, तो वह उस घटना के सभी ग्राहकों को सूचित करेगा। इस पैटर्न का एक व्यापक उदाहरण है जावास्क्रिप्ट घटना श्रोताओं.
संदर्भ के लिए, मान लें कि आप एक इन्वेंट्री ट्रैकर बना रहे हैं जो आपके स्टोर में उत्पादों की संख्या पर नज़र रखता है। इस मामले में, आपका स्टोर विषय/प्रकाशक है, और आपकी वस्तु-सूची पर्यवेक्षक/ग्राहक है। इस स्थिति में पर्यवेक्षक डिजाइन पैटर्न का उपयोग करना इष्टतम होगा।
पर्यवेक्षक डिजाइन पैटर्न में, आपके विषय वर्ग को तीन तरीकों को लागू करना चाहिए:
- एक संलग्न करना तरीका। यह विधि विषय में एक पर्यवेक्षक जोड़ती है।
- ए अलग करना तरीका। यह विधि एक पर्यवेक्षक को किसी विषय से हटा देती है।
- ए सूचित/अद्यतन करें तरीका। जब विषय में स्थिति बदलती है तो यह विधि विषय के पर्यवेक्षकों को सूचित करती है।
आपके पर्यवेक्षक वर्ग को एक विधि लागू करनी चाहिए, द अद्यतन तरीका। यह विधि तब प्रतिक्रिया करती है जब इसके विषय की स्थिति में परिवर्तन होता है।
विषय और पर्यवेक्षक वर्गों को लागू करना
इस पैटर्न को लागू करने के लिए पहला कदम विषय और पर्यवेक्षक वर्ग के लिए इंटरफेस बनाना है, यह सुनिश्चित करने के लिए कि वे सही तरीकों को लागू करते हैं:
// विषय/प्रकाशक इंटरफ़ेस
इंटरफेसविषय{
संलग्न ऑब्जर्वर (पर्यवेक्षक: पर्यवेक्षक): खालीपन;
अलग ऑब्जर्वर (पर्यवेक्षक: पर्यवेक्षक): खालीपन;
सूचित करें ऑब्जर्वर (): खालीपन;
}
// ऑब्जर्वर / सब्सक्राइबर इंटरफ़ेस
इंटरफेसदेखने वाला{
अद्यतन(विषय: विषय): खालीपन;
}
ऊपर दिए गए कोड ब्लॉक में इंटरफेस उन तरीकों को परिभाषित करता है जिन्हें आपके ठोस वर्गों को लागू करना चाहिए।
एक ठोस विषय वर्ग
अगला कदम एक ठोस विषय वर्ग को लागू करना है जो लागू करता है विषय इंटरफेस:
// विषय
कक्षाइकट्ठा करनाऔजारविषय{}
इसके बाद, इनिशियलाइज़ करें विषयकी स्थिति में इकट्ठा करना कक्षा। विषय के पर्यवेक्षक इस स्थिति में परिवर्तन पर प्रतिक्रिया देंगे।
इस मामले में, राज्य एक संख्या है, और पर्यवेक्षक संख्या में वृद्धि पर प्रतिक्रिया करेंगे:
// विषय स्थिति
निजी उत्पादों की संख्या: संख्या;
अगला, पर्यवेक्षकों की एक सरणी को इनिशियलाइज़ करें। यह सरणी है कि आप पर्यवेक्षकों का ट्रैक कैसे रखेंगे:
// पर्यवेक्षकों को आरंभ करना
निजी पर्यवेक्षक: पर्यवेक्षक [] = [];
आप पर्यवेक्षक पैटर्न का उपयोग करके कुछ कार्यान्वयन पा सकते हैं एक सेट डेटा संरचना पर्यवेक्षक का ट्रैक रखने के लिए एक सरणी के स्थान पर। सेट का उपयोग करने से यह सुनिश्चित होगा कि एक ही पर्यवेक्षक दो बार दिखाई नहीं देगा। यदि आप इसके बजाय एक सरणी का उपयोग करना चाहते हैं, तो आपको डुप्लिकेट पर्यवेक्षकों की जांच करनी चाहिए संलग्न करना तरीका।
अगला, आपको लागू करना चाहिए विषयके तरीके-संलग्न करना, अलग करना, और सूचित/अद्यतन करें—अपनी ठोस कक्षा में।
लागू करने के लिए संलग्न करना विधि, पहले जांचें कि पर्यवेक्षक पहले से जुड़ा हुआ है और यदि यह है तो एक त्रुटि फेंक दें। अन्यथा, पर्यवेक्षक का उपयोग कर सरणी में जोड़ें जावास्क्रिप्ट सरणी विधि, धकेलना:
// संलग्न पर्यवेक्षक
संलग्न ऑब्जर्वर (पर्यवेक्षक: पर्यवेक्षक): खालीपन {
// जांचें कि क्या पर्यवेक्षक पहले ही संलग्न हो चुका है
कॉन्स्ट प्रेक्षक मौजूद = यह.observers.includes (पर्यवेक्षक);अगर (पर्यवेक्षक मौजूद है) {
फेंकनानयागलती('ऑब्जर्वर पहले ही सदस्यता ले चुका है');
}
// एक नया पर्यवेक्षक जोड़ें
यह.पर्यवेक्षक।धकेलना(देखने वाला);
}
अगला, अपना कार्यान्वयन करें अलग करना जावास्क्रिप्ट का उपयोग करके सूचकांक को खोजकर और सरणी से हटाकर विधि ब्याह तरीका।
ऐसे परिदृश्य हो सकते हैं जहां आप जिस पर्यवेक्षक को अलग करने का प्रयास कर रहे हैं, वह पहले ही अलग हो चुका है या पहले स्थान पर सब्सक्राइब नहीं किया गया था। आपको इन परिदृश्यों को यह जांचने के लिए एक सशर्त विवरण जोड़कर संभालना चाहिए कि पर्यवेक्षक सरणी में है या सेट जैसा मामला हो सकता है।
// डिटैचिंग ऑब्जर्वर (ओं)
अलग ऑब्जर्वर (पर्यवेक्षक: पर्यवेक्षक): खालीपन {
सांत्वना देना।लकड़ी का लट्ठा('निरीक्षण पर्यवेक्षक ${JSON.stringify (पर्यवेक्षक)}`);
कॉन्स्ट ऑब्जर्वर इंडेक्स = यह.observers.indexOf (पर्यवेक्षक);अगर (पर्यवेक्षक सूचकांक -1) {
फेंकनानयागलती('पर्यवेक्षक मौजूद नहीं है');
}
यह.पर्यवेक्षकब्याह(पर्यवेक्षक सूचकांक, 1);
कंसोल लॉग ('पर्यवेक्षक अलग...');
}
अगला, अपना कार्यान्वयन करें सूचित/अद्यतन करें अपने पर्यवेक्षकों की सूची पर लूप करके और कॉल करके विधि अद्यतन हर एक की विधि:
// पर्यवेक्षकों को सूचित करना
सूचित करें ऑब्जर्वर (): खालीपन {
कंसोल लॉग ('पर्यवेक्षकों को सूचित किया जा रहा है...');
के लिए (कॉन्स्ट देखने वाला कायह.पर्यवेक्षक) {
पर्यवेक्षक अद्यतन (यह);
}
}
अंत में, के लिए विषय वर्ग, एक ऐसी विधि को लागू करें जो राज्य में हेरफेर करती है और फिर परिवर्तन के पर्यवेक्षकों को कॉल करके सूचित करती है सूचित/अद्यतन करें तरीका। यह उदाहरण इस बात का सरलीकरण है कि कोई विषय कैसे कोई क्रिया कर सकता है और फिर पर्यवेक्षकों को सूचित कर सकता है:
// बदलती स्थिति और पर्यवेक्षकों को सूचित करना
नया उत्पाद (उत्पाद: संख्या): खालीपन {
यहउत्पादों की संख्या + = उत्पाद;
कंसोल लॉग ('नया उत्पाद स्टोर में जोड़ा गया');
यहनोटिफाई ऑब्जर्वर ();
}
ठोस पर्यवेक्षक वर्ग
प्रकाशक की सदस्यता लेने के लिए पर्यवेक्षक वर्ग या कक्षाएं बनाएँ। प्रत्येक पर्यवेक्षक वर्ग को इसे लागू करना चाहिए देखने वाला इंटरफेस।
पर्यवेक्षक वर्ग लागू करेंगे सूचित/अद्यतन करें विधि जो केवल वे जिस विषय का अवलोकन कर रहे हैं उसे कॉल करना चाहिए। इस पद्धति में वे सभी व्यावसायिक तर्क शामिल होने चाहिए जिनकी आपको विषय की स्थिति में बदलाव के जवाब में चलाने की आवश्यकता है:
// ठोस पर्यवेक्षक 1
कक्षाभंडारऔजारदेखने वाला{
अद्यतन(): खालीपन {
कंसोल लॉग ('नया उत्पाद स्टोर में जोड़ा गया, इन्वेंट्री अपडेट कर रहा है...');
// वास्तविक व्यावसायिक तर्क यहाँ जाता है ...
}
}
// कंक्रीट ऑब्जर्वर 2
कक्षाग्राहकऔजारदेखने वाला{
अद्यतन(): खालीपन {
कंसोल लॉग ('स्टोर में नया उत्पाद जोड़ा गया है, मुझे इसे देखने जाना है...');
// वास्तविक व्यावसायिक तर्क यहाँ जाता है ...
}
}
ऑब्जर्वर पैटर्न का उपयोग करना
इस पैटर्न का उपयोग करने के लिए, ठोस विषय और प्रेक्षक वर्गों को तुरंत चालू करें। एक बार ऐसा करने के बाद, विषय को कॉल करें संलग्न करना विधि और ऑब्जर्वर उदाहरण को तर्क के रूप में पास करें। जवाब में, विषय उस उदाहरण को अपने पर्यवेक्षकों की सूची में जोड़ देगा:
// तत्काल विषय और पर्यवेक्षक
कॉन्स्ट स्टोर = नया इकट्ठा करना();
कॉन्स्ट सूची = नया भंडार();
कॉन्स्ट ग्राहक = नया ग्राहक()
// प्रकाशक को वस्तुओं की सदस्यता लेना
इकट्ठा करना.attachऑब्जर्वर(भंडार);
इकट्ठा करना.attachऑब्जर्वर(ग्राहक);
// विषय की स्थिति बदलना
इकट्ठा करना।नए उत्पाद(30);
यह कोड एक राज्य परिवर्तन का अनुकरण करता है। परिवर्तन सूचना पद्धति को ट्रिगर करेगा विषय कक्षा। बदले में, यह विधि कॉल करती है सूचित करें इसके प्रत्येक पर्यवेक्षक पर विधि। प्रत्येक पर्यवेक्षक तब अपना स्वयं का व्यावसायिक तर्क चलाएगा।
आपको केवल इस पैटर्न का उपयोग करना चाहिए जब एक वस्तु की स्थिति में परिवर्तन अन्य वस्तुओं को प्रभावित करता है, और इसमें शामिल वस्तुओं का सेट अज्ञात या गतिशील होता है।
ऑब्जर्वर पैटर्न का उपयोग करने के लाभ
अपने कोड में इस पैटर्न का उपयोग करने से आप खुले/बंद सिद्धांत को बनाए रख सकते हैं। आप विषय के कोड को बदले बिना जितने चाहें उतने ग्राहक जोड़ सकते हैं और रनटाइम पर वस्तुओं के बीच संबंध स्थापित कर सकते हैं।