O Backbone.js MVC चौखटे के प्रशंसकों के लिए बहुत सरल और संक्षिप्त है

जावास्क्रिप्ट फ्रेमवर्क Backbone.js के उपयोग के बारे में बहुत कुछ लिखा गया है, लेकिन बहुत सरल और संक्षिप्त नहीं है। मैं इस कमी को ठीक करने की कोशिश करूंगा और वेब एप्लिकेशन डेवलपर्स को सरल, सुलभ और संक्षिप्त रूप में बता सकता हूं कि यह फ्रेमवर्क उनके लिए उपयोगी क्यों है और सामान्य शब्दों में, यह कैसे काम करता है। बैकबोन.जेएस में पेशेवर और विशेषज्ञ: आप समय बर्बाद नहीं कर सकते, यह कहानी शुरुआती लोगों के लिए है। ईमानदार होने के लिए, आपको इस लेख को पढ़ने के लिए एक रेल डेवलपर होना चाहिए, मुझे आशा है कि यह लेख उन सभी के लिए उपयोगी है जो एमवीसी के किसी भी ढांचे के साथ काम करते हैं।



तो, एमवीसी दृष्टिकोण का उपयोग करके एक औसत परियोजना की कल्पना करें। यह कई प्रकार के रिश्तों द्वारा एक-दूसरे से संबंधित कई मॉडल (लगभग 10-15 आमतौर पर) के साथ एक ऑनलाइन स्टोर होने की संभावना है। परियोजना में उचित संख्या में नियंत्रक, विभिन्न आउटपुट डिवाइसों के लिए 2-3 लेआउट, नेमस्पेस / एपीआई / v1 में कई नियंत्रक, बहुत सारे दृश्य और आंशिक वाले होंगे। यह सब मानक के रूप में काम करता है, ब्राउज़र अनुरोध भेजता है, नियंत्रक डेटा नमूने बनाते हैं, उन्हें देखने के लिए anhki भेजते हैं, वे, बदले में, उपयोगकर्ता को ब्राउज़र में भेजे जाते हैं। एक "खोज" फ़ंक्शन है जो एक निश्चित मॉडल के विशिष्ट उदाहरणों को खोजता है, परिणामों के लिए एक दृश्य होता है जिसमें एक लूप होता है जो पेज पर इन पाए गए उदाहरणों का प्रदर्शन बनाता है, यहां तक ​​कि एंड्रॉइड के लिए एक मोबाइल एप्लिकेशन भी है जो एपीआई के माध्यम से आपके सर्वरों के साथ संचार करता है (यह नियंत्रक का अनुरोध करता है,) जिस तरह से namepace'e / api / v1 में प्रतीक्षा करते हैं, वैसे, अक्सर समान 'साधारण' नियंत्रकों की नक़ल करना, केवल एक अलग रूप में जानकारी देना)।

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

तो, वंगी मोड मुझे यह मानने की अनुमति देता है कि आपके पास एक उत्पाद मॉडल है (हमारे पास एक ऑनलाइन स्टोर है, याद है?) और निश्चित रूप से एक प्रबंधक इंटरफ़ेस है जो कुछ मानदंडों के अनुसार उत्पादों की एक सूची प्रदर्शित कर सकता है। प्रबंधक के पास तुरंत आदेश देने के लिए नए आदेशों की संख्या का एक स्टाइलिश संकेतक है, जितनी जल्दी हो सके, देखें कि एक नया आदेश दिखाई दिया है। मुझे लगता है कि यह संकेतक इस तरह से काम करता है: डॉक्यूमेंट.आर्डर () में आपने एक टाइमर बनाया और हर 60 सेकंड में आप / ai / v1 / kolichestvo_zakazov जैसे पते का अनुरोध करते हैं । अच्छी तरह से, या / / एपीआई / v1 / आदेश / नई / गिनती , भाषाविज्ञान के लिए आपके दृष्टिकोण पर निर्भर करता है। टाइमर शुरू होने वाले फ़ंक्शन में, आपके पास jQuery के ajax में लिखित अनुरोध है जो पहले निर्दिष्ट URL पर कुछ डेटा प्राप्त करता है। कुछ क्यों? मुझे नहीं पता, वांग ने मदद नहीं की। एक प्रोग्रामर {ऑर्डर: {नया: 3}} जैसे जवाब में सही जस्सन भेज सकता है, दूसरा सिर्फ नंबर 3 भेज सकता है। तीसरा एक सर्वर साइड में रेंडर कर सकता है और जवाब में एक पूरा html-कोड भेज सकता है जिसे तुरंत डॉक्यूमेंट में सही जगह पर डाला जा सकता है। । सामान्य तौर पर, वांगा यहां मदद नहीं करेंगे, कोई आदेश, कानून और आश्चर्य का अधिकतम स्तर नहीं है। लेकिन सबसे महत्वपूर्ण बात - डेटा, प्राप्त करने के बाद, बस बोलना, खो जाता है। ग्राहक पक्ष ने कुछ प्राप्त किया, इस डेटा के साथ कुछ किया और वे अब आपको कोई लाभ नहीं देंगे।

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

Backbone.js हमें क्या प्रदान कर सकते हैं? सबसे पहले, मेरी राय में, सबसे महत्वपूर्ण बात डेटा का आदेश है, जो कि परिचित MVC के माध्यम से Backbone.js में लागू किया गया है। संक्षेप में यह कैसे होगा:

1. आपके पास एप्लिकेशन में मॉडल हैं। उपयोगकर्ता, उत्पाद, ऑर्डर ... ग्रेट, Backbone.js के साथ आप ग्राहक पक्ष पर इन मॉडलों का वर्णन कर सकते हैं! और ये मॉडल वास्तविक होंगे, आप नए उदाहरण बना सकते हैं, मौजूदा वाले क्षेत्रों को संपादित कर सकते हैं, अनावश्यक हटा सकते हैं। आप किसी भी फ़ंक्शन को नहीं लिख सकते हैं, कुछ जानकारी प्राप्त करने के लिए जिसे बाद में फेंक दिया जाएगा, सर्वर से आदेश वर्ग के उदाहरण प्राप्त करें। शायद आदेश में बहुत सारी अनावश्यक जानकारी होगी, कोई सोचेंगे, केवल मात्रा की आवश्यकता थी! हो सकता है कि। लेकिन JSON में प्रसारित करने के लिए कोई भी मना नहीं करता है केवल ग्राहक की ओर से आवश्यक फ़ील्ड हैं। और आपका काल्पनिक प्रबंधक अचानक देखना चाहता है, आदेशों की संख्या के अलावा, प्रत्येक के योग - और हमने पहले से ही सब कुछ किया है, जानकारी पहले से ही है, बस इसे दिखाएं, ऑब्जेक्ट पहले से ही क्लाइंट पर हैं और सर्वर के साथ सिंक्रनाइज़ हैं। और अगर प्रबंधक इस राशि को मौके पर ही बदलना चाहता है? समस्या नहीं है। यह एक नया घर लिखने के फंक्शन को लिखने की तुलना में कोड में order.save ({: cost => this.input.val (}) लिखने के लिए बहुत अच्छा है। मॉडल URL को जानेंगे कि GET, POST, PUT और DELETE अनुरोध कहां भेजना है और यह स्वयं करेंगे। जब आवश्यक हो, उदाहरण के लिए, product.delete () DELETE को / api / v1 / उत्पादों / 75 (75 इस मॉडल की आईडी है) को भेजेगा।

2. आपके पास एप्लिकेशन में पृष्ठ हैं जहां आपके पास कई समान ब्लॉक होने चाहिए। उत्पाद खोज परिणाम एक उदाहरण हैं। प्रत्येक उत्पाद एक div class = 'product' के अंदर स्थित हो सकता है। सर्वर पर इस पृष्ठ को बनाने के बाद, इस क्षेत्र का कनेक्शन इसमें वर्णित उत्पाद के साथ खो जाता है। यदि आप इस पृष्ठ पर कुछ करना चाहते हैं, तो आपको इस क्षेत्र को यह बताने के लिए एक तरीका ईजाद करना होगा कि वह किस उत्पाद से संबंधित है, उदाहरण के लिए, उत्पाद आईडी के साथ एक डेटा विशेषता देने के लिए और इसे रूपों और अनुरोधों में उपयोग करें ... Backbone.jpg इस तरह के एक बंधन को लागू करता है। इसे व्यू कहा जाएगा और इससे भी अधिक: उत्पाद क्षेत्र उत्पाद परिवर्तनों का जवाब दे सकता है और उदाहरण के लिए खुद को फिर से तैयार कर सकता है। क्षेत्र के अंदर, आपके पास उत्पाद वर्ग की एक आवृत्ति तक पहुंच होगी, बहुत ही एक, और आप ग्राहक के साथ इसके साथ कुछ भी कर सकते हैं। बाद में इसे () सहेजना न भूलें ताकि Backbone.js सर्वर में आपके परिवर्तनों को सहेज सके।

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

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

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

सम्मान के साथ, एक पूर्णतावादी डेवलपर के लिए आपका धन्यवाद।

PS यदि लेख समुदाय के लिए दिलचस्प हो जाता है, तो मैं इस लेख के शुरुआत में वर्णित स्टोर के उदाहरण का उपयोग करके Backbone.js का उपयोग करते हुए बेहतर के लिए क्या बदल जाएगा, इसके साथ एक अगली कड़ी लिखूंगा।