jQuery के आस्थगित वस्तु (विस्तृत विवरण)

31 जनवरी को, jQuery 1.5 जारी किया गया था, जिसमें से एक प्रमुख नवाचार Deferred ऑब्जेक्ट टूल था। यह उसके बारे में है जिसे मैं इस लेख में अधिक विस्तार से बताना चाहता हूं।



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

सामान्य विवरण

यह विचार काफी सरल है: आपको एक आस्थगित ऑब्जेक्ट बनाने की आवश्यकता है, इस ऑब्जेक्ट को कुछ बाहरी कोड दें जो इसे हैंडलर को हुक कर सकते हैं (या इसे हुक नहीं भी कर सकते हैं), और फिर केवल एक ऑब्जेक्ट विधि को कॉल करके इन हैंडलर के निष्पादन की शुरुआत करें।



आस्थगित वस्तु के उपयोग की पूरी प्रक्रिया को तीन वैश्विक चरणों में विभाजित किया जा सकता है:

• एक आस्थगित वस्तु बनाई और शुरू की है, जिसकी स्थिति "निष्पादित नहीं" है।
• परिणामी वस्तु को बाहरी कोड के लिए जारी किया जाता है, जहां विधि में पंक्ति में ऑब्जेक्ट को deferred.then () , deferred.done () और deferred.fail () द्वारा जोड़ा जाता है। हैंडलर दो प्रकार के हो सकते हैं: "निष्पादन प्रसंस्करण" और "त्रुटि प्रसंस्करण"।
• कोड में कुछ स्थिति (घटना) को पूरा करने के लिए जहां ऑब्जेक्ट बनाया गया था, हैंडलर निष्पादित करने की विधि को कहा जाता है: deferred.resolve () हैंडलर को "सफल समापन" के लिए कहता है और ऑब्जेक्ट की स्थिति को "किया", deferred.reject () "गलतियों" के लिए हैंडलर कहता है। और वस्तु की स्थिति को "रद्द" कर देता है।

डिफर्ड ऑब्जेक्ट के विवरण में "कतार" शब्द का उपयोग एक कारण के लिए किया जाता है - कतार में जोड़े गए हैंडलर को उस क्रम में बुलाया जाता है जिसमें उन्हें जोड़ा गया था (जिसने पहले इसे जोड़ा था उसे पहले कहा जाएगा)।



हैंडलर जोड़ते समय, आस्थगित ऑब्जेक्ट की स्थिति की जांच करना बिल्कुल भी आवश्यक नहीं है (यदि यह पहले से ही निष्पादित या रद्द हो गया है)। यदि "रन" / "त्रुटि" हैंडलर पहले से ही "रन" / "रद्द" ऑब्जेक्ट में जोड़ा जाता है, तो इसे तुरंत कहा जाएगा।



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



आस्थगित वस्तु "जंजीर" है, इसका मतलब है कि इसके तरीके (सभी नहीं) स्रोत वस्तु के संदर्भ के रूप में परिणाम लौटाते हैं, जो एक पंक्ति में वस्तु के कई तरीकों को कॉल करना संभव बनाता है, उन्हें एक बिंदु के साथ अलग करना। उदाहरण के लिए, इस तरह: deferred.done (callback1) .fail (callback2);

विधियों का वर्णन

deferred.done (किए गए कॉलबैक)

एक हैंडलर जोड़ता है जिसे तब कॉल किया जाएगा जब आस्थगित वस्तु "किए गए" स्थिति में जाती है



deferred.fail (असफल)

एक हैंडलर जोड़ता है जिसे तब कॉल किया जाएगा जब स्थगित ऑब्जेक्ट "रद्द" स्थिति में जाता है



deferred.then (किए गए कॉलबैक, असफल कॉलबैक)

दोनों प्रकार के हैंडलर को एक साथ जोड़ता है, deferred.done (didCallbacks) के बराबर होता है ।fail (असफल कॉलबैक)



ऊपर वर्णित तीन विधियों में, अलग-अलग फ़ंक्शन या फ़ंक्शन के सरणियाँ, किए गए कार्य के रूप में कार्य कर सकते हैं।



deferred.resolve (आर्ग)

"किया गया" स्थिति में आस्थगित ऑब्जेक्ट डालता है और सभी किए गए कॉलबैक हैंडलर को आर्ग पैरामीटर (कॉमा द्वारा अलग किए गए मापदंडों का सामान्य गणना) कहता है



deferred.reject (args)

स्थगित ऑब्जेक्ट को "रद्द" स्थिति में रखता है और सभी विफल कॉलअर्ड्स हैंडलर्स को आर्ग पैरामीटर के साथ कॉल करता है



ऊपर वर्णित दो विधियों का उपयोग करते समय हैंडलर के कॉल (इस फ़ंक्शन के अंदर) का संदर्भ आस्थगित ऑब्जेक्ट (या ऑब्जेक्ट स्वयं ही होगा यदि प्रोजेक्शन नहीं बनाया जा सकता है) (क्या आस्थगित प्रक्षेपण है), बाद में deferred.promise () का विवरण देखें)। यदि आप एक अलग कॉल संदर्भ के साथ हैंडलर फ़ंक्शन चलाना चाहते हैं, तो आपको निम्नलिखित दो विधियों का उपयोग करने की आवश्यकता है:



deferred.resolve इसके साथ (संदर्भ, args)

deferred.rejectWith (संदर्भ, args)

विधियाँ पूरी तरह से .resolve (args) और .reject (args) के अनुरूप हैं, केवल संदर्भ इस कीवर्ड के माध्यम से हैंडलर फ़ंक्शन के अंदर उपलब्ध होंगे



आप विधियों का उपयोग करके किसी आस्थगित वस्तु की स्थिति की जाँच कर सकते हैं:



deferred.isResolved ()

deferred.isRejected ()

वस्तु की वर्तमान स्थिति के आधार पर तरीके सही या गलत होते हैं। जिस समय हैंडलर निष्पादित किए जाते हैं (लेकिन अंतिम अभी तक निष्पादित नहीं किया गया है), इसी पद्धति सही हो जाएगी।

Deferred.promise () का उपयोग करके एक प्रक्षेपण बनाना

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



एक प्रक्षेपण बनाना तब आवश्यक होता है जब बाहरी कोड को कतार में हैंडलर जोड़ने की क्षमता देना आवश्यक होता है और साथ ही वस्तु की स्थिति को बदलने के अनधिकृत कॉलिंग तरीकों से रक्षा करता है।

एक आस्थगित वस्तु बनाना

आस्थगित ऑब्जेक्ट बनाने के दो तरीके हैं: $ .Deferred () विधि (नया कीवर्ड वैकल्पिक है) का उपयोग करके एक नया मूल उदाहरण बनाएं या पहले बनाए गए ऑब्जेक्ट्स का उपयोग करने के लिए $ .when (args) विधि को कॉल करें।



$। पसंदीदा (दुर्गंध)



विधि एक नई आस्थगित वस्तु देता है। फंक तर्क वैकल्पिक है, आप एक फ़ंक्शन में पास कर सकते हैं जो निर्मित ऑब्जेक्ट को कंस्ट्रक्टर से लौटने से पहले आरंभीकृत करता है। फ़ंक फ़ंक्शन के अंदर, आप इस और / या पहले फ़ंक्शन तर्क के माध्यम से आरंभीकृत आस्थगित ऑब्जेक्ट तक पहुंच सकते हैं।



$ .when (deferred1, deferred2, ...)



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



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

उदाहरण 1

$.when($.get( '/echo/html/' ), $.post( '/echo/json/' )).done( function (args1, args2) { alert( " " ); });

यह कोड "लोडिंग पूर्ण" संदेश को प्रदर्शित करेगा, जब दोनों पृष्ठ सफलतापूर्वक संकेतित ब्लॉक में लोड किए गए हैं।



यदि एक गैर-आस्थगित वस्तु को $ .when () के तर्क के रूप में सामना किया जाता है, तो यह माना जाता है कि यह कार्य पहले ही सफलतापूर्वक पूरा हो चुका है और विधि कार्यक्रम शेष तर्कों द्वारा निर्देशित है।



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

$ .Ajax () में आस्थगित वस्तु का उपयोग करना

JQuery 1.5 में, अजाक्स इंजन को फिर से लिखा गया है और अब $ .ajax () विधि और इसके छोटे संस्करण भी आस्थगित वस्तुओं का उपयोग करते हैं। इससे कई हैंडलर अनुरोध को पूरा करने की घटनाओं (सफल या गलती से) को एक सरल तरीके से, साथ ही साथ कई समानांतर अनुरोधों को पूरा करने के लिए हैंडलर को असाइन करना संभव बनाता है।



विधियों से $ .ajax (), $ .get (), $ .post (), $ .getScript (), $ .getJSON (), एक ऑब्जेक्ट लौटाया गया है जिसमें आस्थगित ऑब्जेक्ट का प्रक्षेपण है, अर्थात। इसमें ऐसे तरीके हैं जो आपको हैंडलर को कतार में जोड़ने और $ .when () के तर्क के रूप में उपयोग करने की अनुमति देते हैं।



इस ऑब्जेक्ट के अलावा, विधियों के समानार्थक शब्द जोड़े जाते हैं, जो नाम से ajax अनुरोधों के विषय के लिए अधिक उपयुक्त हैं:

• deferred.success = deferred.done - एक अनुरोध पूरा करने वाला हैंडलर जोड़ें
• deferred.error = deferred.fail - एक त्रुटि के साथ अनुरोध पूरा करने वाला हैंडलर जोड़ें
• deferred.complete - एक अनुरोध पूरा करने वाले हैंडलर को जोड़ें (चाहे वह सफल हो या एक त्रुटि हो), इसे सफलता के बाद जोड़े गए सभी हैंडलर के बाद कहा जाता है / त्रुटि या असफलता

रोचक तथ्य

$ .When () विधि, जब आस्थगित वस्तुओं से संबंधित उनके तर्कों का मूल्यांकन करती है, तो .promise () विधि की उपस्थिति के लिए जाँच करती है, और यदि ऐसी कोई विधि है, तो "वाम" वस्तु को भी अवहेलना माना जाता है। एक बग इसके साथ जुड़ा हुआ है, जब इस तरह की "बाईं" वस्तुओं तक पहुंचते हैं जैसे कि उन्हें हटा दिया गया था निष्पादन त्रुटियों की ओर जाता है।



JQuery (jquery-git.js) के नवीनतम विकास संस्करणों में, आस्थगित ऑब्जेक्ट में भी .invert () विधि है, जो .promise () विधि के समान है, केवल ऑब्जेक्ट के प्रक्षेपण का निर्माण करती है विधियों के साथ "इसके विपरीत": किया <=> विफल, isResolved <। => अस्वीकृत, वादा <=> उलटा करें। इस पद्धति का अनुप्रयोग अभी तक मेरे द्वारा देखा नहीं गया है।

उपयोग के उदाहरण

उदाहरण 1. (ऊपर देखें) पहले से ही कई अजाक्स अनुरोधों के पूरा होने पर नज़र रखने की एक विशिष्ट समस्या का समाधान दिखाता है।



उदाहरण 2

// 3

function test() {

var d = $.Deferred();

setTimeout( function () { d.resolve(); }, 3000);

return d.promise();

}



var t = test().done( function () { alert( " " ); });



//

setTimeout( function () {

alert( " " );

t.done( function () { alert( "" ); });

}, 5000);



* This source code was highlighted with Source Code Highlighter .

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



उदाहरण 3

< div id ="d1" style ="width:100px;height:100px;background:red;" > 1 </ div >

< div id ="d2" style ="width:100px;height:100px;background:green;" > 2 </ div >



* This source code was highlighted with Source Code Highlighter .

//

var a1 = $.Deferred(),

a2 = $.Deferred();



$( '#d1' ).slideUp(2000, a1.resolve);

$( '#d2' ).fadeOut(4000, a2.resolve);



a1.done( function () { alert( 'a1' ); });

a2.done( function () { alert( 'a2' ); });

$.when(a1, a2).done( function () { alert( 'both' ); });



* This source code was highlighted with Source Code Highlighter .

यह कोड अधिक वास्तविक समस्या के समाधान का एक उदाहरण प्रदान करता है, जब आपको कई एनिमेशन को पूरा करने के बाद कुछ कोड को निष्पादित करने की आवश्यकता होती है। एक तत्व पर एक एनीमेशन पूरा हैंडलर जोड़ना काफी सरल है (यह भी प्रयोग किया जाता है), लेकिन स्वतंत्र एनिमेशन के पूरा होने पर नज़र रखना कुछ अधिक कठिन है। आस्थगित वस्तुओं का उपयोग करना और $ .when () कोड को सरल बनाता है।



सभी उदाहरणों को jsfiddle.net सेवा पर चलाया और जांचा जा सकता है



सामग्री:

blog.jquery.com/2011/01/31/jquery-15-released

api.jquery.com/category/deferred-object

www.erichynds.com/jquery/using-deferreds-in-jquery (अनुवाद: habrahabr.ru/blogs/jquery/112960 )

JQuery 1.5 स्रोत कोड और प्रलेखन