🚲 🥜 ✏️ डर्बी.जर्स वे ऑफ द वारियर 👨🏿‍🚀 🤦🏻 🤽

हम अपने रूब्रिक "डर्बी के बिना एक दिन भी नहीं" जारी रखते हैं। आज हम शुरू करेंगे (अंत में!) कोड लिखने के लिए और Derby.js के मूल बिंदुओं पर विचार करें। आपको यह भी पता चलेगा कि डर्बी प्रोग्रामर आमतौर पर अकेले क्यों होते हैं, जबकि अन्य चौखटों का उपयोग करने वाले उनके खुशमिजाज सहयोगी एक मज़ेदार दोस्ताना टीम में और समान समय सीमा के साथ इसी तरह की परियोजनाओं पर काम करते हैं।

यहाँ पढ़े गए वातावरण को कैसे कॉन्फ़िगर करें ।

आइए आवेदन लेआउट बनाने और चलाने से शुरू करें:

derby bare habr cd habr npm start

हम ब्राउज़र में टाइप करते हैं http: // localhost: 3000 / ।

हम शिलालेख को देखते हैं।
बस क्या हुआ? आपका अनुरोध सर्वर पर गया, जहां इसे सभी कनेक्ट मिडलवेयर द्वारा /lib/server/index.js से बदले में संसाधित किया गया था:

 .use(app.router())

एप्लिकेशन क्लाइंट एप्लिकेशन का राउटर क्या है और यहां /lib/app/index.js रूप में स्थित है:

 app.get('/', function(page) { page.render(); });

यहां पथ '/' के लिए हम खाका / साक्षात्कार /app/index.html से html उत्पन्न करते हैं। क्यों बिल्कुल index.html? यह डिफ़ॉल्ट रूप से है। आप इस तरह लिख सकते हैं, कुछ भी नहीं बदलेगा:

 app.get('/', function(page) { page.render('index'); });

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

 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style id="$_css"></style> </head> <!--$_page--> <body> Bare <!--$$_page--> <script defer="" async="" src="/derby/lib-app-index.js"></script> </body> </html>

हम क्या देखते हैं? शीर्षक - खाली। कोई स्टाइल नहीं हैं। सिर भी लगभग खाली है। जैसी की उम्मीद थी। लेकिन शरीर में कुछ निहित है।
शैलियों को इनलाइन और अलग फ़ाइल क्यों नहीं है? नैट ने कहीं लिखा है कि जब उन्होंने Google खोज पर काम किया था, तो उन्होंने वहां परीक्षणों का एक समूह बनाया और निष्कर्ष निकाला कि अधिकांश इनलाइन स्क्रिप्ट में, शैलियाँ एक ही फ़ाइल की तुलना में तेज़ी से लोड होती हैं, इसलिए / शैलियों फ़ोल्डर से सभी शैलियों को इनलाइन लोड किया जाता है। हेड सेक्शन में आपकी शैलियों के लिंक जोड़ने से कुछ भी नहीं रोकता है।
स्क्रिप्ट /derby/lib-app-index.js सिर्फ हमारा क्लाइंट एप्लिकेशन है, जो लोड होते ही कनेक्ट हो जाएगा और फिर सभी HTML पीढ़ी पहले से ही क्लाइंट पर आ जाएगी।
- ये डर्बी टेम्पलेट इंजन के सर्विस टैग हैं। उनका उपयोग यह सुनिश्चित करने के लिए किया जाता है कि जब डायनामिक रूप से HTML और मॉडल के बीच डेटा लिंक करते समय, मॉडल बदलते समय, पूरे पृष्ठ को ताज़ा न करें, लेकिन केवल html के भाग को अपडेट करें। इस स्थिति में, जब राउटर चालू हो जाता है, केवल बॉडी सेक्शन ओवरलोड हो जाएगा, क्योंकि अन्य बहुत आलसी थे, सेट नहीं थे और वे सभी पृष्ठों के लिए समान हैं।

आप टेम्प्लेट (साथ ही शैलियों) में पाठ को बदल सकते हैं और आपको ब्राउज़र में तुरंत परिवर्तन दिखाई देंगे। यह किसी भी तरह के डायनेमिक डेटा सिंक्रोनाइज़ेशन से संबंधित नहीं है। यह डेवलपर की सुविधा के लिए है। यदि आप html और css बदलते हैं, तो यह स्वचालित रूप से संकलित किया जाता है, ग्राहक को डाउनलोड किया जाता है और पुराने के लिए प्रतिस्थापित किया जाता है। यदि आप js बदलते हैं, तो एप्लिकेशन पूरी तरह से पुनरारंभ हो जाता है।

आइए डेटा से दृश्य को अलग करते हैं। डर्बी में ऐसा करने के दो तरीके हैं। संदर्भ से शुरू करते हैं। यह एक ऐसी वस्तु है जिसे हम अगले तर्क के साथ जोड़ सकते हैं page.render () और वह डेटा जिससे हम html में प्रदर्शित कर सकते हैं।

 app.get('/', function(page) { page.render({text: 'text from Context'}); });

 <Body:> {{text}}

