हेलो, हैबर।
यह लेख इस बारे में बात करेगा कि Marionette.js में क्या है और आपकी बाइक नहीं लिखने की संभावना है।
लेख मुख्य रूप से Backbone.js और / या Marionette.js के साथ काम करने वालों के लिए है।
नए परिचितों के लिए, लेख के अंत में पहला, अवलोकन, भाग और लिंक उपयोगी होंगे।
सबसे पहले, आइए याद करें कि Backbone.js क्या है और यह किस चीज से बना है।- Underscore.js - सुविधाजनक, क्रॉस-ब्राउज़र जावास्क्रिप्ट के लिए 80 से अधिक सहायक कार्य।
- Backbone.Events - वस्तुओं के आधार (बाइंड) घटनाओं के लिए प्लस हेल्पर फ़ंक्शन के आधार वर्ग का कार्यान्वयन।
- Backbone.Model - कुंजी / मूल्य विशेषताओं तक पहुंच के साथ डेटा मॉडल। यह सर्वर के साथ लोड / सिंक्रनाइज़ करने के लिए एक तंत्र है।
- Backbone.Collection - अंडरस्कोर.ज से 28 तरीकों के साथ मॉडल के संग्रह। मॉडल की तरह, उनके पास सर्वर के साथ एक डाउनलोड / सिंक्रनाइज़ेशन तंत्र है।
- Backbone.Router और Backbone.history बुनियादी राउटर और पृष्ठ इतिहास हैं। वे संयोग पथ का पता लगाने और नेविगेट करने में सक्षम हैं।
- Backbone.sync - jQuery.ajax का उपयोग करके REST के माध्यम से डेटा लोडिंग / सिंक्रनाइज़ेशन का कार्यान्वयन।
- Backbone.View - दृश्य। बॉक्स से बाहर, वह न तो खुद को प्रस्तुत कर सकता है और न ही डोम में पेड़ लगा सकता है।
भाग एक: Marionette.js
कल्पना कीजिए कि हम Backbone.js पर एक एप्लिकेशन लिख रहे हैं। नतीजतन, हम प्राप्त करते हैं:
- एक बुनियादी दृश्य जो हमारे द्वारा आवश्यक टेम्प्लेट इंजन के लिए समर्थन और हमारे द्वारा आवश्यक रिश्तों को लागू करता है;
- वह टुकड़ा जो दृश्य को प्रस्तुत करता है और इसे DOM ट्री में सम्मिलित करता है;
- एक टुकड़ा जो संग्रह प्रदर्शित कर सकता है;
- वह टुकड़ा जो विचारों के जीवन चक्र के लिए जिम्मेदार है;
- राउटर पर विस्तार;
- वह टुकड़ा जो हमारे आवेदन को लॉन्च करता है;
- एक मॉड्यूलर प्रणाली, चाहे वह स्रोत फ़ोल्डर हो या जावास्क्रिप्ट मॉड्यूल के कार्यान्वयन में से एक;
- सबसे अधिक संभावना कुछ और।
शब्द "बात" का अर्थ आवश्यक कार्यों के विभिन्न वास्तु कार्यान्वयन हो सकता है।
पिछले सम्मेलन में, बैकबोनकॉन्फ़ ने बार-बार यह विचार किया कि बैकबोन.जेएस फ्रेमवर्क लिखने के लिए आधार (कंकाल) है। इसके अलावा, नींव काफी अच्छा है।
Marionette.js पुस्तकालयों में से एक है जो Backbone.js के सभी लचीलेपन का उपयोग करते हुए, वास्तुकला का एक स्केच बनाता है और बड़े वेब अनुप्रयोगों को लिखने के लिए आधार को लागू करता है।
Marionette.js में (चित्रों के साथ) क्या शामिल हैं:
आधार
- वह सब कुछ जो Backbone.js हमें प्रदान करता है, हम Marionette.js में उपयोग कर सकते हैं। अपवाद Backbone.View विचार हैं, यह उन्हें उपयोग करने के लिए कोई मतलब नहीं है, क्योंकि वे DOM ट्री में जोड़ने के लिए Marionette.js तंत्र के साथ संगत नहीं हैं।
की प्रस्तुति
- Marionette.View सभी Marionette.js विचारों के लिए आधार वर्ग है। यह डोम तत्वों और उनकी घटनाओं के साथ काम करने के लिए कार्यों को लागू करता है। प्रत्यक्ष उपयोग के लिए इरादा नहीं है।
- Marionette.ItemView - एक टेम्पलेट पर डेटा प्रदान करने के लिए एक दृश्य। डेटा या तो एक मॉडल या एक संग्रह हो सकता है। यदि डेटा को एक संग्रह द्वारा दर्शाया जाता है, तो इसके सभी तत्व एक सरणी के रूप में टेम्पलेट में स्थानांतरित हो जाएंगे।
- Marionette.CollectionView - दृश्य संग्रह के सभी तत्वों के माध्यम से चलता है और प्रत्येक के लिए ItemView प्रस्तुत करता है। इस प्रकार के दृश्य का अपना कोई टेम्प्लेट नहीं होता है, प्रत्येक ItemViews को CollectionView के "el" कंटेनर में जोड़ा जाता है।
- Marionette.CompositeView संग्रह दृश्य के समान है, साथ ही कंटेनर के लिए इसका अपना टेम्पलेट और डेटा मॉडल भी है। हमें एक आइटम दृश्य को जोड़ने के लिए कंटेनर तत्व को स्पष्ट रूप से निर्दिष्ट करना चाहिए। उपयुक्त, उदाहरण के लिए, "खोज शब्द" का एक मॉडल और पाया गया अभिलेखों का एक संग्रह प्रदर्शित करने के लिए।
- Marionette.Layout - एक दृश्य जो एक आइटम के रूप में डेटा के साथ एक मनमाना टेम्पलेट प्रदर्शित करता है, प्लस एक क्षेत्र प्रबंधक बनाता है, जिसके बारे में नीचे चर्चा की जाएगी।
प्रबंधन देखें
- Backbone.BabySitter - बच्चे के विचारों के प्रबंधन के लिए एक कंटेनर। CollectionView और CompositeView में उपयोग किया जाता है। Marionette.js के बिना Backbone.View के साथ इस्तेमाल किया जा सकता है।
- Marionette.Region - पृष्ठ पर एक क्षेत्र (क्षेत्र) का प्रबंधन। सरल शब्दों में, एक क्षेत्र एक ऑब्जेक्ट है जिसमें एक html तत्व होता है और इसमें अन्य अभ्यावेदन की HTML सामग्री सम्मिलित कर सकता है। एक समय में, एक क्षेत्र केवल एक दृश्य प्रदर्शित करता है। इस क्षेत्र में एक नया दृश्य जोड़ते समय, पुरानी HTML सामग्री हटा दी जाती है और दृश्य वस्तु स्वयं बंद हो जाती है।
- Marionette.RegionManager - क्षेत्रों के एक समूह का प्रबंधन।
- Marionette.Renderer - टेम्पलेट और डेटा से HTML रेंडरिंग का कार्यान्वयन। Marionette.js के सभी दृश्यों में उपयोग किया जाता है।
- Marionette.TemplateCache - आलसी लोडिंग और अंडरस्कोर टेम्पलेट कैश। Marionette.Renderer द्वारा उपयोग किया जाता है। दूसरे टेम्पलेट इंजन का उपयोग करने के लिए, बिल्कुल रेंडरर और / या टेम्प्लेट कैश को फिर से परिभाषित करने की सिफारिश की जाती है।
मॉड्यूल और अनुप्रयोग
- Marionette.Module - मॉड्यूल निर्भरता ट्रैकिंग के लिए अभिप्रेत नहीं हैं और यह किसी भी तरह से एएमडी / कॉमनजस मॉड्यूल के विपरीत, आवेदन की विधानसभा से जुड़े नहीं हैं। Marionette.js मॉड्यूल क्लाइंट-साइड जावास्क्रिप्ट के लिए निम्नलिखित महत्वपूर्ण कार्य करता है: आवेदन के तार्किक भाग को शुरू करना और रोकना, कई फाइलों में एक मॉड्यूल का वर्णन करने की क्षमता वाला एक सुरुचिपूर्ण नाम स्थान।
- Marionette.Application - आवेदन को रूट मॉड्यूल और आधार क्षेत्र प्रबंधक के रूप में वर्णित किया जा सकता है। इसमें सभी मॉड्यूल के लिए संदेश बसों का एक सेट और एक ट्रिगर तंत्र है।
- Marionette.Controller - शाब्दिक अनुवाद: मॉड्यूल, राउटर और विचारों के प्रबंधन के लिए एक सामान्य उद्देश्य वस्तु। मध्यस्थ (मध्यस्थ) पैटर्न लागू करता है। नियंत्रक / मध्यस्थ के बारे में अधिक जानकारी - नीचे।
संदेश बसें
- Application.vent Backbone.Wreqr.EventAggregator का एक वैश्विक उदाहरण है। पब / उप पैटर्न को लागू करता है। सदस्य और प्रकाशक कोई भी संख्या हो सकती है।
- Application.commands Backbone.Wreqr.Commands का एक वैश्विक उदाहरण है। आप केवल एक बार एक विशिष्ट कमांड की सदस्यता ले सकते हैं। यदि टीम को "कलाकार" के निर्माण से पहले भेजा जाता है, तो इसे बनाया जाने पर निष्पादित किया जाएगा।
- Application.reqres Backbone.Wreqr.RequestResponse का एक वैश्विक उदाहरण है। अनुरोध / प्रतिक्रिया पैटर्न लागू करता है। केवल एक ग्राहक अनुरोध को निष्पादित कर सकता है।
बाकी
- Marionette.AppRouter - Marionette.js में राउटर पतले होने चाहिए, हर चीज का "वैश्विक" राउटर नहीं होना चाहिए। राउटर का कार्य वांछित नियंत्रक विधि को कॉल करना है जब पथ मिलान करता है, कोई व्यावसायिक तर्क नहीं।
- Marionette.Callbacks एक आंतरिक कॉलबैक श्रृंखला कॉल सहायक है।
निष्कर्ष: अपनी खुद की रूपरेखा न लिखें, Marionette.js का उपयोग करें।
भाग दो: नियंत्रक / Plectrum
मैं दृढ़ता से आपको ब्रायन मान बैकबोनरेल के सभी 9 घंटे के स्क्रैनास्ट को देखने की सलाह देता हूं। सामग्री में बड़ी संख्या में उपयोगी टुकड़े होते हैं, जिनमें से एक नियंत्रक / मध्यस्थ के उपयोग का विस्तृत विवरण है।
मुख्य विचार: नियंत्रक / मध्यस्थ प्रत्येक दृश्य के जीवन चक्र या तार्किक रूप से संबंधित विचारों के समूह (लेआउट)
को नियंत्रित करता है।
एक विस्तृत उदाहरण: हमें एक सूची प्रदर्शित करने की आवश्यकता है, "Apple" सूची होने दें।
हम एक नया Apple सूची नियंत्रक बना रहे हैं। बदले में, नियंत्रक के पास निम्न कार्य हैं:
- आवश्यक डेटा (संदेश प्रदाता के माध्यम से संदेश बस के माध्यम से) का अनुरोध करें;
- डेटा लोड करने के लिए प्रतीक्षा करें, संभवतः एक डाउनलोड स्पिनर दिखा रहा है;
- "ऐप्पल" सूची के मामले में, संग्रह दृश्य या समग्र दृश्य प्रदर्शित करें;
- प्रदर्शित दृश्य की घटनाओं को सुनें, उदाहरण के लिए, प्रत्येक सेब की रिकॉर्डिंग पर क्लिक;
- यदि आवश्यक हो, वैश्विक संदेश बस में घटनाओं को पुनर्निर्देशित करें;
- प्रस्तुति बंद करते समय, अपने आप को बंद करें;
- जब आप खुद को बंद करते हैं, तो घटनाओं के लिए अपने सभी सब्सक्रिप्शन (बाइंड) को बंद कर दें।
पहले पैराग्राफ के लिए विवरण
"कैसे" का तर्क डेटा प्रदाता से नियंत्रक / मध्यस्थ को हस्तांतरित डेटा की प्रतीक्षा करने के लिए हमें प्रत्येक मामले में उपयोगकर्ता इंटरफ़ेस के लिए सबसे उपयुक्त तरीके से इसे संभालने की अनुमति देता है। उदाहरण के लिए, एक मामले में हम स्पिनर को स्पिन कर सकते हैं और डेटा डिस्प्ले प्राप्त करने के बाद सब कुछ कर सकते हैं, और दूसरे मामले में, पहले खाली दृश्य प्रदर्शित करें, और फिर प्राप्त डेटा के साथ भरें।
पांचवें पैराग्राफ के लिए विवरण
ऐसा लग रहा था कि कोई सीधे इवेंट इवेंट को ग्लोबल इवेंट बस में भेज सकता है। लेकिन नियंत्रक / मध्यस्थ के रूप में परत हमें पूर्ण और प्रॉक्सी घटनाओं के लिए प्रस्तुति की घटनाओं का उपयोग करने की अनुमति देता है जो केवल पूरे आवेदन के लिए आवश्यक हैं। उदाहरण: सेब के मामले में, आप एक उदाहरण के रूप में इस सूची में "हटाएं सेब" बटन और पुष्टि संवाद का हवाला दे सकते हैं ("क्या आप वास्तव में इस सेब को हटाना चाहते हैं?"); नियंत्रक / मध्यस्थ द्वारा संसाधित इन दो घटनाओं के बाद ही, हम वैश्विक बस संदेशों को भेजते हैं कि इस तरह के सेब को हटा दिया जाता है।
निष्कर्ष: एक नियंत्रक / मध्यस्थ जो मध्यस्थ (मध्यस्थ) पैटर्न को लागू करता है, अतुल्यकालिक डेटा की एक कड़ी की भूमिका के लिए उत्कृष्ट है, विचारों और उपयोगकर्ता कार्यों का प्रतिपादन करता है।
संदर्भ और सामग्री: