👨🏾‍💻 💨 👼🏾 क्रिया में डुबकी लगाना। टोडोमेवीसी लेखन। भाग 1 📔 👨🏿‍⚖️ 🔩

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

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

मैंने समस्या के औपचारिक विवरण की खोज और अध्ययन नहीं किया, लेकिन उदाहरणों में से एक को उल्टा करने का निर्णय लिया। इस लेख के लिए बैकएंड हमारे लिए दिलचस्प नहीं है, इसलिए हमने इसे स्वयं नहीं लिखा है, लेकिन साइट www.todobackend.com से तैयार लोगों में से एक का उपयोग करें, और वहां से हम एक उदाहरण क्लाइंट और एक मानक सीएसएस फ़ाइल ले लेंगे।

डीएपी का उपयोग करने के लिए आपको कुछ भी डाउनलोड और इंस्टॉल करने की आवश्यकता नहीं है। कोई npm install नहीं है और वह सब है किसी विशिष्ट निर्देशिका संरचना, घोषणापत्र और आईटी सफलता की अन्य विशेषताओं के साथ किसी भी परियोजना को बनाने की आवश्यकता नहीं है। पर्याप्त पाठ संपादक और ब्राउज़र। XHR अनुरोधों को डीबग करने के लिए, आपको एक वेब सर्वर की भी आवश्यकता हो सकती है - एक साधारण पर्याप्त, जैसे कि क्रोम के लिए यह एक्सटेंशन । हमारे पूरे दृश्य में एक .html-फ़ाइल शामिल होगी (ज़ाहिर है, डैप-इंजन स्क्रिप्ट और मानक TodoMVC CSS फ़ाइल की चर्चा करते हुए)

तो, खरोंच से।

1. .html फ़ाइल बनाएँ

 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Todo -- dap sample</title> <link rel="stylesheet" href="https://www.todobackend.com/client/css/vendor/todomvc-common.css"/> <script src="https://dap.js.org/0.4.js"></script> </head> <body> <script> //   dap </script> </body> </html>

सामान्य HTML तैयारी जिसमें हम CSS-file शामिल करते हैं, कृपया साइट www.todobackend.com और dap-engine द्वारा प्रदान की जाती है, साइट dap.js.org द्वारा प्रदान की गई कोई भी कृपालुता कम नहीं है।

2. मूल उदाहरण की DOM संरचना की प्रतिलिपि बनाएँ

परिवर्तनों के बिना मानक CSS फ़ाइल का उपयोग करने के लिए, हम मूल उदाहरण के समान DOM संरचना का पालन करेंगे। इसे क्रोम ब्राउज़र में खोलें, Ctr + Shift + I दबाएं, एलिमेंट्स टैब चुनें और देखें कि एप्लिकेशन स्वयं एलीमेंट section id="todo-app">

एक-एक करके इस सबट्री को खोलकर हम इसकी संरचना को हमारी .html फाइल में फिर से लिखते हैं। अब हम बस एक त्वरित तरीके से स्केचिंग कर रहे हैं, और कोड नहीं लिख रहे हैं, इसलिए हम सिर्फ 'सिंगल कोट्स' में तत्वों के हस्ताक्षर लिखते हैं, और उनके बच्चों के कोष्ठक में। यदि कोई बच्चे नहीं हैं, तो हम खाली कोष्ठक बनाते हैं। हम सूचकांक और कोष्ठक के संतुलन की निगरानी करते हैं।

 //   dap '#todoapp'( '#header'( 'H1'() 'INPUT#new-todo placeholder="What needs to be done?" autofocus'() ) '#main'( '#toggle-all type=checkbox'() 'UL#todo-list'( 'LI'( 'INPUT.toggle type=checkbox'() 'LABEL'() 'BUTTON.destroy'() ) ) ) '#footer'( '#todo-count'() 'UL#filters'( 'LI'() ) '#clear-completed'() ) )

नोट: दोहराए जाने वाले तत्व (उदाहरण के लिए, यहां वे LI तत्व हैं) हम संरचना में एक बार लिखते हैं, भले ही मूल में उनमें से कई हों; जाहिर है ये एक ही पैटर्न से एरेज़ हैं।

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

3. याद रखें कि डीएपी कार्यक्रम जावास्क्रिप्ट है

कोड में अनावश्यक कोष्ठक से हमें बचाने के लिए, dap इंजन सीधे कई विधियों को String.prototype में String.prototype (मुझे पता है कि मानक वस्तुओं में आपके तरीकों को लागू करना ayahay है, लेकिन ... संक्षेप में, हम पास हो गए हैं), जो हस्ताक्षर स्ट्रिंग को dap में परिवर्तित करता है। -shablon। ऐसी ही एक विधि है .d(rule, ...children) । पहला तर्क जो लेता है वह एक पीढ़ी का नियम ( डी-रूल ) है, और बाकी तर्क एक मनमानी संख्या में चिल्ड हैं।

इस नए ज्ञान के आधार पर, हम अपना कोड जोड़ते हैं ताकि प्रत्येक ओपनिंग ब्रेस के बजाय हमारे पास अनुक्रम .d("" , और प्रत्येक ओपनिंग सिंगल कोटे से पहले, पहले को छोड़कर, एक अल्पविराम हो। जीवन हैक: आप ऑटो-रिप्लेसमेंट का उपयोग कर सकते हैं।

 '#todoapp'.d("" ,'#header'.d("" ,'H1'.d("") ,'INPUT#new-todo placeholder="What needs to be done?" autofocus'.d("") ) ,'#main'.d("" ,'#toggle-all type=checkbox'.d("") ,'UL#todo-list'.d("" ,'LI'.d("" ,'INPUT.toggle type=checkbox'.d("") ,'LABEL'.d("") ,'BUTTON.destroy'.d("") ) ) ) ,'#footer'.d("" ,'#todo-count'.d("") ,'UL#filters'.d("" ,'LI'.d("") ) ,'#clear-completed'.d("") ) )

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

तो, इस स्तर पर, हमारे पास इस सामग्री के साथ एक .html फ़ाइल है:

 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Todo -- dap sample</title> <link rel="stylesheet" href="https://www.todobackend.com/client/css/vendor/todomvc-common.css"/> <script src="https://dap.js.org/0.4.js"></script> </head> <body> <script> '#todoapp'.d("" ,'#header'.d("" ,'H1'.d("") ,'INPUT#new-todo placeholder="What needs to be done?" autofocus'.d("") ) ,'#main'.d("" ,'#toggle-all type=checkbox'.d("") ,'UL#todo-list'.d("" ,'LI'.d("" ,'INPUT.toggle type=checkbox'.d("") ,'LABEL'.d("") ,'BUTTON.destroy'.d("") ) ) ) ,'#footer'.d("" ,'#todo-count'.d("") ,'UL#filters'.d("" ,'LI'.d("") ) ,'#clear-completed'.d("") ) ) .RENDER() //   dap   </script> </body> </html>

आप यह सुनिश्चित करने के लिए ब्राउज़र में इसे खोल सकते हैं कि DOM तत्व उत्पन्न हो गए हैं, CSS शैलियाँ लागू की गई हैं, यह केवल इस टेम्पलेट को डेटा से भरने के लिए बनी हुई है।

4. डेटा प्राप्त करें

हम मूल पृष्ठ पर जाते हैं, टूल में नेटवर्क टैब खोलें, एक्सएचआर फ़िल्टर चालू करें, और देखें कि डेटा कहाँ से और किस रूप में आता है।

ठीक है, ठीक है। टू-डू सूची सीधे todo-backend-express.herokuapp.com से वस्तुओं के एक सरणी सरणी के रूप में ली जाती है। अद्भुत।

डेटा प्राप्त करने के लिए, dap में एक अंतर्निहित कनवर्टर होता है :query जो असिंक्रोनस रूप से URL को इससे प्राप्त डेटा में "रूपांतरित" करता है। हम खुद को सीधे नियम में URL नहीं लिखेंगे, लेकिन हम इसे निरंतर todos साथ नामित करेंगे; तब संपूर्ण डेटा माइनिंग डिज़ाइन इस तरह दिखाई देगा:

 todos:query

और शब्दकोष में खुद को लगातार लिखने के लिए - .DICT सेक्शन में .RENDER() :

 '#todoapp'.d("" ... ) .DICT({ todos : "https://todo-backend-express.herokuapp.com/" }) .RENDER()

todos सरणी प्राप्त करने के बाद, हम इससे एक टू-डू सूची बनाते हैं: प्रत्येक मामले के लिए हम .title फ़ील्ड से नाम लेते हैं और इसे LABEL तत्व में .completed , और .completed फ़ील्ड से .completed "पूर्णता" का चिह्न लेते हैं - और checked तत्व की checked की checked संपत्ति INPUT.toggle । यह इस तरह किया जाता है:

  ,'UL#todo-list'.d("*@ todos:query" //  *       ,'LI'.d("" ,'INPUT.toggle type=checkbox'.d("#.checked=.completed") // #  " " ,'LABEL'.d("! .title") //  !      ,'BUTTON.destroy'.d("") ) )

हम अपने इस पेज को ब्राउज़र में अपडेट करते हैं और ... यदि आप इसे फाइल सिस्टम से शुरू करते हैं, तो कुछ भी नहीं होता है। समस्या यह है कि आधुनिक ब्राउज़र स्थानीय दस्तावेज़ों से क्रॉस-डोमेन XHR अनुरोधों की अनुमति नहीं देते हैं।

Http - किसी भी स्थानीय वेब सर्वर का उपयोग करके हमारे पेज को देखने का समय आ गया है। ठीक है, या यदि आप अपने हाथों से डीएपी लिखने के लिए तैयार नहीं हैं, तो मेरे लिंक का उपयोग करके पृष्ठ के अनुक्रमिक संस्करण देखें (स्रोत को देखने के लिए मत भूलना - क्रोम में यह Ctrl + U का उपयोग करके किया गया है)

इसलिए, हम http: // पर अपने पेज पर जाते हैं और देखते हैं कि डेटा आ रहा है, सूची बनाई जा रही है। बहुत बढ़िया! आप पहले से ही * और ऑपरेटरों में महारत हासिल कर चुके हैं ! , कनवर्टर :query , स्थिरांक और वर्तमान सरणी तत्व के क्षेत्रों तक पहुंच। परिणामी कोड को फिर से देखें। क्या यह अभी भी आपको अपठनीय लगता है?

5. राज्य जोड़ें

शायद आपने पहले ही टू-डू सूची में चेकमार्क पर क्लिक करने की कोशिश की है। चेकबॉक्स स्वयं रंग बदलते हैं, लेकिन, मूल के विपरीत, LI मूल तत्व अपनी शैली को नहीं बदलता है ("पूर्ण की गई नौकरी" को ग्रे हो जाना चाहिए और इसे पार करना चाहिए, लेकिन ऐसा नहीं होता है) - चीजें अपने राज्य को नहीं बदलती हैं। लेकिन इन तत्वों के पास अभी तक कोई राज्य नहीं है और तदनुसार, इसे बदल नहीं सकते हैं। अब हम इसे ठीक कर देंगे।

LI तत्व में "पूर्णता" की स्थिति जोड़ें। ऐसा करने के लिए, उसके $completed नियम में $completed राज्य चर को परिभाषित करें। INPUT.toggle , जो इस स्थिति को बदल सकता है, हम एक उपयुक्त प्रतिक्रिया नियम ( ui-rule ) प्रदान करेंगे, जो $completed चर को अपने स्वयं के ध्वज के अनुसार सेट करेगा ("daw चालू है")। $completed होने की स्थिति के आधार पर $completed LI तत्व सीएसएस वर्ग "पूर्ण" को सक्षम या अक्षम कर देगा।

  ,'UL#todo-list'.d("*@ todos:query" ,'LI'.d("$completed=.completed"//  ,    .completed ,'INPUT.toggle type=checkbox' .d("#.checked=.completed") //       .ui("$completed=#.checked") //    $completed ,'LABEL'.d("! .title") ,'BUTTON.destroy'.d("") ) .a("!? $completed") //     $completed,    css- completed )

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

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

  ,'LI'.d("$completed=.completed; a!" //      $completed    a-

हम देखते हैं । ठीक है। $completed होने की स्थिति के साथ पता लगा। प्रारंभिक बूट के दौरान और बाद में मैनुअल स्विचिंग के दौरान पूर्ण मामलों को सही ढंग से स्टाइल किया जाता है।

6. केस के नामों का संपादन

वापस मूल में । मामले के नाम पर डबल-क्लिक करने से, संपादन मोड सक्रिय हो जाता है, जिसमें यह नाम बदला जा सकता है। वहां इसे इस तरह से लागू किया जाता है कि "व्यू" व्यू मोड टेम्पलेट (एक डॉव, एक शीर्षक और एक डिलीट बटन के साथ) पूरी तरह से छिपा हुआ है, और INPUT class="edit" एलिमेंट प्रदर्शित होता है। हम इसे थोड़ा अलग तरीके से करेंगे - हम केवल LABEL तत्व को LABEL , क्योंकि अन्य दो तत्व हमारे संपादन में हस्तक्षेप नहीं करते हैं। केवल LABEL तत्व में view वर्ग जोड़ें।

"संपादन" स्थिति के लिए, LI तत्व में $editing चर को परिभाषित करें। प्रारंभ में, यह (राज्य) रीसेट है, LABEL तत्व पर dblclick द्वारा dblclick होता है, और INPUT.edit तत्व फोकस से बाहर होने पर बंद हो जाता है। तो हम लिखते हैं:

  ,'LI'.d("$completed=.completed $editing=; a!" //       ,'INPUT.toggle type=checkbox' .d("#.checked=.completed") .ui("$completed=#.checked") ,'LABEL.view' .d("? $editing:!; ! .title") //  $editing ,     .e("dblclick","$editing=`yes") //  dblclick  $editing ,'INPUT.edit' .d("? $editing; !! .title@value") //  $editing  .ui(".title=#.value") //  .title   change (ui     INPUT) .e("blur","$editing=") //  $editing   blur ,'BUTTON.destroy'.d("") ).a("!? $completed $editing") //   $completed  $editing  css-  'LI'

अब हम मामलों के नाम संपादित कर सकते हैं ।

7. सर्वर पर डेटा भेजना

ठीक है, हम पहले से ही ब्राउज़र में चीजों को संपादित कर सकते हैं, लेकिन इन परिवर्तनों को सर्वर में भी स्थानांतरित किया जाना चाहिए। हम देखते हैं कि मूल यह कैसे करता है:

परिवर्तन http://todo-backend-express.herokuapp.com/28185 एक निश्चित URL के साथ PATCH पद्धति का उपयोग करके सर्वर को भेजे जाते हैं, जो जाहिर है, प्रत्येक मामले के लिए अद्वितीय है। यह URL सूची में प्रत्येक मामले के लिए सर्वर .url फ़ील्ड में सर्वर द्वारा इंगित किया गया है। अर्थात्, सर्वर पर केस को अपडेट करने के लिए हम सभी की आवश्यकता है। JSON प्रारूप में परिवर्तित डेटा के साथ .url फ़ील्ड में निर्दिष्ट पते पर एक PATCH अनुरोध भेजने के लिए है:

  ,'INPUT.edit' .d("? $editing; !! .title@value") .ui(".title=#.value; (@method`PATCH .url (@Content-type`application/json)@headers (.title):json.encode@body):query") .e("blur","$editing=")

यहां हम एक ही कनवर्टर का उपयोग करते हैं :query , लेकिन अधिक विस्तृत संस्करण में। जब :query को एक साधारण स्ट्रिंग पर लागू किया जाता है, तो इस स्ट्रिंग को URL के रूप में माना जाता है और GET अनुरोध निष्पादित किया जाता है। यदि :query को कोई जटिल ऑब्जेक्ट प्राप्त होता है, तो इस स्थिति में, यह फ़ील्ड्स के अनुरोध के विस्तृत विवरण के रूप में व्यवहार करता है, जिसमें .method , .url , .headers और .body , और उनके अनुसार अनुरोध निष्पादित करता है। यहाँ, अद्यतन करने के तुरंत बाद। .title सर्वर को इस अद्यतन के साथ एक .title अनुरोध .title

लेकिन एक अति सूक्ष्म अंतर है। हमें सर्वर से .url फ़ील्ड मिलता है, यह कुछ इस तरह दिखता है: http://todo-backend-express.herokuapp.com/28185 , अर्थात, http: // प्रोटोकॉल इसमें हार्डकोड किया गया है यदि हमारा क्लाइंट http: // के लिए भी खुला है। तब सब ठीक है। लेकिन अगर क्लाइंट https: // के माध्यम से खुला है, तो एक समस्या उत्पन्न होती है: सुरक्षा कारणों से, ब्राउज़र http-ट्रैफ़िक को https-source से अवरुद्ध करता है।

यह बस हल किया जाता है: यदि आप .url से प्रोटोकॉल को हटाते हैं, तो अनुरोध पेज प्रोटोकॉल के माध्यम से जाएगा। तो चलिए इसे करते हैं: उपयुक्त कनवर्टर - dehttp , और हम इसके माध्यम से .url पास करेंगे। कस्टम कन्वर्टर्स (और अन्य कार्यक्षमता) .FUNC अनुभाग में .FUNC हैं:

  .ui(".title=#.value; (@method`PATCH .url:dehttp (@Content-type`application/json)@headers (.title):json.encode@body):query") ... .FUNC({ convert:{ //  -         dehhtp: url=>url.replace(/^https?\:/,'')//    URL } })

हेडर ऑब्जेक्ट को डिक्शनरी में रखना भी समझ में आता है ताकि इसे अन्य प्रश्नों में इस्तेमाल किया जा सके:

  .ui(".title=#.value; (@method`PATCH .url:dehttp headers (.title):json.encode@body):query") ... .DICT({ todos : "//todo-backend-express.herokuapp.com/", headers: {"Content-type":"application/json"} })

खैर, पूर्ण फेंग शुई के लिए, हम कनवर्टर की एक और उपयोगी संपत्ति का उपयोग करेंगे :query - Content-type:application/json हेडर के अनुसार json में अनुरोध निकाय का स्वचालित एन्कोडिंग। नतीजतन, नियम इस तरह दिखेगा:

  .ui(".title=#.value; (@method`PATCH .url:dehttp headers (.title)):query")

तो, देखो । ठीक है, मामले के नाम अब न केवल ब्राउज़र में, बल्कि सर्वर पर भी बदलते हैं। लेकिन! न केवल मामले का नाम बदल सकता है, बल्कि इसके पूरा होने की स्थिति - completed । इसलिए, इसे सर्वर पर भी भेजना होगा।
आप INPUT.toggle तत्व में वही PATCH अनुरोध जोड़ सकते हैं, (.completed) बजाय (.completed) भेजें।

  ,'INPUT.toggle type=checkbox' .d("#.checked=.completed") .ui("$completed=#.checked; (@method`PATCH .url:dehttp headers (.completed:?)):query")

और आप इस पाथ अनुरोध को "कोष्ठक से बाहर" रख सकते हैं:

  ,'LI'.d("$completed=.completed $editing= $patch=; a!" // $patch - ""   ,'INPUT.toggle type=checkbox' .d("#.checked=.completed") .ui("$patch=($completed=#.checked)") //   $patch  completed ,'LABEL.view' .d("? $editing:!; ! .title") .e("dblclick","$editing=`yes") ,'INPUT.edit' .d("? $editing; !! .title@value") .ui("$patch=(.title=#.value)") //   $patch  title .e("blur","$editing=") ,'BUTTON.destroy'.d("") ) .a("!? $completed $editing") //  $patch  ,   ,   .u("? $patch; (@method`PATCH .url:dehttp headers $patch@):query $patch=")

ये रही बात। प्रतिक्रिया नियम "अप-नियमों" के समूह से संबंधित होते हैं जिन्हें "नीचे से ऊपर तक" निष्पादित किया जाता है - वंशज से माता-पिता तक, स्वयं रूट करने के लिए (यदि आवश्यक हो तो यह क्रम बाधित हो सकता है)। यह कुछ हद तक DOM में पॉप-अप इवेंट्स जैसा है। इसलिए, कई वंशजों के लिए प्रतिक्रिया प्रतिक्रिया के कुछ अंशों को एक सामान्य पूर्वज को सौंपा जा सकता है।

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

हम देखते हैं : अब सर्वर में नाम और स्थिति परिवर्तन दोनों भेजे जाते हैं।

अगले लेख में, यदि आप रुचि रखते हैं, तो मामलों को जोड़ने, हटाने और छानने पर विचार करें। इस बीच, आप dap.js.org/docs पर अंतिम परिणाम और डैप कोड के अन्य उदाहरण देख सकते हैं

क्रिया में डुबकी लगाना। टोडोमेवीसी लेखन। भाग 1