टेम्पलेट में डबल {{}} कोष्ठक का मतलब है कि दृश्य गतिशील रूप से डेटा से जुड़ा नहीं है। टेम्पलेट इंजन डेटा या HTML परिवर्तनों की निगरानी नहीं करता है। संदर्भ के लिए यह आवश्यक नहीं है, क्योंकि संदर्भ एक साधारण जेएस-ऑब्जेक्ट है और इसमें बदलाव नहीं होता है, इसके संबंध में, डेटा (संदर्भ) को आउटपुट करने की इस पद्धति का उपयोग काफी सीमित है और इसका उपयोग, शायद, केवल कुछ स्थैतिक पृष्ठों के लिए किया जाता है। मॉडल ऑब्जेक्ट का उपयोग करते समय डेटा के साथ काम करने की सभी शक्ति दिखाई देती है।

मॉडल के बारे में पहले से ही कुछ लिखा हुआ है, ताकि दोहराया न जाए।
मॉडल कहां से लाएं? कई तरीके हैं (यह निर्भर करता है कि आप क्लाइंट पर हैं या सर्वर पर), लेकिन राउटर में यह दूसरा तर्क (पेज के बाद) के साथ आता है और यह इस स्थिति में हमारे लिए बहुत सुविधाजनक है:

 app.get('/', function(page, model) { page.render(); });

आइए इसमें डेटा डालते हैं:

 app.get('/', function(page, model) { model.set('_page.text', 'text in model'); page.render(); });

_page.text उस मॉडल में पथ है जहाँ हमारा पाठ झूठ होगा। Json ऑब्जेक्ट इससे मेल खाती है। इस मामले में:

 var obj = model.get('_page'); obj === {text: 'text in model'}

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

 <Body:> {{_page.text}}

आइए डेटा और HTML के बीच एक गतिशील लिंक बनाने का प्रयास करें:

 <Body:> <input type="text" value={_page.text} /> {_page.text}

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

ठीक है, क्या लगता है जैसे अभी तक कुछ भी जटिल नहीं है? कोड की 3 लाइनें? कहीं गंभीर तो नहीं?
चलो एक बहुत गंभीर बात करते हैं! अब हम एक वेब एप्लिकेशन बनाएंगे जिसके क्लाइंट एक-दूसरे के साथ सिंक्रोनाइज़ करेंगे। हम एक क्लाइंट पर html बदलते हैं, इस क्लाइंट का डेटा डायनामिक रूप से बदलता है, फिर यह डेटा एक सर्वर पर भेजा जाता है, जहां पर रेजोल्यूशन रिजॉल्यूशन एल्गोरिदम को ट्रिगर किया जाता है। ऐसे क्लाइंट्स भी हैं, जिन्हें इस डेटा को सब्सक्राइब किया जाता है और आखिरकार, डेटा को उन सभी क्लाइंट्स के पास भेजा जाता है, जहां वे बदल जाते हैं एचटीएमएल। क्या यह फिट होगा? अपने पसंदीदा (डर्बी से पहले) ढांचे पर इसे लिखने में कितना समय लगता है? कोड की कितनी लाइनें?

 app.get('/', function(page, model) { model.subscribe('page.text', function(err) { if (!model.get('page.text')) { model.set('page.text', 'text in model'); } page.render(); }) });

 <Body:> <input type="text" value={page.text} /> {page.text}

क्या वह सब है? o_O खैर, सामान्य तौर पर, हाँ। खोलें http: // localhost: 3000 / कई ब्राउज़र विंडो में और चारों ओर खेलते हैं।

page.text एक सुदूर पथ है। स्थानीय पथ के विपरीत, यह डेटाबेस को इंगित करता है। इस मामले में, हम एक पेज संग्रह और आईडी टेक्स्ट के साथ एक ऑब्जेक्ट बनाते हैं। वास्तविक जीवन में, दूरस्थ पथ इस तरह दिखते हैं: 'Users.8ddd02f1-b82d-4a9c-9253-fe5b3b86ef41.name', 'customers.8ddd02f1-b4d-4a9c-9253-fe5b3b86ef41.properties.isLead', products 'उत्पाद।' 4a9c-9253-fe5b3b86ef41.prices.1.value '।
model.subscribe - यह है कि हम पथ 'page.text' में डेटा के लिए अपने ग्राहक की सदस्यता कैसे लेते हैं। डेटाबेस में इस डेटा को बदलते समय, सर्वर हमें इस डेटा का एक नया संस्करण भेजेगा।

स्रोत :-)
याद रखें कि एनपीएम इंस्टॉल करें

Derby.js द्वारा सामग्री

डर्बी.जर्स वे ऑफ द वारियर

More articles: