🤴🏿 👌🏽 🛀🏿 0.6 घटकों का परिचय 😤 ☯️ 🏇🏻

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

सामान्य घटक जानकारी

डर्बी 0.6 में अवयवों को डर्बी टेम्पलेट कहा जाता है जिन्हें एक अलग दायरे में रखा जाता है। चलो ठीक है। मान लें कि हमारे पास इस तरह की एक दृश्य-फ़ाइल है (प्रदर्शन के लिए मैंने उसी टोडो-सूची को चुना है - टोडो-सीवीसी से टू-डू सूची):

index.html

<Body:> <h1>Todos:</h1> <view name="new-todo"></view> <!--    --> <new-todo:> <form> <input type="text"> <button type="submit">Add Todo</button> </form>

दोनों निकाय: और नया-टूडू: यहां टेम्प्लेट हैं, नए-टूडो को एक घटक कैसे बनाएं? ऐसा करने के लिए, इसे डर्बी आवेदन में पंजीकृत करें:

 app.component('new-todo', function(){});

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

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

 <new-todo:> <form on-submit="addNewTodo()"> <input type="text" value="{{_page.new-todo}}"> <button type="submit">Add Todo</button> </form>

 app.proto.addNewTodo = function(){ //... }

यहाँ क्या नुकसान हैं:

1. भरा वैश्विक दायरा (_page)

2. addNewTodo फ़ंक्शन को app.proto में जोड़ा जाता है - एक बड़े अनुप्रयोग में नूडल्स होगा।

यदि आप नए-टूडो को एक घटक बनाते हैं तो यह कैसे होगा:

 <new-todo:> <form on-submit="addNewTodo()"> <input type="text" value="{{todo}}"> <button type="submit">Add Todo</button> </form>

 app.component('new-todo', NewTodo); function NewTodo(){} NewTodo.prototype.addNewTodo = function(todo){ //     "scoped" //     ,   var todo = this.model.get('todo'); //... }

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

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

यदि घटकों को आंतरिक रसोई को छिपाने के लिए डिज़ाइन किया गया है, तो उनके पास किस प्रकार का इंटरफ़ेस है? मापदंडों को कैसे पारित किया जाता है और परिणाम मिलते हैं?

पैरामीटर उसी तरह स्थानांतरित किए जाते हैं जैसे कि एक नियमित टेम्पलेट में विशेषताओं के माध्यम से और एम्बेडेड HTML सामग्री के रूप में (इस पर बाद में)। घटनाओं का उपयोग करके परिणाम लौटाए जाते हैं।

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

index.html

 <Body:> <h1>Todos:</h1> <view name="new-todo" plaeholder="Input new Todo" inputClass="big" on-addtodo="list.add()"> </view> <view name="todos-list" as="list"></view> <new-todo:> <form on-submit="addNewTodo()"> <input type="text" value="{{todo}}" placeholder="{{@plaeholder}}" class="{{@inputClass}}"> <button type="submit">Add Todo</button> </form> <todos-list:> <!--    -->

 app.component('new-todo', NewTodo); app.component('todos-list:', TodosList); function NewTodo(){} NewTodo.prototype.addNewTodo = function(todo){ var todo = this.model.get('todo'); //  ,     // (   ) this.emit('addtodo', todo); } function TodosList(){}; TodosList.prototype.add = function(todo){ //        //  .  ,   //       //    }

आइए इस सब पर चर्चा करें और देखें कि हमने क्या हासिल किया है।

हमारा नया-todo घटक अब 2 मापदंडों को स्वीकार करता है: प्लेसहोल्डर और inputClass और "addtodo" ईवेंट लौटाता है, हम टॉडोस-लिस्ट घटक को इस ईवेंट में रीडायरेक्ट करते हैं, जहां TodosList.prototyp.add इसे प्रोसेस करता है। ध्यान दें कि टॉडोस-लिस्ट घटक का एक उदाहरण बनाते समय, हमने इसे कीवर्ड के रूप में एक उपनाम सूची सौंपी। यही कारण है कि एड-एड्टो हैंडलर में हम list.add () लिखने में सक्षम थे।

इस प्रकार, नया-टूडू पूरी तरह से अलग-थलग है और बाहरी मॉडल के साथ काम नहीं करता है, दूसरी तरफ, टॉडोस-लिस्ट घटक टॉडोस सूची के लिए पूरी तरह से जिम्मेदार है। जिम्मेदारियों को सख्ती से बांटा गया है।

अब घटक को दिए गए मापदंडों पर अधिक विस्तार से ध्यान देना उचित है।

घटक इंटरफ़ेस

यह ध्यान दिया जाना चाहिए कि उन्हें टेम्पलेट्स से घटकों को मापदंडों का हस्तांतरण विरासत में मिला है, इसलिए अधिकांश कार्यक्षमता समान है (जब तक कि अन्यथा नहीं कहा जाता है, मैं टेम्पलेट्स पर उदाहरण दूंगा)।

ध्यान दें कि डर्बी html फाइलों में टेम्प्लेट (और साथ ही घटक) फंक्शन के समान हैं, उनके पास एक घोषणा है जहां टेम्प्लेट स्वयं वर्णित है। और अन्य टेम्पलेटों से इस टेम्पलेट का एक (संभवतः एकाधिक) कॉल भी है।

# टेम्पलेट की घोषणा के लिए सिंटैक्स (घटक) और सामग्री क्या है

 <name: ([element="element"] [attributes="attributes"] [arrays="arrays"])>

तत्व, विशेषताएँ और सरणी विशेषताएँ वैकल्पिक हैं। उनका क्या मतलब है? निम्नलिखित उदाहरणों पर विचार करें:

तत्व गुण

डिफ़ॉल्ट रूप से, घोषणा और टेम्पलेट कॉल कुछ इस तरह दिखते हैं:

(गिरफ्तार होने तक)

 <!--   --> <nav-link:> <!--  $render.url   url  --> <li class="{{if $render.url === @href}}active{{/}}"> <a href="{{@href}}">{{@caption}}</a> </li> <!--     ,   Body: --> <view name="nav-link" href="/" caption="Home"></view>

ऐसा करना हमेशा सुविधाजनक नहीं होता है। कभी-कभी मैं एक टेम्पलेट को संबंधित नाम के साथ दृश्य टैग के माध्यम से नहीं कॉल करना चाहता हूं, लेकिन पारदर्शी रूप से, टेम्पलेट नाम का उपयोग टैग नाम के रूप में करता है। यह तत्व विशेषता के लिए है।

 <!--  ,       nav-link --> <nav-link: element="nav-link"> <li class="{{if $render.url === @href}}active{{/}}"> <a href="{{@href}}">{{@caption}}</a> </li> <!--  nav-link   ,   Body: --> <nav-link href="/" caption="Home"></nav-link>

क्या यह भी संभव है

 <nav-link href="/" caption="Home"/>

इस मामले में, हम टैग के समापन भाग का उपयोग नहीं करते हैं, क्योंकि हमारे पास टैग की सामग्री नहीं है। यह क्या है?

निहित पैरामीटर सामग्री

टेम्प्लेट को कॉल करते समय, हम व्यू टैग का उपयोग करते हैं, या तत्व नाम वाला टैग कुछ इस तरह से होता है:

 <!--  --> <view name="nav-link" href="/" caption="Home"></view> <!--   --> <nav-link name="nav-link" href="/" caption="Home"></nav-link> <!--   --> <nav-link: element="nav-link"> <li class="{{if $render.url === @href}}active{{/}}"> <a href="{{@href}}">{{@caption}}</a> </li>

यह पता चला है कि जब टैग के उद्घाटन और समापन भागों के बीच कहा जाता है, तो आप कुछ सामग्री रख सकते हैं, उदाहरण के लिए, पाठ या किसी तरह का एम्बेडेड HTML। यह अंतर्निहित पैरामीटर सामग्री द्वारा टेम्पलेट के अंदर पारित किया जाएगा। सामग्री का उपयोग करके हमारे उदाहरण में कैप्शन को बदलें:

 <!--  --> <view name="nav-link" href="/">Home</view> <!--   --> <nav-link name="nav-link" href="/">Home</nav-link> <!--    --> <nav-link name="nav-link" href="/"> <span class="img image-home"> Home </span> </nav-link> <!--   --> <nav-link: element="nav-link"> <li class="{{if $render.url === @href}}active{{/}}"> <a href="{{@href}}">{{@content}}</a> </li>

यह बहुत सुविधाजनक है, यह आपको विवरण छिपाने और शीर्ष-स्तरीय कोड को बहुत सरल बनाने की अनुमति देता है।

विशेषताएँ विशेषताएँ और सरणियाँ सीधे इसी से संबंधित हैं।

विशेषताएँ

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

 <widget> <header><--  --></header> <footer><--  --></footer> <body><--  --></body> </widget>

और विजेट टेम्प्लेट के अंदर कुछ जटिल मार्कअप होंगे, जहां हमें हेडर , फुटर और बॉडी के रूप में व्यक्तिगत रूप से इन सभी 3 ब्लॉकों को सम्मिलित करने में सक्षम होना चाहिए।

इसके लिए, विशेषताओं की आवश्यकता है:

 <widget: attributes="header footer body"> <!--   --> <!--   --> {{@header}} <!--   --> <!--   --> {{@body}} <!--   --> {{@footer}} <!--   -->

वैसे, शरीर के बजाय, सामग्री का उपयोग करना काफी संभव होगा, क्योंकि सब कुछ जो विशेषताओं में सूचीबद्ध नहीं है (अच्छी तरह से, और वास्तव में, यहां तक कि सरणियों में) सामग्री में गिर जाता है:

 <Body:> <widget> <h1>Hello<h1> <header><--  --></header> <footer><--  --></footer> <p>text</text> </widget> <widget: attributes="header footer"> <!--   --> <!--   --> {{@header}} <!--   --> <!--   --> {{@content}} <!--    h1  p --> <!--   --> {{@footer}} <!--   -->

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

एरेस विशेषता

हम अपनी ड्रॉप-डाउन सूची बनाते हैं, हम चाहते हैं कि परिणामी टेम्पलेट इस तरह से तर्क ले:

 <dropdown> <option></option> <option class="bold"></option> <option></option> </dropdown>

ड्रॉपडाउन के अंदर मार्कअप काफी जटिल होगा, जिसका अर्थ है कि बस सामग्री हमें सूट नहीं करेगी। विशेषताएँ भी काम नहीं करेंगी, क्योंकि एक सीमा है - केवल एक विकल्प तत्व हो सकता है। हमारे मामले के लिए, सरणियों टेम्पलेट विशेषता का उपयोग आदर्श होगा:

 <dropdown: arrays="option/options"> <!--   --> {{each @options}} <li class="{{this.class}}"> {{this.content}} </li> {{}} <!--   -->

जैसा कि आपने शायद टेम्प्लेट की घोषणा करते समय देखा, 'सरणियाँ = "विकल्प / विकल्प" सेट है - यहाँ दो नाम दिए गए हैं:

1. विकल्प - यह ड्रॉपडाउन के अंदर html तत्व का नाम होगा जिसे कॉल किया जाता है

2. विकल्प - इसे टेम्पलेट के अंदर के तत्वों के साथ सरणी कहा जाएगा, इस सरणी के अंदर के तत्वों को वस्तुओं द्वारा दर्शाया जाएगा, जहां विकल्प के सभी गुण ऑब्जेक्ट के क्षेत्र बन जाएंगे, और इसकी आंतरिक सामग्री सामग्री फ़ील्ड बन जाएगी।

घटक सॉफ्टवेयर

जैसा कि हमने पहले ही कहा था, एक घटक एक घटक में बदल जाता है यदि कोई रचनाकार इसके लिए पंजीकृत हो।

 <new-todo:> <form on-submit="addNewTodo()"> <input type="text" value="{{todo}}"> <button type="submit">Add Todo</button> </form>

 app.component('new-todo', NewTodo); function NewTodo(){} NewTodo.prototype.addNewTodo = function(todo){ var todo = this.model.get('todo'); //... }

घटक के पूर्वनिर्धारित कार्य हैं जिन्हें घटक के जीवन में कुछ बिंदुओं पर बुलाया जाएगा - यह निर्माण और init है, एक 'नष्ट' घटना भी है। यह भी काफी उपयोगी है।

# init

घटक को रेंडर करने से पहले इनिट फ़ंक्शन को क्लाइंट और सर्वर पर दोनों कहा जाता है। इसका उद्देश्य घटक के आंतरिक मॉडल को आरंभीकृत करना है, डिफ़ॉल्ट मान सेट करना है, आवश्यक लिंक (रेफरी) बनाना है।

 //   https://github.com/codeparty/d-d3-barchart/blob/master/index.js function BarChart() {} BarChart.prototype.init = function() { var model = this.model; model.setNull("data", []); model.setNull("width", 200); model.setNull("height", 100); // ... };

# बनाएं

घटक को प्रस्तुत करने के बाद ही ग्राहक को कॉल किया जाता है। ईवेंट हैंडलर्स को रजिस्टर करना, क्लाइंट लाइब्रेरी को कंपोनेंट से जोड़ना, डेटा बदलने के लिए सब्सक्राइब करना, कंपोनेंट के रिएक्टिव फंक्शन लॉन्च करना आदि।

 BarChart.prototype.create = function() { var model = this.model; var that = this; // changes in values inside the array model.on("all", "data**", function() { //console.log("event data:", arguments); that.transform() that.draw() }); that.draw(); };

# घटना 'नष्ट'

घटक नष्ट हो जाने पर कॉल किया जाता है, अंतिम क्रियाओं के लिए आवश्यक होता है: सेट-इन्टरवल, क्लाइंट लाइब्रेरी को अक्षम करना, आदि जैसी चीजों को अक्षम करना।

 MyComponent.prototype.create = function(){ var intervalId = setIterval myFunc, 1000 this.on('destroy', function(){ clearInterval(intervalId); }); }

घटक संचालकों में इसमें क्या उपलब्ध है?

इसमें सभी घटक हैंडलर में निम्न उपलब्ध हैं: मॉडल, ऐप, डोम (init को छोड़कर), सभी एलिमेंट्स टू डोम एलिमेंट्स, और घटक के अंदर बनाए गए घटक, पैरेंट-कंपोनेंट के लिए पैरेंट-रेफरेंस, खैर, निश्चित रूप से, वह सब कुछ जो हम इसमें डालते हैं। घटक निर्माता फ़ंक्शन का प्रोटोटाइप।

मॉडल यहां एक दिए गए दायरे के साथ है। यही है, इस.model के माध्यम से, घटक केवल घटक के मॉडल को ही देखेगा, अगर आपको derby के वैश्विक दायरे तक पहुंचने की आवश्यकता है, तो this.model.root, या this.app.model का उपयोग करें।

एप्लिकेशन के साथ सब कुछ स्पष्ट है, यह एक डर्बी एप्लिकेशन का एक उदाहरण है, इसके माध्यम से बहुत कुछ करना है, उदाहरण के लिए:

 MyComponent.prototype.back = function(){ this.app.history.back(); }

डोम के माध्यम से, आप हैंडलर को DOM इवेंट्स में संलग्न कर सकते हैं (उदाहरण के लिए, एक बार, रिमूवल फ़ंक्शन उपलब्ध हैं), उदाहरण के लिए:

 //  https://github.com/codeparty/d-bootstrap/blob/master/dropdown/index.js Dropdown.prototype.create = function(model, dom) { // Close on click outside of the dropdown var dropdown = this; dom.on('click', function(e) { if (dropdown.toggleButton.contains(e.target)) return; if (dropdown.menu.contains(e.target)) return; model.set('open', false); }); };

इस उदाहरण को पूरी तरह से समझने के लिए, आपको यह ध्यान में रखना होगा कि this.toggleButton और this.menu DOM के लिए एलिमेंट्स हैं जो टेम्पलेट में निम्नानुसार परिभाषित हैं:

यहाँ देखें: github.com/codeparty/d-bootstrap/blob/master/dropdown/index.html#L4-L11

सभी डोम: एक बार, हटाए जाने वाले कार्यों में चार पैरामीटर ले सकते हैं: प्रकार, [लक्ष्य], श्रोता, [उपयोग]। लक्ष्य - वह तत्व जिस पर हैंडलर लटका हुआ है (जिसमें से इसे हटा दिया गया है); यदि लक्ष्य निर्दिष्ट नहीं है, तो यह दस्तावेज़ के बराबर है। शेष 3 पैरामीटर सामान्य addEventListener (प्रकार, श्रोता [, useCapture]) के संगत मापदंडों के समान हैं।

टेम्प्लेट के अंदर प्रमुख तत्वों के लिए उपनाम इस कीवर्ड के रूप में सेट किए गए हैं:

 <main-menu:> <div as="menu"> <!-- ... --> </div>

 MainMenu.prototype.hide = function(){ //   $(this.menu).hide(); }

एक अलग मॉड्यूल में एक आवेदन से घटकों को हटाने

इससे पहले, हमने केवल उन घटकों पर विचार किया जिनके टेम्पलेट पहले से ही एप्लिकेशन के किसी भी HTML-फ़ाइलों के अंदर थे। यदि आपको आवेदन से घटक को पूरी तरह से अलग करने के लिए (और आमतौर पर आवश्यकता होती है) की आवश्यकता होती है, तो निम्नलिखित किया जाता है:

घटक के लिए एक अलग फ़ोल्डर बनाया जाता है, जेएस, एचटीएमएल, सीएसएस फाइलें इसमें रखी जाती हैं (शैली फ़ाइलों के साथ एक छोटी सी विशेषता है), घटक को एप्लिकेशन में पंजीकृत किया गया है app.component फ़ंक्शन का उपयोग करके जिसमें केवल एक पैरामीटर पारित किया गया है - कंस्ट्रक्शन फ़ंक्शन। कुछ इस तरह:

app.component (आवश्यकता ('../ घटकों / ड्रॉपडाउन));

ध्यान दें, पहले, जब घटक टेम्प्लेट पहले से ही एप्लिकेशन के html-files में मौजूद था, तो पंजीकरण अलग था:

app.component ('ड्रॉपडाउन', ड्रॉपडाउन);

आइए कुछ उदाहरण देखें:

tabs / index.js

 module.exports = Tabs; function Tabs() {} Tabs.prototype.view = __dirname; Tabs.prototype.init = function(model) { model.setNull('selectedIndex', 0); }; Tabs.prototype.select = function(index) { this.model.set('selectedIndex', index); };

tabs / index.html

 <index: arrays="pane/panes" element="tabs"> <ul class="nav nav-tabs"> {{each @panes as #pane, #i}} <li class="{{if selectedIndex === #i}}active{{/if}}"> <a on-click="select(#i)">{{#pane.title}}</a> </li> {{/each}} </ul> <div class="tab-content"> {{each @panes as #pane, #i}} <div class="tab-pane{{if selectedIndex === #i}} active{{/if}}"> {{#pane.content}} </div> {{/each}} </div>

लाइन पर विशेष ध्यान दें:

 Tabs.prototype.view = __dirname;

यहां से, डर्बी घटक का नाम लेगा (यह भी टेम्पलेट में ही गायब है, क्योंकि 'इंडेक्स:' का उपयोग वहां किया जाता है)। एल्गोरिथ्म सरल है - पथ का अंतिम खंड लिया जाता है। मान लीजिए कि _dirname अब '/ home / zag2art / work / project / src / Components / tabs' के बराबर है, जिसका अर्थ है कि अन्य टेम्प्लेट में इस घटक को 'tab' के माध्यम से एक्सेस किया जा सकता है, उदाहरण के लिए:

 <Body:> <tabs selected-index="{{widgets.data.currentTab}}"> <pane title="One"> Stuff'n </pane> <pane title="Two"> More stuff </pane> </tabs>

इस घटक का अनुप्रयोग से संबंध इस प्रकार होगा:

 app.component(require('../components/tabs'));

घटकों को अलग npm मॉड्यूल के रूप में डिजाइन करना बहुत सुविधाजनक है, उदाहरण के लिए, www.npmjs.org/package/d-d3-barchart

0.6 घटकों का परिचय