🚜 🏛️ ✳️ $ .Deferred का उपयोग करते हुए पुन: नेस्टिंग को बचाएं 👩🏾‍💻 🏾 🦆

मैं हब्र का स्वागत करता हूं, मुझे हाल ही में एक सर्वेक्षण सेवा लिखने का अवसर मिला। इस सेवा के व्यवस्थापक पैनल में एक प्रश्न और उनसे जुड़े नोट्स थे। और जब मैं प्रश्न को बचा रहा था, मुझे संपादन के लिए सभी घोंसले के शिकार को खुला रखने की आवश्यकता थी, जो कि jQuery $ ।Deferred insanely ने मेरी मदद की, और मैं आपको इस लेख में इसके बारे में बताना चाहता हूं।

मान लीजिए कि हमारे पास उनके लिए प्रश्नों और नोटों की एक संरचना है, जैसा कि दाईं ओर स्क्रीनशॉट में दर्शाया गया है, हम इसका विश्लेषण करेंगे। मैं एक डिजाइनर नहीं हूं, जैसा कि मैं इस लेख के लिए विशुद्ध रूप से स्टाइल कर सकता हूं, इसलिए क्षमा करें।

क्रम में चलते हैं।
सबसे पहले, मैं बताऊंगा कि परिस्थितियाँ क्या थीं।

सवाल हैं, उनके अंदर नोट हो सकते हैं। जब आप संपादन या सहेजने पर क्लिक करते हैं, तो प्रश्न / नोट का लेआउट सर्वर से वापस आ जाता है और इसे टेम्पलेट में बदल दिया जाता है। प्रश्न को सहेजते समय नोटों में परिवर्तन को खोना नहीं है, यदि प्रश्न और संलग्न नोट दोनों को संपादित किया गया था।

इस समस्या को हल करने के लिए कई विकल्प हैं, यह सुनिश्चित करने के लिए कि सर्वर पर एक ही बार में सब कुछ भेजना संभव है और पहले से ही अलग होना है, लेकिन इसके लिए संरचना में बदलाव की आवश्यकता होगी।
अगर कुछ बच्चों को बचाना है, तो मुझे माता-पिता के सवाल को टालने का विकल्प पसंद आया। इस तरह के व्यवहार कभी-कभी विभिन्न स्थितियों में आवश्यक होते हैं, और यहां तक कि मेरे छोटे अभ्यास में भी पहले से ही कई बार इसकी आवश्यकता होती है।

अधीर के लिए, लेख के बहुत अंत में एक डेमो के लिंक हैं।

पहला सवाल, नोस्टिंग।

लेआउट इस तरह दिखता है

<ul class="questions"> <li> <div class="question" id="id1"> <span class="text"> ,  </span> <span class="edit">edit</span> </div> </li> </ul>

जब आप "संपादन" पर क्लिक करते हैं - हम प्रश्न आईडी को सर्वर में स्थानांतरित करते हैं और "संपादन मोड" में लेआउट प्राप्त करते हैं, इसे प्रतिस्थापित करें और यह इस तरह दिखाई देगा:

संपादन मोड में लेआउट:

 <ul class="questions"> <li> <div class="question" id="id1"> <input type="text" name="title" value=" ,  "> <span class="save">save</span> </div> </li> </ul>

हम पाठ को बदलते हैं, "सहेजें" पर क्लिक करते हैं - हम प्रश्न की आईडी, बदले हुए पाठ को पास करते हैं और हमें लेआउट "सामान्य मोड" (पेनॉल्टी स्क्रीनशॉट में) मिलता है।

अपने सरलतम रूप में, प्रश्न को सहेजने का तर्क इस तरह लग सकता है:

 $('.questions').on('click', '.save', function() { var $li = $(this).closest('li'); saveData($li); }); function saveData($li) { var $item = $li.children('.question'), id = $item.id, $input = $item.children('input'); $.ajax({ type: 'POST', url: '/save', dataType: 'json', data: $input.serialize(), success: function(response) { if ( ! response.errors) { $li.replaceWith(response.data); } } }); }

यहां सब कुछ आसान है, एक बार फिर मैं इस तथ्य पर ध्यान केंद्रित करना चाहता हूं कि सर्वर को सहेजने के बाद पूरे प्रश्न का लेआउट हमारे पास आता है।

दूसरा प्रश्न पहले स्तर का घोंसला है।

लेआउट:

 <ul class="questions"> <li> <div class="question" id="id2"> <span class="text">   </span> <span class="edit">edit</span> </div> <ul> <li> <div class="note" id="id1"> <span class="text">1 </span> <span class="edit">edit</span> </div> </li> <li> <div class="note" id="id2"> <span class="text">2 </span> <span class="edit">edit</span> </div> </li> </ul> </li> </ul>

यहां यह अधिक दिलचस्प है, क्योंकि किसी प्रश्न को सहेजते / संपादित करते समय, प्रश्न के लेआउट को बदल दिया जाता है, जिसका अर्थ है कि सभी नेस्टिंग को बदल दिया गया है, अर्थात नोटों। यदि प्रश्न सहेजे जा रहे थे तो क्या नोट भी संपादित किए गए थे?
यही मेरा मतलब है

यदि उपयोगकर्ता नोट पर "सेव" पर क्लिक नहीं करता है, और तुरंत "सेव" सवाल पर क्लिक करता है - नोट में परिवर्तन नहीं सहेजे जाएंगे, तो लेआउट को सर्वर से लौटने वाले के साथ बदल दिया जाएगा। प्रश्न को सहेजते समय यह पता चलता है, हमें यह देखने की आवश्यकता है कि क्या संपादन के लिए कोई नोट खुले हैं, और यदि ऐसा है, तो पहले उन्हें सहेजें, और फिर प्रश्न को सहेजें। इसलिए आपको उस क्षण को ट्रैक करने की आवश्यकता होती है जब सभी संलग्न नोट सहेजे जाते हैं, यह इस जगह पर है कि $ .Deferred हमारी मदद करेगा।

पहले, मैं वर्णन करूंगा कि यह सिद्धांत में कैसे काम करता है, ऊपर दिए गए चित्र में दिखाए गए उदाहरण के बाद, फिर कोड के माध्यम से जाएं।
जब आप प्रश्न को "सेव" पर क्लिक करते हैं - $ .ajax से पहले विधि में, हम देखते हैं कि क्या संपादन के लिए कोई अटैचमेंट खुला है, अगर वहाँ है - हम प्रश्न को बचाने में बाधा डालते हैं, $ .Deferred ऑब्जेक्ट बनाते हैं और पूरा होने पर सभी घोंसलों की बचत को पूरा करने के लिए सदस्यता लेते हैं - हम फिर से प्रश्न को सहेजना शुरू करते हैं।

कोड देखें:

 $('.question').on('click', '.save', function() { saveData.call(this); }); function saveData() { // this     (   ,   ) var self = this, //     / $button = $(this), $item = $button.closest('div'), $li = $item.closest('li'), //        id = $item.attr('id').replace(/[^0-9.]/g, ""), inputs = $item.find(':input'), type = $item.attr('class'); //       (  ) return $.Deferred(function() { var def = this; $.ajax({ type: 'POST', url: '/save', dataType: 'json', data: inputs.serialize() + '&id=' + id + '&type=' + type, beforeSend: function(xhr){ //      ,       .ignore // .ignore      ,        // (              //     ) var $inner_notes = $li.find('ul .save').not('.ignore'); //    .. if($inner_notes.length) { //         var deferreds = []; $inner_notes.each(function() { //    ,         //  this  .save   deferreds.push(saveData.call(this)); }); //       $.when.apply(null, deferreds).always(function() { //      -    . // self         .save   saveData.call(self); }); //    xhr.abort(); } }, success: function(response){ if ( ! response.errors) { //    ,   $li.replaceWith(response.data); } else { //    ,       $button.addClass('ignore'); } }, error: function() { //    ,       $button.addClass('ignore'); } }).complete(function() { //       -    resolve() def.resolve(); }); }); }

निश्चित रूप से "डब्ल्यूटीएफ" का एक बहुत कुछ है? क्षण ”, इसलिए मैं और अधिक विस्तार से लिखूंगा कि मेरे मन में क्या था।

SaveData के अंदर यह क्या है?

उत्तर है:

यह हमेशा सहेजे गए प्रश्न / नोट के सेव तत्व के बराबर होता है।
यह सिर्फ इतना है कि तत्वों में नेविगेट करना मेरे लिए अधिक सुविधाजनक था।

 //   saveData: function() { var self = this, $button = $(this), $item = $button.closest('div'), $li = $item.closest('li'); } //      $('.question').on('click', '.save', function() { saveData.call(this); }); //   var $inner_notes = $li.find('ul .save').not('.ignore'); $inner_notes .each(function() { deferreds.push(saveData.call(this)); }); //   saveData: function() { var self = this; .... $.when.apply(null, deferreds).always(function() { saveData.call(self); }); }

हम सभी घोंसले को बचाने के पूरा होने को कैसे ट्रैक करते हैं?
उत्तर है:
टालमटोल की मदद से।
```
 var deferreds = []; $children_notes.each(function() { deferreds.push(app.saveData.call(this)); }); $.when.apply(null, deferreds).always(function() { saveData.call(self); }); 
```
- हम एक ऐरे बनाते हैं, उसमें सेव फंक्शन (उसी फंक्शन) में एक कॉल जोड़ते हैं, लेकिन एडिटिंग के लिए खुले सभी नेस्टेड नोट्स के संदर्भ में।
- $ .when (func1, func2) .done (func3)
  सिंटैक्स स्वयं के लिए बोलता है, जब func1 और func2 निष्पादित करते हैं, तो func3 चलाएं।
  हमारे पास कार्यों की एक सरणी है, इसलिए हम उन्हें .apply () का उपयोग करके पास करते हैं।
- यहां आस्थगित उन सभी कार्यों को करना शुरू कर देता है जो हम उसके पास गए थे और उन्हें निष्पादित करने के लिए इंतजार कर रहे थे।
  प्रत्येक नेस्टेड फ़ंक्शन .resolve () के साथ अपने समापन की घोषणा करता है
```
 saveData: function() { ... return $.Deferred(function() { var def = this; ... $.ajax({...}).complete(function() { def.resolve(); }); } } 
```
- जैसे ही उन सभी को निष्पादित किया जाता है, func3 को हमारे मामले में .always (फ़ंक्शन () {saveData.call (स्वयं);}) लॉन्च किया जाएगा, जहां प्रश्न के आत्म तत्व को इंगित करता है।
$ वापस क्यों करें। पसंदीदा (फ़ंक्शन () {}); ?
उत्तर है:
आस्थगित इस तरह से काम करता है कि यदि आप एक ही समय में कई ajax अनुरोधों की सदस्यता लेते हैं और उनमें से एक विफल हो जाता है (त्रुटि लौटाता है), तो आस्थगित करने के लिए फ़ंक्शन कॉल की आगे की श्रृंखला टूट जाएगी और शेष सभी कार्य / अनुरोध निष्पादित नहीं होंगे। अजाक्स का अपना आस्थगित बिल्ट-इन है और हम इसके व्यवहार को नहीं बदल सकते, लेकिन हम अजाक्स अनुरोध को किसी प्रकार के आवरण में लपेट सकते हैं और पूरा होने पर, अनुरोध की सफलता के बावजूद, सफल निष्पादन की सूचना देने के लिए बाध्य करते हैं।
```
 return $.Deferred(function() { var def = this; $.ajax({...}).complete(function() { def.resolve(); }); }); 
```
बिलकुल $ क्यों लौटाएँ। पसंदीदा (फ़ंक्शन () {}); ?
उत्तर है:
$। पसंदीदा दो तरीकों से बनाया जा सकता है ...
```
 //    function someFunc(){ //  var def = $.Deferred(); setTimeout(function(){ //    def.resolve(); }, 1000); //  return def.promise(); } function someFunc(){ //    return $.Deferred(function() { var def = this; setTimeout(function(){ //    def.resolve(); }, 1000); })/* .promise() */; //    ,    .promise() , deferred    . } //someFunc.done(function() {}); 
```
... लेकिन अगर मैंने पहली विधि के अनुसार किया, तो अजाक्स को एक अलग फ़ंक्शन के रूप में बाहर निकालना होगा, लेकिन मैं नहीं चाहता था, इसलिए यह पूरी तरह से सौंदर्यशास्त्र का मामला है।
.Ignore वर्ग क्यों?
उत्तर है:
संक्षिप्त उत्तर है: शाश्वत चक्र में नहीं पड़ना।
विस्तारित उत्तर: कोड के आधार पर यह बताना आसान होगा कि कोड कैसे करता है।
मान लें कि हमारे पास संपादन और 2 आंतरिक नोट्स के लिए एक खुला प्रश्न है, प्रश्न को सहेजें पर क्लिक करें।
1. प्रश्न पर .save पर क्लिक करने के बाद - सभी नेस्टेड नोट्स के लिए .save देखें। पाया 2, सवाल बचाना बंद कर दिया।
```
 beforeSend: function(xhr){ xhr.abort(); } 
```
2. पहले नोट को सफलतापूर्वक सहेजा गया, इसका लेआउट बदल दिया गया।
3. दूसरे नोट को सहेजते समय, किसी प्रकार की त्रुटि हुई, लेआउट को प्रतिस्थापित नहीं किया गया, .save बटन बना रहा।
4. चूंकि सरणी में अधिक नोट नहीं बचे हैं, इसलिए प्रश्न को कहा जाता है।
```
 $.when.apply(null, deferreds).always(function() { saveData.call(self); }); 
```
5. हम पहले ही फिर से भेज देते हैं और बिना सहेजे हुए घोंसले की जाँच करते हैं
```
 var $inner_notes = $li.find('ul .save')/*.not('.ignore')*/; //  .not()  if($inner_notes.length) {} 
```
6. चूंकि नोटों में से एक को संरक्षित नहीं किया गया है, हम इसे ढूंढते हैं, और यहां दो चीजों में से एक होता है।
  - या दूसरी बार, किसी कारण से, नोट सफलतापूर्वक सहेजा जाएगा, जिसके बाद प्रश्न सफलतापूर्वक सहेजा जाएगा।
  - या फिर से असफलता और हम एक अंतहीन चक्र में समाप्त हो जाते हैं।
  .Ignore class की बदौलत हम ऐसे मामलों से अपनी रक्षा कर सकते हैं।
  नोट सहेजने में विफल? खैर, सीई ला वी, हमारे लिए मुख्य सवाल बचाना है।

तीसरा सवाल मल्टी लेवल नेस्टिंग है।

लेआउट:

 <ul class="questions"> <li> <div class="question" id="id3"> <span class="text"> c  </span> <span class="edit">edit</span> </div> <ul> <li> <div class="note" id="id1"> <span class="text">1 </span> <span class="edit">edit</span> </div> </li> <li> <div class="note" id="id2"> <span class="text">2 </span> <span class="edit">edit</span> </div> <ul> <li> <div class="note" id="id4"> <span class="text">4 </span> <span class="edit">edit</span> </div> <ul> <li> <div class="note" id="id7"> <span class="text">7 </span> <span class="edit">edit</span> </div> </li> <li> <div class="note" id="id8"> <span class="text">8 </span> <span class="edit">edit</span> </div> </li> </ul> </li> <li> <div class="note" id="id5"> <span class="text">5 </span> <span class="edit">edit</span> </div> <ul> <li> <div class="note" id="id6"> <span class="text">6 </span> <span class="edit">edit</span> </div> </li> </ul> </li> </ul> </li> <li> <div class="note" id="id3"> <span class="text">3 </span> <span class="edit">edit</span> </div> </li> </ul> </li> </ul>

ऐसा लगता है कि यहां कोड काफी डरावना हो जाएगा, लेकिन वास्तव में, पिछला कार्यान्वयन इसके लिए पहले से ही व्यावहारिक रूप से उपयुक्त है। आपको केवल एक फ़ंक्शन जोड़ने की आवश्यकता है।
तथ्य यह है कि ..

 var $inner_notes = $li.find('ul .save').not('.ignore')

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

मान लीजिए कि हमारा उपयोगकर्ता पूरी तरह से पागल है और उसने सवाल को बचाने का फैसला किया जब उसके पास संपादन के लिए ऐसी शाखा खुली।

हम तुरंत "दूसरा नोट" नहीं बचा सकते, क्योंकि फिर अन्य सभी नोटों के संपादन खो जाते हैं।
इसलिए हमें नीचे से ऊपर तक जाना होगा। आपको क्या लगता है कि नोटों को बचाने के लिए सही क्रम होगा ताकि कुछ भी याद न हो? 8.6, फिर 4, फिर 2 और प्रश्न।
लेकिन हम दबाते हैं कि हम इस मुद्दे पर बचत करते हैं, जिसका अर्थ है कि हमें एक फ़ंक्शन की आवश्यकता है जो निकटतम बच्चों को ढूंढेगा, जैसे कि .closest () विधि, लेकिन इसके विपरीत।

समारोह कार्यान्वयन और आवेदन

 //      beforeSend ,   - getClosestChildrens saveData: function() { .... beforeSend: function(xhr){ var $inner_notes = $li.find('ul .save').not('.ignore'), //          $children_notes = getClosestChildrens($inner_notes); if($children_notes.length) { var deferreds = []; $children_notes.each(function() { deferreds.push(app.saveData.call(this)); }); //          $.when.apply(null, deferreds).always(function() { //       //      ,   . // self        . app.saveData.call(self); }); //   / xhr.abort(); } }, .... } //      (    ). //            //        ,    . // ..   " ",     . function getClosestChildrens($inner_notes) { var children_notes = $.grep($inner_notes, function(value, key) { var is_child_of = false, $btn = $(value), $parent_li = $btn.closest('li'); $inner_notes.not($btn).each(function(key,v) { if($(this).closest($parent_li).length) { is_child_of = true; } }); return is_child_of ? false : true; }); return $(children_notes); }

अब निष्पादन तर्क इस तरह दिखता है:

प्रश्न पर "सहेजें" पर क्लिक करें
इससे पहले कि हम सभी नोटों को पाएं, हम निकटतम बच्चों को छोड़कर सब कुछ त्याग देते हैं। दूसरा नोट रहता है। हम सवाल को सहेजना बंद कर देते हैं, दूसरा नोट पूरा करने के लिए सदस्यता लें।
हम 2 नोट को सहेजना शुरू करते हैं, हम देखते हैं कि घोंसले हैं, हम उन्हें (4, 8, 6) पाते हैं, हम निकटतम लोगों को छोड़कर सब कुछ त्याग देते हैं। अवशेष 4 और 6. हम 2 के नोटों को सहेजना बंद कर देते हैं, हम 4 वें और 6 वें बचत को पूरा करने के लिए सदस्यता लेते हैं।
हम 6 नोट को सहेजना शुरू करते हैं, कोई घोंसला नहीं बनाते, इसे बचाते हैं।
हम 4 वें नोट को सहेजना शुरू करते हैं, हम नेस्टिंग (8e) पाते हैं। हम 4 के नोट को सहेजना बंद कर देते हैं, हम 8 वीं बचत को पूरा करने के लिए सदस्यता लेते हैं।
हम 8 वें नोट को सहेजना शुरू करते हैं, कोई घोंसला नहीं बनाते, इसे बचाएं।
हम 8 वीं के लिए मूल नोट को सहेजना शुरू करते हैं, अर्थात्। 4 वाँ नोट। संपादन योग्य घोंसले के शिकार, बचाओ।
हम 8 वें और 6 वें, यानी के लिए मूल नोट को सहेजना शुरू करते हैं। दूसरा नोट। संपादन योग्य घोंसले के शिकार, बचाओ।
सवाल बचाना शुरू करें। संपादन योग्य घोंसले के शिकार, बचाओ।

ps1 सभी उदाहरणों में, मैंने एक प्रश्न के साथ शुरू होने वाले परिरक्षण को देखा, लेकिन यह केवल इसलिए है क्योंकि प्रश्न सबसे ऊपर है, इसलिए बोलने के लिए, सबसे कठिन विकल्प। बेशक, अगर ऐसी स्थिति में जैसा कि पिछले उदाहरण में दिखाया गया है, तो नोटों में से किसी एक पर सहेजें पर क्लिक करें, 2 मी का कहना है, इससे जुड़े सभी नोट भी सफलतापूर्वक सहेजे गए हैं।

ps2 सभी उदाहरणों में, मैंने saveData फ़ंक्शन दिखाया, जिसे आइटम सहेजे जाने पर कहा जाता है। आपको EditData फ़ंक्शन में पहले के फ़ंक्शन को भी जोड़ने की आवश्यकता है, जिसे आप संपादन तत्व पर क्लिक करने पर कहते हैं। आखिरकार, यदि हम प्रश्न को संपादित करने पर क्लिक करते हैं, और अंदर अभी भी संपादन योग्य नोट हैं - उन्हें भी सहेजने की आवश्यकता है, लेकिन आप इसे पहले ही डेमो में देख सकते हैं।

इस प्रकार, आप संपादन योग्य डेटा खोए बिना किसी भी घोंसले के निर्माण को बचा सकते हैं।

प्रदर्शन के लिए, मुझे थोड़ा php (सर्वर से प्रतिक्रियाओं के लिए) का उपयोग करना पड़ा, क्यों मैं jsField पर डेमो प्रदर्शित नहीं कर सकता।
मैंने गितुब पर पूरी तरह से काम करने का उदाहरण अपलोड किया है, इसलिए कोई भी इच्छुक व्यक्ति उनके साथ डाउनलोड और खेल सकता है।
मैंने ओवरलोडेड होस्टिंग में से एक पर एक डेमो भी अपलोड किया है, डेमो देखें ।

मैंने 1 सेकंड की देरी को जोड़ा ताकि आप देख सकें कि लेआउट को कैसे बदला जा रहा है। हर बार एक प्रश्न / नोट संपादित या सहेजा जाता है, लेआउट को बदलते समय वर्तमान ब्लॉक की पृष्ठभूमि झपकी लेती है। यह समझना आसान है कि क्या हो रहा है।

यह सब, मुझे टिप्पणियों में किसी भी प्रश्न का उत्तर देने में खुशी होगी।

$ .Deferred का उपयोग करते हुए पुन: नेस्टिंग को बचाएं

पहला सवाल, नोस्टिंग।

दूसरा प्रश्न पहले स्तर का घोंसला है।

तीसरा सवाल मल्टी लेवल नेस्टिंग है।

More articles: