👷 👩🏾‍🤝‍👨🏿 💠 जावास्क्रिप्ट के लिए प्रतिक्रियाशील एक्सटेंशन। पूरा गाइड 👐🏿 👩🏿‍🤝‍👨🏾 🤵🏼

अवलोकनीय संग्रह का उपयोग करना चाहते हैं? क्या आपने रिएक्टिव एक्सटेंशन्स के बारे में सुना है? क्या आपको LINQ पसंद है? स्पेगेटी कोड पसंद नहीं है? भिक्षुओं की आवश्यकता है? और क्या यह सब जावास्क्रिप्ट में है?

तो जावास्क्रिप्ट के लिए Rx क्या है?
Rx का अर्थ है रिएक्टिव एक्सटेंशन्स। जैसा कि परियोजना पृष्ठ पर परिभाषा कहती है:

आरएक्स ऑब्ज़र्वर पैटर्न का पालन करते हुए, संग्रह का उपयोग करके अतुल्यकालिक और घटना-उन्मुख कार्यक्रमों को बनाने के लिए एक पुस्तकालय है।

मुख्य विचार अतुल्यकालिक कंप्यूटिंग को डेटा स्रोतों के रूप में विचार करना है। उदाहरण के लिए, एक कंप्यूटर माउस क्लिक और कर्सर आंदोलनों के स्रोत से ज्यादा कुछ नहीं है। ऐसे डेटासेट के साथ काम करने के लिए ऑब्जर्वेबल कलेक्शंस का उपयोग किया जाता है। चूंकि RxJS अपनी जड़ें .NET दुनिया से लेता है, इसलिए, कुछ LINQ फीचर्स (सेलेक्ट, जहां, टेक, स्किप आदि) हमारे लिए उपलब्ध हो जाते हैं। इसके बारे में थोड़ा बाद में, लेकिन अभी के लिए, पुस्तकालय की संरचना पर विचार करें।

मौजूदा ढांचे के साथ एकीकरण

आरंभ करने के लिए, निम्नलिखित लिंक पर RxJS डाउनलोड करें । इसमें शामिल हैं jQuery, MooTools, प्रोटोटाइप, Dojo, ExtJS के साथ-साथ Google मैप्स जैसी लोकप्रिय सेवाओं के लिए एक्सटेंशन। लाइब्रेरी में केवल एक 7.4 kb rx.js फ़ाइल (30 Kbytes असंपीड़ित) होती है।

उदाहरणों में, स्थापित वेब डेवलपर पैकेज के साथ विज़ुअल स्टूडियो 2010 का उपयोग एक संपादक के रूप में किया जाएगा। क्लाइंट फ्रेमवर्क jQuery है।

तो, एक साधारण HTML पेज बनाएं और RxJS में प्लग करें।

<head> <title>Samplestitle> <script type="text/javascript" src="Scripts\rx.js"></script> <head>

उसके बाद, IntelliSense Rx विधियों को दिखाना शुरू कर देगा।

सिद्धांत की बिट

आगे बढ़ने से पहले, मैं Rx में अपनाई गई कुछ शर्तों और नियमों को स्पष्ट करना चाहूंगा।

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

प्रेक्षकों

जैसा कि ऊपर उल्लेख किया गया है, अवलोकन विधियों की सदस्यता लेने के लिए सदस्यता विधि का उपयोग किया जाता है:

 var source = null; var subscription = source.Subscribe( function (next) { console.log("OnNext: " + next); }, function (exn) { console.log("OnError: " + exn); }, function () { console.log("OnCompleted"); });

और

 var source = Rx.Observable.Empty(); var observer = Rx.Observer.Create( function (data) { $(" ").text(data).appendTo("#content"); }); var handle = source.Subscribe(observer);

अधिक विस्तार से सदस्यता विधि पर विचार करें:

निर्मित / प्रेषित प्रेक्षक के लिए एक संदर्भ (संभाल) देता है
पहले अधिभार के रूप में, यह तीन मापदंडों तक स्वीकार करता है: डेटा ऐरे (OnNext) के प्रत्येक तत्व के लिए एक हैंडलर; अपवाद हैंडलर (OnError); पूरा करने वाला हैंडलर (चालू)
दूसरे अधिभार में, पहले से ही बनाए गए ऑब्जर्वर को OnNext, OnError, OnCompected घटनाओं को प्रबंधित करने की संभावना के साथ स्थानांतरित किया जाता है।

एक पर्यवेक्षक को बंद करने के लिए कोई अलग विधि नहीं है। इसके बजाय, .NET वातावरण से डिस्पोज़ पैटर्न RxJS में आया।
तो ऑब्जर्वर के लिए लिंक (हैंडल) में डिस्पोज़ विधि है, जिसे कॉल करके आप ऑब्जेक्ट को नष्ट कर सकते हैं।

observables

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

विधि का नाम	विवरण
खाली ()	OnCompleted नामक एक खाली संग्रह लौटाता है
फेंको (error_msg)	एक OnError कॉल के साथ एक खाली संग्रह लौटाता है
वापसी (मूल्य)	एक आइटम का संग्रह लौटाता है
रेंज (शुरू, गिनती)	32-बिट पूर्णांक की एक सरणी देता है
जनरेट करें (आरंभिक_स्टेट, कंडीशन, चयनकर्ता, पुनरावृति)	निम्नलिखित मापदंडों द्वारा निर्मित संग्रह लौटाता है
GenerateWithTime (समय)	जनरेट विधि के समान, लेकिन तत्वों की पीढ़ी के बीच एक समय अंतराल जोड़ता है
कभी नहीं ()	घटनाओं को बुलाए बिना एक खाली संग्रह लौटाता है
.Observable (event_name)	JQuery ऑब्जेक्ट के साथ काम करने के लिए एक्सटेंशन
FromArray ()	JS सरणी से एक संग्रह शुरू करता है
बनाएं (subscribe_detail)	पर्यवेक्षक सदस्यता विवरण का एक संग्रह बनाता है
FromDognvent (dom_element, event_name)	DOM तत्वों के साथ काम करने के लिए एक्सटेंशन
FromIEEvent (dom_element, event_name)	Internet Explorer के DOM तत्वों की विशिष्ट घटनाओं के साथ काम करने के लिए एक्सटेंशन
FromHtmlEvent (dom_element, event_name)	FromDOMEvent () और FromIEEvent () के लिए एक सामान्य तरीका है

LINQ

तो, हम RxJS - LINQ समर्थन की सबसे दिलचस्प विशेषताओं में से एक में आते हैं। मुझे लगता है कि कई ने .NET प्लेटफॉर्म पर उपलब्ध इस अद्भुत तकनीक के बारे में सुना है।
LINQ का अभिप्राय भाषा एकीकृत क्वेरी से है, जिससे आप विभिन्न संग्रह क्वेरी कर सकते हैं। RxJS के आगमन के साथ, जावास्क्रिप्ट दुनिया के लिए सभी तरीके नहीं आए, लेकिन सबसे उपयोगी:

चुनें (SelectMany)
टेक (टेक यूटिल, टेकवाइल, टेकलैस्ट)
जहाँ
स्किप (SkipUntil, SkipWhile, SkipLast)
GroupBy
आदि

नए जोड़े गए थे, केवल यहां प्रस्तुत हैं:

DistinctUntilChanged - संग्रह की स्थिति की निगरानी करता है। OnNext, OnCompleted इवेंट्स केवल डेटा बदलने पर उठाए जाएंगे।
Do - DistinctUntilChanged कॉल करने से पहले नए डेटा तक पहुँच प्रदान करता है
थ्रॉटल - न्यूनतम समय निर्धारित करता है जिसके बाद संग्रह को नए डेटा के लिए ट्रैक किया जाएगा
टाइमस्टैम्प (RemoveTimestamp) - ऑपरेटर को डेटा नियंत्रण स्थानांतरित करने के बजाय, टाइमस्टैम्प पारित किया जाता है, जिसके प्रसंस्करण के बाद अगला विवरण कहा जाता है

मैंने पूरी सूची नहीं दी, क्योंकि बाकी तरीके आप खुद देख सकते हैं।
नीचे दी गई तस्वीर की स्पष्ट समझ के लिए घटनाओं के लिए सदस्यता का आरेख है:

चूंकि लैम्ब्डा भाव जावास्क्रिप्ट में मौजूद नहीं है, लिनेक विधियों के मापदंडों के रूप में उनकी भूमिका सामान्य कार्यों द्वारा की जाती है:

 var items = [1, 2, 3, 4, 5]; var observable = Rx.Observable.FromArray(items).Select(function (item) { return { Value: item, Sqrt: Math.sqrt(item) }; }).Where(function (item) { return item.Value + 2 < 5; });

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

 var input = $("#textbox").toObservable("keyup") .Select(function (event) { return $(event.target).val(); }) .Timestamp() .Do(function (inp) { var text = "I: " + inp.Timestamp + "-" + inp.Value; $(" ").text(text).appendTo("#content"); }) .RemoveTimestamp() .Throttle(1000) .Timestamp() .Do(function (inp) { var text = "T: " + inp.Timestamp + "-" + inp.Value; $(" ").text(text).appendTo("#content"); }) .RemoveTimestamp() .DistinctUntilChanged(); var subscribtion = input.Subscribe(function (data) { $(" ").text("Your text: " + data).appendTo("#content"); });

इस प्रकार, DistinctUntilChanged को कॉल करने और टेक्स्ट फ़ील्ड मानों की एक सरणी को पारित करने से पहले, हम कुछ प्रकार की लॉगिंग करते हैं।

स्पेगेटी कोड के लिए नहीं कहो!

लेख के इस अंतिम भाग में मैं उन वेब सेवाओं के साथ काम करने पर विचार करना चाहूंगा जिनका पहले ही कई बार उल्लेख किया जा चुका है।
आपने इस कोड के बारे में कितनी बार लिखा है:

 $.ajax({ url: "your_url", dataType: "json", success: function (data, textStatus, xhr) { $("#results").empty(); $.each(data[1], function (_, result) { $("#results").append(" " + result + " "); }); }, error: function (xhr, textStatus, errorThrown) { $("#error").text(errorThrown); } });

मैं अक्सर सोचता हूं। उसकी समस्या क्या है? यह सही है, डेटा प्रोसेसिंग लॉजिक डेटा स्रोत की परिभाषा के साथ एनकैप्सुलेटेड है, जो "स्पैगेटी कोड" में बदल जाता है।
RxJS इस समस्या के बचाव में आता है। सबसे पहले आपको rx.jQuery फ़ाइल को शामिल करना होगा, जो कि jQuery के साथ एकीकरण के लिए एक विस्तार है।
उसके बाद, हम उपरोक्त कोड का थोड़ा सा पुन: प्रसंस्करण करेंगे:

 function serviceCall(text) { return $.ajaxAsObservable( { url: "your_url", dataType: "json", format: "json", data: text }); } var source = serviceCall("search me"); var handle = source.Subscribe(function (result) { $("#results").append(" " + result + " "); }, function (exn) { $("#error").text(exn); });

इस प्रकार, हमने डेटा प्रोसेसिंग लॉजिक को रिक्वेस्ट से अलग किया, रिक्वेस्ट को एसेंस में ही लपेट दिया।

अंतभाषण

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

पुनश्च

उपयोगी लिंक की एक सूची जो कुछ बिंदुओं पर अधिक विस्तार से चर्चा करती है:

जावास्क्रिप्ट के लिए प्रतिक्रियाशील एक्सटेंशन का परिचय - वेधशाला बनाना
RxJS पर खेल विकास
linq.js - यह लाइब्रेरी Rx से संबंधित नहीं है, लेकिन अगर आपको JavaScript में LINQ पसंद है, तो इसके 90 तरीके बहुत उपयोगी होंगे
स्टार्टर सामग्री

जावास्क्रिप्ट के लिए प्रतिक्रियाशील एक्सटेंशन। पूरा गाइड