🎅 💺 🗑️ आधार के लिए गाइड। Js भाग 1: प्रारंभ करना, दृश्य, मॉड्यूल, उपकरण 👩🏼‍🍳 🔴 🐏

आधार.जेएस - गति और दक्षता पर ध्यान केंद्रित एकल पृष्ठ वेब अनुप्रयोगों के विकास के लिए जावास्क्रिप्ट ढांचा। शायद वह अभी तक इतना लोकप्रिय नहीं है। लेकिन विभिन्न सम्मेलनों और मीटअप में मेरे भाषणों के लिए धन्यवाद, कुछ ने पहले ही उसके बारे में सुना है और रुचि बन गए हैं। हालांकि, फ्रेमवर्क का उपयोग शुरू करने या इसे समझने के लिए, सबसे ज्यादा एक गाइड की कमी है।

और इसलिए, मेरी इच्छा को मुट्ठी में इकट्ठा करना (ठीक है, कौन सा प्रोग्रामर प्रलेखन लिखना पसंद नहीं करता है?), मैं एक मैनुअल लिखने के लिए बैठ गया। सरल, सस्ती, सुसंगत।

पहला भाग लिखने के बाद, मैंने दूसरों को इसे पढ़ने दिया। उन्होंने मुझे पढ़ा और आश्वस्त किया कि इसे हैबे पर प्रकाशित किया जाना चाहिए। आखिर, इसके उपयोग के उदाहरणों की तुलना में उपकरण के बारे में बेहतर क्या बता सकते हैं?

ट्यूटोरियल का पहला भाग basis.js कि आधार के साथ शुरुआत कैसे करें। basis.js और आप कौन से टूल का उपयोग कर सकते हैं। एक उदाहरण के रूप में, कई सरल अभ्यावेदन बनाए जाएंगे; परियोजना फाइलों की प्रतिरूपकता और संगठन का मुद्दा उठाया जाएगा।

ट्रेनिंग

विकास के लिए, हमें चाहिए:

कंसोल (कमांड लाइन)
स्थानीय वेब सर्वर
ब्राउज़र (अधिमानतः Google Chrome )
आपका पसंदीदा संपादक

प्रारंभ में, हम मानते हैं कि हम प्रोजेक्ट फ़ोल्डर में हैं और यह फ़ोल्डर पूरी तरह से खाली है।

देव सर्वर

आधार के basis.js पर परियोजनाओं को विकास के दौरान विधानसभा की आवश्यकता नहीं होती है। लेकिन उनके काम के लिए एक वेब सर्वर की आवश्यकता होती है। कोई भी वेब सर्वर काम कर सकता है, लेकिन basisjs-tools में शामिल देव सर्वर का उपयोग करना बेहतर है, क्योंकि यह अधिक विकास क्षमता प्रदान करता है।

basisjs-tools - javascript में लिखे गए सांत्वना उपकरणों का एक समूह और node.js तहत चल रहा है। इस किट में एक कलेक्टर, एक देव सर्वर और एक कोड जनरेटर शामिल है। एक नियमित npm मॉड्यूल के रूप में स्थापित होता है:

 > npm install -g basisjs-tools

यदि आप उपकरण विश्व स्तर पर ( -g ध्वज) स्थापित करते हैं, तो basis कमांड कंसोल में उपलब्ध होगा।

आइए देव-सर्वर शुरू करें, इसके लिए हम कंसोल में एक साधारण कमांड निष्पादित करते हैं:

 > basis server

उसके बाद, सर्वर पोर्ट 8000 पर शुरू होगा (इसे --port या -p फ्लैग का उपयोग करके बदला जा सकता है)। अब आप ब्राउज़र में http://localhost:8000 खोल सकते हैं और यह सुनिश्चित कर सकते हैं कि सर्वर काम कर रहा है। फिर भी, वह एक त्रुटि देता है, क्योंकि हमारी परियोजना का फ़ोल्डर अभी भी खाली है। चलो इसे ठीक करते हैं।

सूचकांक फ़ाइल और कनेक्शन के आधार। जेएस

सबसे पहले आपको प्रोजेक्ट में basis.js स्रोत basis.js को जोड़ने की आवश्यकता है। ऐसा करने के लिए, आप या तो परियोजना को रिपॉजिटरी से क्लोन कर सकते हैं, या bower उपयोग कर सकते हैं।

 > bower install basis

अब आवेदन के लिए मुख्य html फ़ाइल बनाते हैं, जो केवल आधार को जोड़ेगी। basis.js - index.html ।

 <!doctype html> <html> <head> <meta charset="utf-8"> <title>My first app on basis.js</title> </head> <body> <script src="bower_components/basisjs/src/basis.js" basis-config=""></script> </body> </html>

अब तक, कुछ भी असामान्य नहीं है। केवल एक चीज जो प्रश्नों का कारण बन सकती है वह है <script> का basis-config गुण।

यह विशेषता <script> खोजने के basis.js कर्नेल basis.js सक्षम करती है जिसके साथ यह जुड़ा था। आधार के स्रोतों के लिए पथ को निर्धारित करने के लिए और इसके मॉड्यूल को पथ की अनुमति देने के लिए यह आवश्यक है।

पहला प्रदर्शन

अब कागज की एक सफेद चादर के रूप में हमारा पेज पूरी तरह से खाली है। आइए इसे अर्थ के साथ भरें और पारंपरिक "हैलो वर्ल्ड" को सामने लाएं।

हम इस मैपिंग के साथ एक दृश्य बनाकर ऐसा करते हैं। यहाँ आपको क्या मिलना चाहिए:

 <!doctype html> <html> <head> <meta charset="utf-8"> <title>My first app on basis.js</title> </head> <body> <script src="bower_components/basisjs/src/basis.js" basis-config=""></script> <script> basis.require('basis.ui'); var view = new basis.ui.Node({ container: document.body, template: '<h1>Hello world!</h1>' }); </script> </body> </html>

पेज को अपडेट करने के बाद, हम कल्पना करेंगे - "हैलो वर्ल्ड!"। गौर कीजिए कि यहां क्या होता है।

सबसे पहले, हमने कहा कि हमें basis.require फ़ंक्शन का उपयोग करके basis.ui मॉड्यूल की basis.require है। यह फ़ंक्शन node.js में require फ़ंक्शन के रूप में लगभग समान है। node.js और मॉड्यूल को उनके नाम या फ़ाइल नाम से कनेक्ट कर सकते हैं। इस मामले में, basis.ui मॉड्यूल का नाम है। जैसा कि हम बाद में देखेंगे, यह फ़ंक्शन किसी भी फ़ाइल को उसके नाम से "कनेक्ट" कर सकता है।

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

दूसरी बात, हमने स्वयं को आधार की एक मिसाल बनाया है। basis.ui.Node क्लास। पारंपरिक View बजाय Node नाम से भ्रमित न हों। तथ्य यह है कि basis.js सभी घटक और विचार basis.js हैं। तो, एक निश्चित ब्लॉक पूरे एकल की तरह लग सकता है, लेकिन वास्तव में इसमें कई नेस्टेड निरूपण (नोड्स) शामिल हो सकते हैं।

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

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

मॉड्यूल

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

आइए एक अलग मॉड्यूल में व्यू कोड डालें। ऐसा करने के लिए, hello.js फ़ाइल बनाएं और उसे ट्रांसफर करें जो <script> में निर्दिष्ट था।

यह पर्याप्त है, और अब तक कोड के साथ और कुछ करने की आवश्यकता नहीं है। यह केवल index.html में मॉड्यूल को जोड़ने के लिए बना हुआ है:

 <!doctype html> <html> <head> <meta charset="utf-8"> <title>My first app on basis.js</title> </head> <body> <script src="bower_components/basisjs/src/basis.js" basis-config=""></script> <script> basis.require('./hello.js'); </script> </body> </html>

यहाँ फिर से, basis.require फंक्शन का basis.require , लेकिन इस बार फ़ाइल का पथ इसके पास जाता है। यह महत्वपूर्ण है कि फ़ाइल पथ " ./ ", " ../ " या " / " से शुरू होता है। इसलिए basis.require स्पष्ट रूप से समझ जाएगा कि मूल्य फ़ाइल का पथ है, न कि मॉड्यूल का नाम। उसी कन्वेंशन node.js पर लागू होता है

हम प्रतिरूपकता से निपटते रहे। उदाहरण के लिए, कोड में मार्कअप हमारे लिए बेकार है। और यदि हां, तो हम एक अलग फ़ाइल में टेम्पलेट विवरण निकाल लेंगे - hello.tmpl । तब दृश्य कोड इस तरह दिखाई देगा:

 basis.require('basis.ui'); var view = new basis.ui.Node({ container: document.body, template: basis.resource('./hello.tmpl') });

सब कुछ पहले जैसा है, लेकिन टेम्पलेट के विवरण के साथ लाइन को कॉल के आधार पर बदल दिया जाता है। यह फ़ंक्शन फ़ाइल के लिए एक "इंटरफ़ेस" बनाता है। यह दृष्टिकोण यह निर्धारित करना संभव बनाता है कि उन्हें डाउनलोड किए बिना कौन सी फ़ाइलों की आवश्यकता है जब तक कि इसके लिए कोई आवश्यकता न हो।

basis.resource द्वारा बनाया गया इंटरफ़ेस अतिरिक्त विधियों के साथ एक फ़ंक्शन है। इस तरह के एक समारोह, या इसके fetch विधि को कॉल करने से फ़ाइल लोड हो रही है। फ़ाइल केवल एक बार डाउनलोड की जाती है, और परिणाम कैश किया जाता है। अधिक विवरण संसाधन (प्रतिरूपकता) लेख में पाया जा सकता है।

एक अन्य बिंदु: वास्तव में, कॉलिंग basis.require('./file.name') बराबर है। basis.resource('./file.name').fetch() ।

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

मॉड्यूल लाभ

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

उदाहरण के लिए, फ़ाइल का नाम __filename वैरिएबल और __filename वैरिएबल से मॉड्यूल स्थान फ़ोल्डर से प्राप्त किया जा सकता है।

लेकिन इससे भी महत्वपूर्ण बात यह है कि स्थानीय require और resource कार्य उपलब्ध हो जाते हैं। वे basis.require और basis.resource के समान कार्य करते हैं, सिवाय इसके कि सापेक्ष फ़ाइल पथ हल हो गए हैं। यदि किसी रिश्तेदार पथ को आधार के लिए पारित किया गया है। basis.require और basis.resource कार्य, तो यह html फ़ाइल के सापेक्ष हल होता है (हमारे मामले में, यह index.html )। उसी समय, require और resource मॉड्यूल के सापेक्ष ऐसे रास्तों की अनुमति देते हैं (यानी इसके __dirname )।

मॉड्यूल में, स्थानीय require और resource कार्यों का उपयोग करना अधिक सुविधाजनक है। इस प्रकार, hello.js कोड थोड़ा सरल है:

 require('basis.ui'); var view = new basis.ui.Node({ container: document.body, template: resource('./hello.tmpl') });

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

वही css , स्थानीयकरण फ़ाइलों और अन्य प्रकार की फाइलों पर लागू होता है। पृष्ठ को पुनः लोड करने के लिए केवल वही परिवर्तन आवश्यक हैं जो html फ़ाइल को बदल रहे हैं और javascript मॉड्यूल को बदल रहे हैं जो पहले से ही आरंभिक हैं।

फ़ाइल अपडेट मैकेनिज्म basisjs-tools से एक देव सर्वर प्रदान करता है। यह एक मुख्य कारण है कि आपको इसका उपयोग क्यों करना चाहिए, और एक नियमित वेब सर्वर नहीं।

आइए कोशिश करें कि यह कैसे काम करता है। hello.css फ़ॉर्म की एक hello.css फ़ाइल बनाएँ:

 h1 { color: red; }

उसके बाद, hello.tmpl टेम्पलेट ( hello.tmpl ) को hello.tmpl बदलें:

 <b:style src="./hello.css"/> <h1>Hello world!</h1>

जैसे ही टेम्प्लेट में परिवर्तन सहेजे जाते हैं, पाठ लाल हो जाएगा। इस मामले में, आपको पृष्ठ को ताज़ा करने की आवश्यकता नहीं है।

हमने टेम्प्लेट में एक विशेष <b:style> टैग जोड़ा है। यह टैग कहता है कि जब इस टेम्पलेट का उपयोग किया जाता है, तो निर्दिष्ट शैली फ़ाइल को पृष्ठ से जोड़ा जाना चाहिए। सापेक्ष पथ टेम्पलेट फ़ाइल के सापेक्ष हल किए जाते हैं। एक टेम्प्लेट में किसी भी प्रकार की स्टाइल फाइलें शामिल हो सकती हैं। हमें शैलियों को जोड़ने या हटाने के बारे में चिंता करने की आवश्यकता नहीं है, रूपरेखा इस बात का ध्यान रखती है।

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

बाइंडिंग और क्रिया

Bindigi आपको अपने DOM टुकड़े में एक दृश्य से मूल्यों को स्थानांतरित करने की अनुमति देता है। अधिकांश टेम्प्लेट इंजन के विपरीत, basis.js टेम्प्लेट में प्रेजेंटेशन प्रॉपर्टीज की सीधी पहुंच नहीं होती है। और वे केवल उन मानों का उपयोग कर सकते हैं जो दृश्य स्वयं टेम्पलेट को प्रदान करता है।

टेम्पलेट के लिए उपलब्ध मानों को सेट करने के लिए, binding संपत्ति का उपयोग basis.ui.Node से विरासत में प्राप्त उदाहरण या वर्ग के विवरण में किया जाता है। मान किसी ऑब्जेक्ट के रूप में सेट किए जाते हैं, जहां कुंजी वह नाम है जो टेम्पलेट में उपलब्ध होगा, और मान वह फ़ंक्शन है जो टेम्पलेट के लिए मूल्य की गणना करता है। इस तरह के फ़ंक्शन टेम्पलेट स्वामी को स्थानांतरित करते हैं, अर्थात, केवल पैरामीटर के रूप में दृश्य, स्वयं। इस तरह आप टेम्पलेट को मूल्य name दे सकते हैं:

 require('basis.ui'); var view = new basis.ui.Node({ container: document.body, name: 'world', template: resource('./hello.tmpl'), binding: { name: function(node){ return node.name; } } });

यह जोड़ने योग्य है कि binding संपत्ति एक ऑटो-एक्स्टेंसिबल संपत्ति है । जब कोई प्रॉपर्टी के लिए कोई नया मान सेट किया जाता है, तो कोई इंस्टेंस या क्लास बनाते समय, नया मान पुराने मानों को जोड़ते हुए और उनसे आगे निकल जाता है। डिफ़ॉल्ट रूप से, basis.ui.Node पहले से ही कई उपयोगी मूल्य हैं जिनका उपयोग हमारे द्वारा परिभाषित name के साथ किया जा सकता है।

name का उपयोग करने के लिए टेम्पलेट ( hello.tmpl ) बदलें।

 <b:style src="./hello.css"/> <h1>Hello, {name}!</h1>

टेम्प्लेट विशेष आवेषण - मार्कर का उपयोग करते हैं। उनका उपयोग टेम्पलेट के कुछ भागों के लिंक प्राप्त करने और मूल्यों को व्यवस्थित करने के लिए किया जाता है। ऐसे आवेषण ब्रेसिज़ में इंगित किए जाते हैं। इस मामले में, हमने सादे पाठ के रूप में मान सम्मिलित करने के लिए {name} जोड़ा।

टेम्प्लेट विवरण अन्य टेम्प्लेट इंजन में विवरण प्रारूप के समान दिखता है। लेकिन उनके विपरीत, टेम्पलेट basis.js DOM नोड्स के साथ काम करता है। इस विवरण के लिए एक तत्व <h1> बनाया जाएगा, जिसमें तीन पाठ नोड्स होंगे " Hello, ", " {name} " और " ! "। पहला और अंतिम स्थिर होगा और उनका पाठ नहीं बदलेगा। लेकिन दृश्य से औसत को औसत से चिपका दिया जाएगा (इसका nodeValue गुण बदल जाएगा)।

लेकिन पर्याप्त शब्द, चलो पृष्ठ को ताज़ा करें और परिणाम देखें!

अब एक फ़ील्ड जोड़ते हैं जिसमें हम नाम दर्ज करेंगे और ताकि यह शीर्षक में प्रतिस्थापित हो। चलो टेम्पलेट के साथ शुरू करते हैं:

 <b:style src="./hello.css"/> <div> <h1>Hello, {name}!</h1> <input value="{name}" event-keyup="setName"/> </div>

टेम्पलेट में एक <input> तत्व जोड़ा गया है। इसकी value विशेषता के लिए, हेडर में उसी बंधन का उपयोग किया जाता है - {name} । लेकिन यह केवल DOM लिखने के लिए काम करता है।

इसके DOM टुकड़े में घटनाओं का जवाब देने के दृश्य के लिए, आवश्यक तत्व में एक विशेषता जोड़ी जाती है, जिसका नाम उपसर्ग " event- " के साथ घटना का नाम है। हम किसी भी घटना पर किसी भी तत्व के लिए एक कार्रवाई का निष्पादन जोड़ सकते हैं। और एक घटना के लिए कई क्रियाएं हो सकती हैं, मुख्य बात यह है कि एक्शन नामों को एक स्थान के साथ अलग करना।

हमारे उदाहरण में, हमने event-keyup जोड़ा, जो keyup इवेंट के keyup होने पर setName कार्रवाई करने के लिए दृश्य को बाध्य करता है। यदि दृश्य में कोई कार्रवाई परिभाषित नहीं है, तो कंसोल में हम इस बारे में एक चेतावनी संदेश देखेंगे और कुछ और नहीं होगा।

अब कार्रवाई का विवरण जोड़ें। ऐसा करने के लिए, action गुण का उपयोग करें। यह binding समान काम करता है, लेकिन केवल कार्यों का वर्णन करता है। action में action घटना वस्तु को एक पैरामीटर के रूप में प्राप्त करते हैं। यह एक मूल घटना नहीं है, लेकिन अतिरिक्त तरीकों और गुणों के साथ इसकी एक प्रति है (मूल घटना अपने event_ संपत्ति में संग्रहीत है)।

यहां देखें अब कैसा दिखेगा ( hello.js ):

 require('basis.ui'); var view = new basis.ui.Node({ container: document.body, name: 'world', template: resource('./hello.tmpl'), binding: { name: function(node){ return node.name; } }, action: { setName: function(event){ this.name = event.sender.value; this.updateBind('name'); } } });

यहां हम event.sender से मान event.sender , और यह वह तत्व है जिसमें घटना है - <input> । मूल्य को पुनर्गणना करने और इसे टेम्पलेट में पास करने के दृश्य के लिए, हमने updateBind विधि को बुलाया।

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

मॉडल की तरह प्रतिनिधित्व, कुंजी-मूल्य के रूप में डेटा स्टोर कर सकते हैं। डेटा data प्रॉपर्टी में संग्रहीत होता है और इसे update विधि का उपयोग करके बदल दिया जाता है। जब data में मान बदलते हैं, तो update ईवेंट फायर हो जाता है। हम इस तंत्र का उपयोग नाम रखने के लिए करते हैं:

 require('basis.ui'); var view = new basis.ui.Node({ container: document.body, data: { name: 'world' }, template: resource('./hello.tmpl'), binding: { name: { events: 'update', getter: function(node){ return node.data.name; } } }, action: { setName: function(event){ this.update({ name: event.sender.value }); } } });

अब updateBind स्पष्ट रूप updateBind नहीं कहा जाता है। लेकिन बाइंडिग का वर्णन करने के लिए अधिक कोड की आवश्यकता थी। सौभाग्य से, बाइंडरों में सहायक होते हैं जो सामान्य स्थितियों के विवरण को छोटा करते हैं। data से फ़ील्ड के साथ सिंक्रनाइज़ करना उनमें data एक है। इस तरह के बंधन को छोटे रूप में लिखा जा सकता है, जैसे:

 require('basis.ui'); var view = new basis.ui.Node({ container: document.body, data: { name: 'world' }, template: resource('./hello.tmpl'), binding: { name: 'data:name' }, action: { setName: function(event){ this.update({ name: event.sender.value }); } } });

उपयोग किया जाने वाला सहायक सिंटैक्टिक शुगर है। यह उस पूर्ण रूप में प्रकट होगा जो पिछले उदाहरण में था। अधिक जानकारी लेख बाइंडिंग में पाया जा सकता है।

याद रखने की मुख्य बात। व्यू टेम्प्लेट के मानों की गणना और पास करता है, इसके लिए binding उपयोग किया जाता है। और टेम्पलेट कार्रवाई से क्रियाओं को देखने के लिए घटनाओं को देखता है और पास करता action । वास्तव में, binding और action एक दृश्य और एक टेम्पलेट के बीच संपर्क action मुख्य बिंदु हैं। उसी समय, प्रस्तुति टेम्पलेट की संरचना के बारे में लगभग कुछ भी नहीं जानता है, और टेम्पलेट - प्रस्तुति की संरचना के बारे में। सभी तर्क ( javascript ) दृश्य के पक्ष में हैं, और प्रदर्शन के साथ काम ( DOM ) टेम्पलेट के किनारे पर है। इसलिए, अधिकांश मामलों में, तर्क और प्रतिनिधित्व का एक पूरा अलगाव प्राप्त किया जाता है।

सूची

तो अब हम जानते हैं कि सरल दृश्य कैसे बनाया जाता है। चलो एक और, थोड़ा और अधिक जटिल बनाएं - एक सूची। ऐसा करने के लिए, निम्न सामग्री के साथ एक नई list.js फ़ाइल बनाएँ:

 require('basis.ui'); var list = new basis.ui.Node({ container: document.body, template: resource('./list.tmpl') }); var Item = basis.ui.Node.subclass({ template: resource('./item.tmpl'), binding: { name: function(node){ return node.name; } } }); list.appendChild(new Item({ name: 'foo' })); list.appendChild(new Item({ name: 'bar' })); list.appendChild(new Item({ name: 'baz' }));

इस मॉड्यूल का कोड hello.js समान है, लेकिन नए निर्माण जोड़े गए हैं।

उन्हें अलग करने से पहले, हम ध्यान दें कि basis.js एक घटक दृष्टिकोण का उपयोग करता है। इसलिए, यदि हम बनाते हैं, उदाहरण के लिए, एक सूची, तो यह एक प्रस्तुति नहीं, बल्कि कई होगी। एक दृश्य ही सूची है। और सूची में प्रत्येक आइटम भी एक दृश्य है। इसलिए हम अलग से सूची के व्यवहार, और सूची के तत्वों के व्यवहार का वर्णन करते हैं। इस दृष्टिकोण के बारे में थोड़ा और विस्तृत, उदाहरण के लिए, रिपोर्ट में वर्णित है "घटक दृष्टिकोण: उबाऊ, निर्बाध, अप्रतिबंधित": स्लाइड और वीडियो ।

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

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

जैसा कि ऊपर उल्लेख किया गया है, प्रेजेंटेशन DOM को व्यवस्थित करने के लिए DOM सिद्धांतों का उपयोग किया जाता है। चिपकाने के लिए, तरीके insertBefore और insertBefore , removeChild हटाने के लिए, और removeChild जगह बदलने के लिए। गैर-मानक तरीके भी हैं: setChildNodes बच्चे के विचारों की एक सूची निर्दिष्ट करने की अनुमति देता है, और clear - एक झपट्टा में सभी बच्चे के विचारों को हटा देता है।

इसलिए, अब आप कोड को थोड़ा आसान बना सकते हैं:

 require('basis.ui'); var list = new basis.ui.Node({ container: document.body, template: resource('./list.tmpl') }); var Item = basis.ui.Node.subclass({ template: resource('./item.tmpl'), binding: { name: function(node){ return node.name; } } }); list.setChildNodes([ new Item({ name: 'foo' }), new Item({ name: 'bar' }), new Item({ name: 'baz' }) ]);

जिस समय दृश्य बनाया जाता है उस समय चाइल्ड नोड्स की सूची भी निर्दिष्ट की जा सकती है। आइए कोशिश करते हैं:

 require('basis.ui'); var Item = basis.ui.Node.subclass({ template: resource('./item.tmpl'), binding: { name: function(node){ return node.name; } } }); var list = new basis.ui.Node({ container: document.body, template: resource('./list.tmpl'), childNodes: [ new Item({ name: 'foo' }), new Item({ name: 'bar' }), new Item({ name: 'baz' }) ] });

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

 basis.ui.Node.prototype.childFactory = function(value){ return new this.childClass(value); };

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

तो हम सभी को निर्धारित करने की जरूरत है childClass। फिर सूची में नए तत्वों को जोड़ना संभव हो जाएगा, न केवल एक उदाहरण बनाना Item, बल्कि कॉन्फ़िगरेशन को भी पारित करना होगा।

 require('basis.ui'); var Item = basis.ui.Node.subclass({ template: resource('./item.tmpl'), binding: { name: function(node){ return node.name; } } }); var list = new basis.ui.Node({ container: document.body, template: resource('./list.tmpl'), childClass: Item, childNodes: [ { name: 'foo' }, { name: 'bar' }, { name: 'baz' } ] });

हम कोड में सुधार जारी रखते हैं। आखिरकार, इसे और भी सरल बनाया जा सकता है।

कक्षा Itemका उपयोग कहीं और नहीं किया जाता है, इसलिए इसे एक चर में सहेजने का कोई मतलब नहीं है। इस क्लास को तुरंत कॉन्फिगर में सेट किया जा सकता है। लेकिन यह सब हम नहीं कर सकते। जब एक नया वर्ग या उदाहरण बनाया जाता है और इसके कुछ गुण एक वर्ग होते हैं, और हम इसके आधार पर एक नया वर्ग बनाना चाहते हैं, तो कक्षा को स्पष्ट रूप से बनाना आवश्यक नहीं है, आप बस किसी वस्तु को नए वर्ग के विस्तार के साथ परिभाषित कर सकते हैं। यह जटिल लगता है, लेकिन, वास्तव में, यह वह सब है जो हमें निर्दिष्ट नहीं करना है basis.ui.Node.subclass, आप बस ऑब्जेक्ट पास कर सकते हैं। और हम प्राप्त करते हैं:

 require('basis.ui'); var list = new basis.ui.Node({ container: document.body, template: resource('./list.tmpl'), childClass: { template: resource('./item.tmpl'), binding: { name: function(node){ return node.name; } } }, childNodes: [ { name: 'foo' }, { name: 'bar' }, { name: 'baz' } ] });

खैर, यह बेहतर है। यह केवल पैटर्न का वर्णन करने के लिए बनी हुई है।

सबसे पहले, एक सूची टेम्पलेट बनाएं list.tmpl:

 <div id="mylist"> <h2>  </h2> <ul{childNodesElement}/> </div>

बिल्कुल सामान्य मार्कअप, सिवाय इसके कि ulएक अपरिचित निर्माण टैग नाम का अनुसरण करता है {childNodesElement}। मिलो, यह भी एक मार्कर है। इसलिए हम कहते हैं कि हम इस तत्व को नाम से संदर्भित करना चाहते हैं childNodesElement। वास्तव में, हमें व्यक्तिगत रूप से अभी तक इस लिंक की आवश्यकता नहीं है। लेकिन यह समझने के लिए एक सूची दृश्य की आवश्यकता है DOMकि बच्चे के नोड्स के टुकड़े कहाँ डालें । यदि आप इसे निर्दिष्ट नहीं करते हैं, तो बच्चे के नोड्स को मूल तत्व (हमारे मामले में, यह <div id="mylist">) में डाला जाएगा ।

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

अब आपको सूची आइटम के लिए एक टेम्पलेट बनाने की आवश्यकता है ( item.tmpl):

 <li> {name} </li>

और अंत में, आपको मॉड्यूल को हमारे पेज से कनेक्ट करना होगा:

 <!doctype html> <html> <head> <meta charset="utf-8"> <title>My first app on basis.js</title> </head> <body> <script src="bower_components/basisjs/src/basis.js" basis-config=""></script> <script> basis.require('./hello.js'); basis.require('./list.js'); </script> </body> </html>

पृष्ठ को ताज़ा करते हुए, हम तीन तत्वों की हमारी अद्भुत सूची देखेंगे।

रचना

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

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

इसके साथ शुरू करने के लिए, हम मॉड्यूल को स्वयं बदल देंगे। सबसे पहले, आपको संपत्ति के उपयोग को हटाने की आवश्यकता है container, क्योंकि उनका स्थान मूल दृश्य निर्धारित करेगा। और दूसरी बात, आपको दृश्य को वापस करने के लिए मॉड्यूल की आवश्यकता है ताकि इसका उपयोग किया जा सके। ऐसा करने के लिए, का उपयोग करें exportsया module.exports(सभी के रूप में node.js)।

अब यह hello.jsइस तरह दिखेगा:

 require('basis.ui'); module.exports = new basis.ui.Node({ data: { name: 'world' }, template: resource('./hello.tmpl'), binding: { name: 'data:name' }, action: { setName: function(event){ this.update({ name: event.sender.value }); } } });

और सूची मॉड्यूल ( list.js) इस प्रकार है:

 require('basis.ui'); module.exports = new basis.ui.Node({ template: resource('./list.tmpl'), childClass: { template: resource('./item.tmpl'), binding: { name: function(node){ return node.name; } } }, childNodes: [ { name: 'foo' }, { name: 'bar' }, { name: 'baz' } ] });

जाहिर है, बहुत कुछ नहीं बदला है।

किसी भी एप्लिकेशन में आमतौर पर एकल प्रविष्टि बिंदु होता है। यह एक ऐसा मॉड्यूल है जो रूट दृश्य बनाता है और मुख्य सेटिंग्स बनाता है। निम्न फ़ाइल बनाएँ app.js:

 require('basis.ui'); new basis.ui.Node({ container: document.body, childNodes: [ require('./hello.js'), require('./list.js') ] });

यहां सब कुछ परिचित होना चाहिए। आप देख सकते हैं कि हमने प्रस्तुति के लिए कोई खाका निर्दिष्ट नहीं किया है। इस स्थिति में, डिफ़ॉल्ट रूप से, खाली उपयोग किया जाएगा <div>। जबकि हम संतुष्ट हैं।

यह खुद को बदलने के लिए बनी हुई है index.html:

 <!doctype html> <html> <head> <meta charset="utf-8"> <title>My first app on basis.js</title> </head> <body> <script src="bower_components/basisjs/src/basis.js" basis-config=""></script> <script> basis.require('./app.js'); </script> </body> </html>

basis.requireएक की जगह दो कॉल आए। लेकिन लिख सकता हूँ नहीं है, और उसके, और विकल्प का उपयोग autoloadकरने के लिए basis-config:

 <!doctype html> <html> <head> <meta charset="utf-8"> <title>My first app on basis.js</title> </head> <body> <script src="bower_components/basisjs/src/basis.js" basis-config="autoload: 'app'"></script> </body> </html>

सहमत हूं, यह बहुत बेहतर हो गया है।

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

उपग्रहों

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

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

यह app.jsउपग्रहों के उपयोग के साथ कैसा दिखेगा :

 require('basis.ui'); new basis.ui.Node({ container: document.body, template: resource('./app.tmpl'), binding: { hello: 'satellite:hello', list: 'satellite:list' }, satellite: { hello: require('./hello.js'), list: require('./list.js') } });

यहां सब कुछ स्पष्ट होना चाहिए, कोड बहुत जटिल नहीं है। यह एक संपूर्ण रिकॉर्ड है, उपग्रहों की स्पष्ट घोषणा और बाइंडरों में उनका उपयोग। लेकिन उसी का संक्षेप में वर्णन किया जा सकता है:

 require('basis.ui'); new basis.ui.Node({ container: document.body, template: resource('./app.tmpl'), binding: { hello: require('./hello.js'), list: require('./list.js') } });

इस मामले में, उपग्रहों को स्पष्ट रूप से निर्धारित किया जाता है। वास्तव में, आप किसी भी उदाहरण को बाध्यकारी मूल्य के रूप में निर्दिष्ट कर सकते हैं basis.ui.Node। इस मामले में, यह स्पष्ट रूप से बाध्यकारी के नाम के साथ एक उपग्रह बन जाएगा।

यह उपग्रहों के लेआउट और स्थान को परिभाषित करने वाले टेम्पलेट का वर्णन करने के लिए बना हुआ है:

 <div> <div id="sidebar"> <!--{list}--> </div> <div id="content"> <!--{hello}--> </div> </div>

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

उपग्रहों, वास्तव में, बहुत अधिक क्षमताएं हैं। उदाहरण के लिए, उन्हें एक विशिष्ट स्थिति के आधार पर स्वचालित रूप से बनाया और नष्ट किया जा सकता है। हम मैनुअल के अन्य भागों में लौट आएंगे। और उनके बारे में अधिक लेख सैटेलाइट्स में पाया जा सकता है ।

परियोजना फ़ाइलों का पुनर्गठन

हमारे प्रयोगों के परिणाम तीन मुख्य विचार, तीन मॉड्यूल और 9 फाइलें थे:

इन अनुप्रयोगों में, दर्जनों और सैकड़ों मॉड्यूल। और इसके लिए औसत आवेदन basis.jsआमतौर पर 800-1200 फाइलें हैं। सभी फ़ाइलों को एक फ़ोल्डर में संग्रहीत करना असुविधाजनक और अनुचित है। आइए फाइलों के स्थान को पुनर्गठन करने का प्रयास करें।

एक फ़ोल्डर बनाएं helloऔर इस मॉड्यूल (यानी hello.js, hello.tmplऔर hello.css) से संबंधित फ़ाइलों को स्थानांतरित करें । और वह फ़ोल्डर भी listजिसे हम स्थानांतरित करेंगे list.js, list.tmplऔर item.tmpl। हमारे लिए जो कुछ भी है वह मॉड्यूल को जोड़ने के लिए रास्तों को बदलना है app.js:

 require('basis.ui'); new basis.ui.Node({ container: document.body, template: resource('./app.tmpl'), binding: { hello: require('./hello/hello.js'), //  list: require('./list/list.js') //   } });

ज्यादा कुछ नहीं बदलना होगा। आप यह सुनिश्चित कर सकते हैं कि सब कुछ पहले की तरह काम करता है, लेकिन फ़ाइल संरचना अब इस प्रकार है:

यह बुरा नहीं दिखता है, लेकिन एप्लिकेशन की फ़ाइलें और फ़ोल्डर्स अन्य उद्देश्यों के लिए फ़ाइलों और फ़ोल्डरों के साथ मिश्रित होते हैं। इसलिए, बेहतर होगा कि हम सभी एप्लिकेशन स्रोत फ़ाइलों को एक अलग फ़ोल्डर में रखें। एक फ़ोल्डर बनाएँ srcऔर को छोड़कर सभी फ़ाइलों और फ़ोल्डरों के लिए रखा bower_componentsऔर index.html। उसके बाद, आपको एक रास्ता तय करना होगा index.html:

 <!--  --> <script src="bower_components/basisjs/src/basis.js" basis-config="autoload: 'app'"></script> <!--  --> <script src="bower_components/basisjs/src/basis.js" basis-config="autoload: 'src/app'"></script>

फ़ाइल संरचना इस तरह दिखनी चाहिए:

यदि आप सार्वभौमिकरण के मार्ग का अनुसरण करते हैं, तो आप फ़ाइलों को व्यवस्थित कर सकते हैं, उदाहरण के लिए, इस तरह:

इसलिए बच्चे के मॉड्यूल एक फ़ोल्डर में स्थित हैं module। मुख्य javascriptमॉड्यूल फ़ाइल कहा जाता है index.js। टेम्पलेट और उनसे जुड़ी सभी चीजें (शैलियाँ, चित्र आदि) एक फ़ोल्डर में स्थित हैं template। यह इस समय सबसे लगातार परियोजना प्रबंधन संरचना है।

ऐसा संगठन मॉड्यूल को स्थानांतरित करना आसान बनाता है, दोनों ही परियोजना के भीतर और कई परियोजनाओं के ढांचे के भीतर। मॉड्यूल को अलग-अलग पैकेज (पुस्तकालयों) में रखना या उनसे पुन: प्रयोज्य घटक बनाना आसान हो रहा है। किसी मॉड्यूल को किसी प्रोजेक्ट से निकालना या किसी अन्य कार्यान्वयन के साथ प्रतिस्थापित करना भी मुश्किल नहीं है।

बेशक, आप अपनी खुद की फ़ाइल संरचना के साथ आ सकते हैं, जैसा कि आपको सबसे अच्छा लगता है। कोई भी आपको इस तक सीमित नहीं करता है।

आप देख सकते हैं कि हमने एक साथ कई फाइलें स्थानांतरित कीं, लेकिन आगे बढ़ने के बाद हमें केवल एक ही फाइल में एक स्थान पर परिवर्तन करना पड़ा। ऐसा आमतौर पर होता है। यह मुख्य लाभ है जो रिश्तेदार पथ प्रदान करते हैं।

अंतिम परिणाम यहां पाया जा सकता है ।

उपकरण

जैसे-जैसे एप्लिकेशन बढ़ता है, फाइलों की संख्या और इसकी जटिलता बढ़ती है। इसे विकसित करना आसान बनाने के लिए, आपको उपकरण की आवश्यकता होती है। हम basis.js: दो सहायक उपकरण है devpanelऔर प्लगइन Google Chrome।

devpanel- यह बटन वाला एक छोटा पैनल है जिसे आप ड्रैग और ड्रॉप कर सकते हैं। यह इस तरह दिखता है:

इसे कनेक्ट करने के लिए, आपको इस तरह के कॉल को जोड़ने की जरूरत है, जो मुख्य मॉड्यूल में सबसे अच्छा है ( app.js):

 /** @cut */ require('basis.devpanel');

पृष्ठ को पुनः लोड करने के बाद, एक पैनल दिखाई देना चाहिए। यहां एक विशेष टिप्पणी का उपयोग किया जाता है /** @cut */, यह आपको विधानसभा के दौरान लाइनों को काटने की अनुमति देता है। हमें यह पैनल उपयोगकर्ताओं को दिखाने की आवश्यकता नहीं है, है ना?

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

से Google Web Storeयहाँ प्लगइन स्थापित किया गया है । यह अपने काम के लिए आवश्यक है , क्योंकि यह काम करने के लिए एक एपीआई प्रदान करता है । प्लगइन प्रदान करता है:devpanelbasis.js

स्थानीयकरण शब्दकोशों को देखना और संपादित करना
टेम्पलेट्स और शैलियों को देखना और संपादित करना
परियोजना में समस्याओं की सूची जिसे कलेक्टर ने खोजा
आवेदन फाइल ग्राफ कलेक्टर के रूप में इसे देखता है

यह हमारा आवेदन कलेक्टर की आंखों से दिखता है:

सभा

विकास प्रक्रिया में, विधानसभा की कोई आवश्यकता नहीं है, सब कुछ उसी तरह काम करता है। फ़ाइलों की संख्या और उनके आकार को कम करने के लिए प्रोजेक्ट को प्रकाशित करने के लिए केवल असेंबली की आवश्यकता है। ऐसा करने के लिए, से कलेक्टर का उपयोग करें basisjs-tools।

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

कलेक्टर स्वतंत्र रूप से जुदा करने और परियोजना की संरचना को समझने की कोशिश करता है। वह व्यावहारिक रूप से कुछ भी विशेष रूप से समझाने की आवश्यकता नहीं है। आखिरकार, आप कैसे जानते हैं कि कहां और क्या जुड़ा हुआ है और उपयोग किया जाता है? आप स्रोत खोलें, पढ़ें और समझें। इस तरह से कलेक्टर काम करता है basisjs-tools।

सबसे पहले, यह एक इनपुट htmlफ़ाइल प्राप्त करता है (हमारे मामले में index.html)। उन्होंने कहा कि विश्लेषण करती है यह पाता है टैग <script>, <link rel="stylesheet">, <style>और अन्य। समझ में आता है कि कौन सी फाइलें जुड़ी हुई हैं। फिर वह इन फ़ाइलों का विश्लेषण करने के लिए आगे बढ़ता है, उनमें निर्माण करता है जो अन्य फ़ाइलों को जोड़ता है (उदाहरण के लिए, javascriptकॉल में basis.require, basis.resourceऔर अन्य, और css- @import,,url(..)आदि)। तो, सभी फ़ाइलों को पुन: प्रसंस्करण, कलेक्टर अनुप्रयोग ग्राफ बनाता है। उसके बाद, वह लिंक का विश्लेषण करता है, फाइलों का पुनर्निर्माण करता है और उनका अनुकूलन करता है। और उसके काम का नतीजा एक अलग फ़ोल्डर में रखा जाता है, बहुत कम फाइलों के रूप में।

चलो एक साथ एक परियोजना डालते हैं। आपको बस एक साधारण कमांड निष्पादित करना है:

 > basis build

वह सब है।असेंबली का परिणाम तीन फाइलें होगा index.html, script.jsऔर style.cssएक फ़ोल्डर में स्थित होगा build। ये तीन फाइलें हमारा असेंबल किया हुआ एप्लिकेशन हैं। असेंबली के बाद आपको फ़ोल्डर की सामग्री buildको सर्वर पर कॉपी करना होगा। आवेदन करने के लिए सभी आवश्यक फाइलें इसमें होंगी।

डिफ़ॉल्ट रूप से, कलेक्टर मजबूत अनुकूलन नहीं करता है, लेकिन केवल सभी प्रोजेक्ट फ़ाइलों को ढूंढता है, उन्हें जोड़ता है और लिंक करता है। अनुकूलन लागू करने के लिए, झंडे का उपयोग करना आवश्यक है, जिसकी एक सूची कमांड पर सहायता प्राप्त करके प्राप्त की जा सकती है build:

 > basis build --help

उदाहरण के लिए, इस तरह के हटाने के कोड और संपीड़न डिबगिंग के रूप में सबसे आम अनुकूलन javascriptऔर cssध्वज को निर्दिष्ट करके किया जा सकता है --pack(या इसके लघु संस्करण -p):

 > basis build --pack

यहाँ हम इस कमांड को निष्पादित करके कंसोल में देखेंगे:

जैसा कि आप देख सकते हैं, कोडांतरक बहुत काम करता है। और यदि आप टीम में ध्वज का उपयोग करते हैं --verbose, तो आप इसके सभी कार्यों को विस्तार से देख सकते हैं। लेकिन हमें उसकी परवाह नहीं करनी चाहिए। आखिरकार, हमारा मुख्य कार्य निर्माण करना नहीं है, बल्कि एप्लिकेशन बनाना और शांत चीजें करना है।

निष्कर्ष

इसलिए, हमने एप्लिकेशन के विकास के मुख्य चरणों की जांच की basis.js, विचारों को बनाने और परियोजना फाइलों को व्यवस्थित करने के लिए विभिन्न विकल्पों की कोशिश की। बचे हुए ज्ञान से बाकी मैनुअल की खोज करने में मदद मिलेगी।

अगला भाग डेटा के साथ काम करने के लिए तंत्र और विचारों के साथ संयोजन में उनके उपयोग पर चर्चा करेगा।

यदि आपको कोई गलती, अशुद्धि या लेख में सुधार करने का तरीका पता है - मुझे हैबरपोस्ट पर लिखें। यह लेख GitHub पर भी उपलब्ध है , आप PR कर सकते हैं और मैं ध्यान से यहाँ संपादन स्थानांतरित करूँगा।

ताकि आपको खोज इंजन को पीड़ा न हो, मैं इस विषय पर उपयोगी लिंक की एक सूची देता हूं:

GitHub रिपॉजिटरी: फ्रेमवर्क , टूल्स , प्लगइन और डॉक्यूमेंटेशन
फ्रेमवर्क साइट
ब्लॉग
चहचहाना
दिखाना
इंटरएक्टिव दौरे
कुछ प्रस्तुतियों के स्लाइड

किसी भी प्रश्न, आलोचना, समर्थन और मदद का स्वागत है, जो भी व्यक्त किया गया है :)

आधार के लिए गाइड। Js भाग 1: प्रारंभ करना, दृश्य, मॉड्यूल, उपकरण