🉑 🔅 🤳 एसिंक्रोनस कार्यों के लिए एक क्रमिक कॉल में स्पेगेटी। सिद्धांत और अभ्यास 🐢 👨🏻 👌🏻

लेख को जारी रखना अतुल्यकालिक कार्यों का अनुक्रमिक आह्वान ।

भाग 1. सिद्धांत

अधिकांश पारंपरिक गैर-वेब प्रोग्रामिंग भाषाएं समकालिक (अवरुद्ध) हैं।
मैं यह कैसे निर्धारित कर सकता हूं कि दी गई भाषा समकालिक या अतुल्यकालिक है? उदाहरण के लिए, नींद समारोह की उपस्थिति / अनुपस्थिति से (इसे विलंब, ठहराव आदि भी कहा जा सकता है), जब कार्यक्रम निश्चित समय के लिए पूरी तरह से बंद हो जाता है।

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

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

बहुआयामी लाभ:

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

मल्टीथ्रेडिंग के नुकसान:

प्रत्येक थ्रेड को डेटा के साथ काम करने के लिए जगह की आवश्यकता होती है, इसलिए प्रत्येक थ्रेड रैम को खाता है, भले ही यह मेमोरी उपयोग न हो और थ्रेड सो रहा हो।
यह एक बड़ी समस्या हुआ करती थी, अब मेमोरी सस्ती है, लेकिन यह तब भी किसी तरह अप्रिय हो जाता है जब एक साधारण लेकिन बहु-थ्रेडेड जावा प्रोग्राम 2 जीबी मेमोरी लेता है।
यदि दो धाराएँ एक ही दुर्लभ संसाधन (स्मृति, नेटवर्क कनेक्शन, आदि में एक वस्तु) का उपयोग करती हैं, तो संसाधन (रेस कंडीशन) के लिए प्रवाह की प्रतियोगिता हो सकती है। "यह हो सकता है" से भी बदतर है अगर हमने कहा "यह होगा"।
धागे, झंडे, सेमाफोर, आदि के बीच प्रतिस्पर्धा का मुकाबला करने के लिए, जिनका एक लक्ष्य है - अन्य धागों को एक दुर्लभ संसाधन की प्रतीक्षा करना। लेकिन तब एक डेडलॉक समस्या उत्पन्न हो सकती है जब थ्रेड ए थ्रेड के लिए प्रतीक्षा कर रहा है और बी ए की प्रतीक्षा कर रहा है।
ये मल्टीथ्रेडिंग की दो सबसे बड़ी कमियां हैं, यह इतनी बड़ी समस्या है कि, उदाहरण के लिए, एक इंटरव्यू में, जब जावा प्रोग्रामर को हायर करते हैं, तो थ्रेड्स पर हमेशा सवाल होते हैं जैसे " थ्रेड.स्टार्ट () थ्रेड से अलग () ,", " कैसे ? " गतिरोध से लड़ें? ”आदि। जावा प्रोग्रामर थ्रेड्स के वीर निर्माण पर और फिर इससे जुड़ी समस्याओं पर काबू पाने में किसी भी कम वीर पर भारी मात्रा में खर्च नहीं करते हैं।
जैसा कि आप शायद जानते हैं, पारंपरिक प्रोसेसर का विकास एक निश्चित सीमा तक पहुंच गया है, और यह अब गिगाहर्ट्ज़ दौड़ द्वारा उत्पादकता बढ़ाने के लिए संभव नहीं है। इस मामले में, मल्टीथ्रेडिंग अधिक मात्रा में या कम स्वतंत्र डेटा के प्रसंस्करण में एक बड़ी वृद्धि देता है, उदाहरण के लिए, जब वीडियो एन्कोडिंग।
इसके बावजूद, प्रोग्रामर की ओर से मल्टीटास्किंग के माध्यम से मल्टीटास्किंग की धारणा इस प्रकार है: "यह प्रोग्राम को जटिल करने के लिए अविश्वसनीय है ताकि रैम खर्च हो ताकि 90% थ्रेड्स एक-दूसरे के लिए इंतजार कर रहे हों, और जैसे ही वे इंतजार करना बंद कर देते हैं, वे एक-दूसरे के साथ लड़ते हैं, धमकी देते हैं कि एक-दूसरे के साथ व्यवस्थित होने की धमकी दें। गतिरोध । "

जावास्क्रिप्ट में, एक समानांतर कार्य बनाने के लिए, आपको केवल लिखना होगा:

setTimeout(function () { console.log('Async'); }, 0);

या

 button.addEventListener('click', function () { console.log('Async click'); }, false)

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

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

जावास्क्रिप्ट एसिंक्रोनस ऑपरेशन के लिए बहुत अच्छी तरह से अनुकूल है और बस उसी के लिए डिज़ाइन किया गया था।
दुर्भाग्य से, वाक्यविन्यास में तुल्यकालिक अपवाद हैं - ये झूठे ध्वज के साथ सतर्क , पुष्टि , प्रोमोट और xmlhttprequest कमांड हैं जो सब कुछ ब्लॉक करते हैं।
यह दृढ़ता से सिफारिश की जाती है कि किसी भी मामले में इन अपवादों का उपयोग न करें, शायद, एक अपवाद के लिए, जिस पर हमारे लेख के अंत में चर्चा की जाएगी।
एक एसिंक्रोनस कॉल हमेशा प्रदर्शन के मामले में सिंक्रोनस कॉल से बेहतर होता है। उदाहरण के लिए, nginx पर देखें - यह उच्च प्रदर्शन के कारण सुपर लोकप्रिय हो गया है, जो कि, मुख्य रूप से, अतुल्यकालिक ऑपरेशन से हासिल किया गया है।
मेरे महान अफसोस के लिए, नोड.जेएस अभी भी विरोध नहीं कर सका और एक और सिंक्रोनस कमांड - आवश्यकता की शुरुआत की। जब तक यह कमांड नोड.जेएस में है, मैं व्यक्तिगत रूप से इसका उपयोग कभी नहीं करूंगा, क्योंकि मुझे विश्वास है कि प्रदर्शन हमेशा लंगड़ा रहेगा।

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

अतुल्यकालिक विकास की जटिलता क्या है?
उदाहरण के लिए, जल्द या बाद में, कोई भी जावास्क्रिप्ट प्रोग्रामर ऐसे "बग" का सामना करेगा (स्टैकऑनफ्लो पर सबसे लोकप्रिय प्रश्नों में से एक):

सर्वर कोड

 <?php #booklist.php header('Content-type: application/json'); echo json_encode(array(1, 2, 88)); ?>

ग्राहक कोड

 var getBookList = function () { var boolListReturn; $.ajax({ url : 'bookList.php', dataType : 'json', success : function (data) { boolListReturn = data; } }); return boolListReturn; }; console.log(getBookListSorted()); // -   :)

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

कार्यक्रम को थोड़ा बदलने के लिए यह अधिक सही है, मान लीजिए कि सफलता कॉलबैक के अंदर कंसोल.लॉग कॉल पास कर रहा है।

 var getBookList = function (callback) { $.ajax({ url : 'bookList.php', dataType : 'json', success : function (data) { callback(data); } }); }; getBookList(function (bookList) { console.log(bookList); });

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

 var getBookList = function () { return $.ajax({ url : 'bookList.php', dataType : 'json', }).promise(); }; //     promise    done getBookList().done(function (bookList) { console.log(bookList); });

हालांकि, कॉलबैक पर लोड बढ़ने से, एक दूसरी समस्या उत्पन्न हो सकती है, जो यह है कि एक या दो से अधिक अतुल्यकालिक कमांड का उपयोग करना समस्याग्रस्त है।
कल्पना करें कि हमें सूची आईडी से दूसरी सेवा book.php का उपयोग करके पुस्तकों के नाम खोजने की आवश्यकता है

सर्वर भाग:

 <?php #book.php $id = $_REQUEST['id']; $response = array( "id" => $id ); switch ($id) { case '1': $response['title'] = "Bobcat 1"; break; case '2': $response['title'] = "Lion 2"; break; case '88': $response['title'] = "Tiger 88"; break; } header('Content-type: application/json'); echo json_encode($response); ?>

हमारा ग्राहक कोड इस तरह होगा:

 var getBookList = function () { return $.ajax({ url : 'bookList.php', dataType : 'json', }).promise(); }; var getBook = function (id) { return $.ajax({ url : 'book.php?id='+id, }).promise(); }; getBookList().done(function (bookList) { $.each(bookList, function (index, bookId) { getBook(bookId).done(function (book) { console.log(book.title); }); }); });

यह तीन-कहानी कोड पहले से ही बहुत नहीं है। यह संभव है, यह पता लगाने के लिए कि यहां क्या हो रहा है, लेकिन वास्तव में घोंसले का एक बड़ा स्तर बाधा डालता है और एक ऐसी जगह बन जाती है जहां कीड़े संभावित रूप से हो सकते हैं।
यहाँ एक बग है: यदि आईडी सूची को सॉर्ट किया गया है, तो छंटनी खो सकती है। उदाहरण के लिए, यदि कुछ अनुरोधों को दूसरों की तुलना में अधिक धीरे-धीरे वापस किया जाता है, या यदि उपयोगकर्ता समानांतर में धार डाउनलोड करना शुरू कर देता है, तो अनुरोधों के परिणाम जारी करने की गति "छोड़ें" हो सकती है।
Php पर, हम स्लीप कमांड के साथ इसका अनुकरण करते हैं:
...
मामला '2':
नींद (2);
$ प्रतिक्रिया ['शीर्षक'] = "शेर २";
तोड़;
...
हमारी स्क्रिप्ट आउटपुट देगी
Bobcat 1
बाघ 88
शेर २
मुसीबत यहाँ दिखाई दे रही है, क्योंकि हमारी सूची अब वर्णानुक्रम में क्रमबद्ध नहीं है! ...
अनुरोधों को अलग-अलग समय लेते हुए हम सूची को कैसे रख सकते हैं?
यह समस्या इतनी सरल नहीं है जितना लगता है, यहां तक कि वादा करने वाली वस्तुएं यहां बहुत मदद नहीं करेंगी, इस समस्या को स्वयं हल करने का प्रयास करें और आप अपनी त्वचा में स्थिति का नाटक महसूस करेंगे।

भाग 2. अभ्यास

जावास्क्रिप्ट पुस्तकालयों की इस अधूरी सूची पर एक नज़र:
async.js, async, async-mini, atbar, start, chainsaw, चैनल, Cinch, cloudd, deferred, प्रत्येक, EventProxy.js, फ़ाइबराइज़, फ़ाइबर, वादा, asyncblock, पहला, flow-js, funk, futures, futures वादा, समूहीकरण, प्रज्वलित, जाम, Jscex, JobManager, jsdeferred, LAEH2, miniqueue, $ N, nestableflow, node.flow, नोड- fnqueue, नोड-चेन, नोड-निरंतरता, नोड-क्रॉन, नोड-कॉन्टैब, नोड-इनफ़्लो , node_memo, नोड-समानांतर, नोड-वादा, संकीर्ण, न्यूरॉन, noflo, प्रेक्षक, पूल, q, रीड-फाइल्स, रूबरडैक, स्कैन, seq, सेक्सी, सिग्नल, सरल-अनुसूची, स्लाइड, soda.js, चरण, stepc , streamline.js, सिंक, QBox, zo.js, रुकने योग्य, झरना
ये सभी बाइक लाइब्रेरी एक समस्या के बारे में हल करने का वादा करती हैं, "सिंक कोड में async कोड लिखें।" यानी आपको एसिंक्रोनस कोड लिखने देना उतना ही आसान है जितना कि सिंक्रोनस लिखना।
मैंने उनमें से अधिकांश की कोशिश की, लेकिन वास्तव में वे वास्तव में मदद नहीं करते हैं। मानक jQuery.Deferred के साथ तुलना में मैं बड़ी उपयुक्तता पर ध्यान नहीं दिया।
लेकिन फिर भी, आइए विचार करें कि विकल्प क्या हैं:

विकल्प 1 "तुल्यकालिक कॉल"

नेस्टेड क्वेरीज़ की समस्या का एक स्पष्ट समाधान (एक सूची प्राप्त करने के लिए, सूची के तत्वों के माध्यम से जाएं और प्रत्येक तत्व के लिए एक और अनुरोध करें, जबकि मूल सूची के क्रम को बनाए रखते हुए) सभी कॉल को तुल्यकालिक बनाने के लिए बेवकूफ होगा:

 var getBookList = function () { var strReturn; $.ajax({ url : '../bookList.php', dataType : 'json', success : function (html) { strReturn = html; }, async : false }); return strReturn; }; var getBook = function (id) { var strReturn; $.ajax({ url : '../book.php?id='+id, success : function (html) { strReturn = html; }, async : false }); return strReturn; }; var getBookTitles = function () { return $.map(getBookList(), function (val, i) { return getBook(val).title; }); }; var ul = $('<ul/>').appendTo($('body')); $.each(getBookTitles(), function (index, title) { $('<li>'+ title +'</li>').appendTo(ul); });

यह समाधान "बहुत तेज़ और गंदे" श्रृंखला से है, क्योंकि अनुरोध न केवल ब्राउज़र को अवरुद्ध करते हैं, बल्कि इसे लंबे समय तक भी करते हैं, क्योंकि प्रत्येक अगला अनुरोध पिछले एक की प्रतीक्षा करता है।

गौरव

सरल कोड, त्रुटियों को पकड़ना आसान है
परीक्षण करने में आसान

नुकसान:

ब्राउज़र को ब्लॉक करता है
परिणामी समय सभी अनुरोधों के समय का योग है

विकल्प 2 "एक वादा जो अपनी सूची में शामिल सभी वादों को पूरा करने की प्रतीक्षा करता है"

अपने आप में पुस्तकों की सूची एक वादा (एक सूची नहीं) होगी, हालांकि इसके अंदर व्यक्तिगत वादों की एक सूची होगी और इसके बाद ही इसमें शामिल सभी वादे पूरे होंगे,
परिणाम समकालिक डेटा वाले एक सरणी के रूप में वापस आ जाएगा

 var getBookTitles = function () { var listOfDeferreds = []; var listDeferred = $.Deferred(); getBookList().done(function (bookList) { $.each(bookList, function (i, val) { listOfDeferreds.push(getBook(val)); }); $.when.apply(null, listOfDeferreds).then(function () { listDeferred.resolve($.map(arguments, function (triple) { return triple[0].title; })); }); }); return listDeferred.promise(); }; getBookTitles().done(function (bookTitles) { $.each(bookTitles, function (index, title) { $('<li>'+ title +'</li>').appendTo('#ul'); }); });

GetBookTield फ़ंक्शन कोड बहुत भारी है। मुख्य समस्या यह है कि यह गलत है, समस्याओं को पकड़ना मुश्किल है, डिबग करना मुश्किल है।

इस विकल्प के लाभ:

ब्राउज़र को ब्लॉक नहीं करता है
परिणामी समय प्रश्नों में सबसे लंबा है।

नुकसान:

जटिल, त्रुटिपूर्ण कोड
कठिन परिक्षण

विकल्प 3 "ui में परिणाम के लिए एक जगह का आरक्षण"

इस मामले में, आईडी सूची प्राप्त करने के बाद, हम इसमें शामिल तत्वों पर पुनरावृति करते हैं, तुरंत एक यूआई ऑब्जेक्ट बनाते हैं।
उसी पुनरावृत्ति में, हम अतुल्यकालिक डेटा के दूसरे भाग का अनुरोध करते हैं, जबकि UI तत्व बंद होने के माध्यम से दिखाई देता है और हम इसे सामग्री से भर देते हैं:

 getBookList().done(function (bookList) { $.each(bookList, function (index, id) { var li = $('<li>Loading...</li>'); li.appendTo('#ul'); getBook(id).done(function (book) { li.html(book.title); }); }); });

गौरव

ब्राउज़र को ब्लॉक नहीं करता है
प्रत्येक व्यक्तिगत अनुरोध समाप्त होने पर परिणाम तुरंत दिखाया जाता है।
अनुरोध समानांतर में चलते हैं

नुकसान:

मध्यम पठनीयता कोड
कठिन परिक्षण

विकल्प 4 "एक अलग वेबवर्क थ्रेड में सिंक्रोनस कॉल"

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

 // wwarpc.js var require = function () { // Only load the module if it is not already cached. var cache = {}; var gettext = function (url) { var xhr = new XMLHttpRequest(); xhr.open("GET", url, false); // sync xhr.send(null); if (xhr.status && xhr.status != 200) throw xhr.statusText; return xhr.responseText; }; return function (url) { if (!cache.hasOwnProperty(url)) { try { // Load the text of the module var modtext = gettext(url); // Wrap it in a function var f = new Function("require", "exports", "module", modtext); // Prepare function arguments var context = {}; // Invoke on empty obj var exports = cache[url] = {}; // API goes here var module = { id: url, uri: url }; // For Modules 1.1 f.call(context, require, exports, module); // Execute the module } catch (x) { throw Error("ERROR in require: Can't load module " + url + ": " + x); } } return cache[url]; } }(); onmessage = function(e){ if ( e.data.message !== "start" ) { return } var url = e.data.url; var funcname = e.data.funcname; var args = e.data.args; var module = require(url); postMessage(module[funcname].apply(null, args)); };

एक कार्यकर्ता को आसानी से लॉन्च करने के लिए एक सहायक कार्य होगा:
यह कार्यकर्ता और मॉड्यूल दोनों को कैश करेगा ताकि हर कॉल पर सर्वर से मॉड्यूल को लोड न किया जा सके।

 //   ,     ,  <script src="http://ie-web-worker.googlecode.com/svn/trunk/worker.js"></script> /** * Web Worker Asynchroneous Remote Procedure Call */ var wwarpc = function () { var worker; var getWorker = function () { // for lazy load if (worker === undefined) { worker = new Worker("wwarpc.js"); } return worker; }; return function (url, funcname) { var args = Array.prototype.slice.call(arguments, 2); var d = $.Deferred(); var worker = getWorker(); worker.onmessage = function (e) { d.resolve(e.data); }; worker.postMessage({ message : "start", url : url, funcname : funcname, args : args }); return d.promise(); }; }();

दिलचस्प है, मॉड्यूल नोड-जेएस-जैसे होंगे।

 //modules/Books.js exports.getBookList = function () { var the_object = {}; var http_request = new XMLHttpRequest(); http_request.open( "GET", 'bookList.php', false ); http_request.send(null); if ( http_request.readyState == 4 && http_request.status == 200 ) { the_object = JSON.parse( http_request.responseText ); } return the_object; }; exports.getBook = function (id) { var the_object = {}; var http_request = new XMLHttpRequest(); http_request.open( "GET", 'book.php?id='+id, false ); http_request.send(null); if ( http_request.readyState == 4 && http_request.status == 200 ) { the_object = JSON.parse( http_request.responseText ); } return the_object; }; exports.getBookTitles = function () { var Books = exports; return Array.prototype.map.call(Books.getBookList(), function (val, i) { return Books.getBook(val).title; }); };

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

 wwarpc('modules/Books.js', 'getBookTitles').done(function (bookTitles) { $.each(bookTitles, function (index, title) { $('<li>'+ title +'</li>').appendTo('#ul'); }); });

विचारधारा ऐसी होगी कि सभी ऑपरेशन कार्यकर्ता में किए जाएंगे, लेकिन कार्यकर्ता को अतुल्यकालिक रूप से बुलाया जाएगा, परिणामस्वरूप, घोंसले का शिकार हमेशा न्यूनतम होगा।

लाभ:

नए ब्राउज़र को ब्लॉक नहीं करता है
सरल, समझने में आसान कोड
परीक्षण के लिए आसान (तुल्यकालिक मोड में परीक्षण किया जा सकता है, और अतुल्यकालिक में कहा जाता है)

नुकसान:

IE और पुराने ब्राउज़र श्रमिकों को समर्थन नहीं करते हैं
परिणामी समय सभी अनुरोधों के समय का योग है

निष्कर्ष:

विकल्प 3 "ui में परिणाम के लिए एक जगह का पुनर्निर्माण" सबसे तेज़ विकल्प है, लेकिन कुछ हद तक जटिल कोड है
यदि IE उपयोगकर्ताओं के आराम से कोड की पठनीयता और परीक्षणशीलता अधिक महत्वपूर्ण है, तो विकल्प 4 "एक अलग वेबवर्क थ्रेड में सिंक्रोनस कॉल" एक अच्छा विकल्प हो सकता है
विकल्प 2 को सख्ती से बचा जाना चाहिए ("एक वादा जो अपनी सूची में सभी वादों को पूरा करने की प्रतीक्षा करता है")
सिंक्रोनस कॉल का उपयोग करना उचित नहीं हो सकता है
IE मरना चाहिए!

लेख निम्नलिखित सामग्रियों की छाप के तहत लिखा गया था:

एसिंक्रोनस कार्यों के लिए एक क्रमिक कॉल में स्पेगेटी। सिद्धांत और अभ्यास

भाग 1. सिद्धांत

बहुआयामी लाभ:

मल्टीथ्रेडिंग के नुकसान:

सर्वर कोड

ग्राहक कोड

सर्वर भाग:

हमारा ग्राहक कोड इस तरह होगा:

भाग 2. अभ्यास

विकल्प 1 "तुल्यकालिक कॉल"

गौरव

नुकसान:

विकल्प 2 "एक वादा जो अपनी सूची में शामिल सभी वादों को पूरा करने की प्रतीक्षा करता है"

इस विकल्प के लाभ:

नुकसान:

विकल्प 3 "ui में परिणाम के लिए एक जगह का आरक्षण"

गौरव

नुकसान:

विकल्प 4 "एक अलग वेबवर्क थ्रेड में सिंक्रोनस कॉल"

लाभ:

नुकसान:

निष्कर्ष:

More articles: