javascript - Backbone.js का उद्देश्य क्या है?




jquery (10)

मैंने अपनी साइट http://documentcloud.github.com/backbone से backbone.js की उपयोगिता को समझने की कोशिश की, लेकिन मुझे अभी भी बहुत कुछ पता नहीं लगा सका।

क्या कोई मेरी मदद कर सकता है कि यह कैसे काम करता है और यह बेहतर जावास्क्रिप्ट लिखने में सहायक कैसे हो सकता है?


बैकबोन है ...

... घटकों की एक बहुत छोटी लाइब्रेरी जिसका उपयोग आप अपने कोड को व्यवस्थित करने में मदद के लिए कर सकते हैं। यह एक जावास्क्रिप्ट फ़ाइल के रूप में पैक आता है। टिप्पणियों को छोड़कर, इसमें वास्तविक जावास्क्रिप्ट की 1000 से कम पंक्तियां हैं। यह समझदारी से लिखा गया है और आप पूरी चीज को कुछ घंटों में पढ़ सकते हैं।

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

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

बैकबोन के लिए है ...

... जावास्क्रिप्ट में संरचना जोड़ना।

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

  1. मैं अपना डेटा कहां स्टोर करूं?
  2. मैं अपने कार्यों को कहां रखूंगा?
  3. मैं अपने कार्यों को एकसाथ कैसे तार दूंगा, ताकि उन्हें एक समझदार तरीके से बुलाया जा सके और स्पेगेटी की ओर न आएं?
  4. मैं इस कोड को विभिन्न डेवलपर्स द्वारा कैसे बनाए रख सकता हूं?

बैकबोन आपको इन सवालों के जवाब देने का प्रयास करता है:

  • डेटा और डेटा के डेटा का संग्रह करने में आपकी मदद के लिए मॉडल और संग्रह।
  • दृश्य, आपके डेटा को बदलने पर आपके DOM को अपडेट करने में आपकी सहायता के लिए।
  • एक घटना प्रणाली ताकि घटक एक-दूसरे को सुन सकें। यह आपके घटकों को डी-युग्मित रखता है और स्पेगेटिफिकेशन को रोकता है।
  • समझदार सम्मेलनों का एक न्यूनतम सेट, इसलिए डेवलपर्स एक ही कोडबेस पर एक साथ काम कर सकते हैं।

हम इसे एक एमवी * पैटर्न कहते हैं। मॉडल, दृश्य और वैकल्पिक अतिरिक्त।

रीढ़ की हड्डी हल्की है

प्रारंभिक उपस्थिति के बावजूद, बैकबोन शानदार रूप से हल्का है, यह शायद ही कभी कुछ भी करता है। यह क्या करता है बहुत उपयोगी है।

यह आपको छोटी वस्तुओं का एक सेट देता है जिसे आप बना सकते हैं, और जो घटनाओं को उत्सर्जित कर सकते हैं और एक-दूसरे को सुन सकते हैं। उदाहरण के लिए आप टिप्पणी का प्रतिनिधित्व करने के लिए एक छोटी वस्तु बना सकते हैं, और फिर ब्राउज़र में किसी विशेष स्थान पर टिप्पणी के प्रदर्शन का प्रतिनिधित्व करने के लिए एक छोटी टिप्पणी देखें वस्तु।

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

कोड लिखने का यह तरीका आपको परेशान होने से बचाने में मदद करता है भले ही आपका कोडबेस कई इंटरैक्शन के साथ बहुत बड़ा हो।

मॉडल के

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

डेटा गुण इस तरह दिखते हैं:

<p data-username="derek" data-age="42"></p>

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

जब आपका मॉडल अपडेट होता है, तो यह एक घटना को फायर करता है। आपके पास उस विशेष वस्तु से जुड़ा एक दृश्य हो सकता है। दृश्य मॉडल परिवर्तन घटनाओं के लिए सुनता है और खुद को फिर से प्रस्तुत करता है।

दृश्य

बैकबोन आपको उन ऑब्जेक्ट्स प्रदान करता है जो डोम से बात करते हैं। सभी कार्य जो डोम में हेरफेर करते हैं या डीओएम कार्यक्रमों को सुनते हैं, यहां जाते हैं।

एक दृश्य आम तौर पर एक रेंडर फ़ंक्शन लागू करता है जो पूरे दृश्य को रीडाव करता है, या संभवतः दृश्य का हिस्सा। रेंडर फ़ंक्शन को लागू करने का कोई दायित्व नहीं है, लेकिन यह एक आम सम्मेलन है।

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

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

इसी तरह, जब आप किसी फॉर्म में टाइप करते हैं, तो आपका दृश्य मॉडल ऑब्जेक्ट अपडेट कर सकता है। उस मॉडल को सुनकर हर दूसरे दृश्य को फिर से अपना रेंडर फ़ंक्शन कॉल किया जाएगा।

यह हमें चिंताओं का एक साफ अलगाव देता है जो हमारे कोड को साफ और साफ रखता है।

रेंडर समारोह

आप फिट बैठने के तरीके में अपने रेंडर फ़ंक्शन को कार्यान्वित कर सकते हैं। मैन्युअल रूप से डोम को अपडेट करने के लिए आप यहां कुछ jQuery डाल सकते हैं।

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

संग्रह

आपके पास संग्रहों तक पहुंच है जो मॉडलों की सूचियों को संग्रहित करती है, इसलिए एक todoCollection todo मॉडल की एक सूची होगी। जब कोई संग्रह किसी मॉडल को प्राप्त करता है या खो देता है, तो उसका ऑर्डर बदलता है, या संग्रह अद्यतन में एक मॉडल बदलता है, पूरा संग्रह एक ईवेंट को सक्रिय करता है।

एक संग्रह संग्रह को सुन सकता है और संग्रह अद्यतन होने पर खुद को अपडेट कर सकता है।

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

और घटनाएं इसे एक साथ बांधने के लिए

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

shoppingCartView.listenTo(shoppingCart, "add", shoppingCartView.render);

बेशक, अन्य ऑब्जेक्ट शॉपिंग कार्ट को भी सुन सकते हैं, और अन्य चीजें जैसे अपडेट अपडेट कर सकते हैं, या स्थानीय स्टोरेज में राज्य को बचा सकते हैं।

  • दृश्य मॉडल सुनते हैं और मॉडल बदलते समय प्रस्तुत करते हैं।
  • दृश्य संग्रह में एक आइटम बदलते समय संग्रहों को सुनते हैं और एक सूची (या एक ग्रिड, या एक नक्शा, आदि) प्रस्तुत करते हैं।
  • मॉडल दृश्यों को सुनते हैं ताकि वे एक राज्य संपादित कर सकें, शायद एक फॉर्म संपादित होने पर।

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

कन्वेंशनों

बैकबोन के लिए लिखित कोड सम्मेलनों के ढीले सेट का पालन करता है। डीओएम कोड एक दृश्य में संबंधित है। संग्रह कोड संग्रह में है। व्यापार तर्क एक मॉडल में चला जाता है। आपके कोडबेस को चुनने वाला एक और डेवलपर ग्राउंड रनिंग करने में सक्षम होगा।

सारांश में

बैकबोन एक हल्का लाइब्रेरी है जो आपके कोड पर संरचना प्रदान करती है। घटकों को घटनाओं के माध्यम से decoupled और संवाद कर रहे हैं ताकि आप एक गड़बड़ में खत्म नहीं होगा। आप एक नया ऑब्जेक्ट बनाकर और अपने मौजूदा ऑब्जेक्ट्स को उचित रूप से सुनकर आसानी से अपना कोडबेस बढ़ा सकते हैं। आपका कोड क्लीनर, अच्छा, और अधिक रखरखाव योग्य होगा।

मेरी छोटी किताब

मुझे बैकबोन इतना पसंद आया कि मैंने इसके बारे में एक छोटी सी पुस्तक लिखी। आप इसे ऑनलाइन यहां पढ़ सकते हैं: http://nicholasjohnson.com/backbone-book/

मैंने सामग्री को एक संक्षिप्त ऑनलाइन पाठ्यक्रम में भी तोड़ दिया, जिसे आप यहां पा सकते हैं: http://www.forwardadvance.com/course/backbone । आप लगभग एक दिन में कोर्स पूरा कर सकते हैं।


Backbone.js एक जावास्क्रिप्ट ढांचा है जो आपको अपना कोड व्यवस्थित करने में मदद करता है। यह सचमुच एक रीढ़ की हड्डी है जिस पर आप अपना आवेदन बनाते हैं। यह विजेट प्रदान नहीं करता है (जैसे jQuery UI या Dojo)।

यह आपको बेस क्लास का एक अच्छा सेट देता है जिसे आप स्वच्छ जावास्क्रिप्ट कोड बनाने के लिए बढ़ा सकते हैं जो आपके सर्वर पर रीस्टफुल एंडपॉइंट्स के साथ इंटरफेस करता है।


JQuery और Mootools सिर्फ एक टूलबॉक्स हैं जो आपके प्रोजेक्ट के कई टूल हैं। बैकबोन आपके प्रोजेक्ट के लिए एक आर्किटेक्चर या रीढ़ की हड्डी की तरह कार्य करता है जिस पर आप JQuery या Mootools का उपयोग करके एक एप्लिकेशन बना सकते हैं।


backbone.js जावास्क्रिप्ट के साथ मॉडल-व्यू-कंट्रोलर (एमवीसी) है लेकिन जावा स्क्रिप्ट द्वारा एमवीसी पैटर्न के लिए रीढ़ की हड्डी से बेहतर Extjs

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


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


पहले से ही बहुत अच्छे जवाब। बैकबोन जेएस कोड व्यवस्थित रखने में मदद करता है। मॉडल / संग्रह को बदलने से स्वचालित रूप से प्रस्तुत करने वाले दृश्य की देखभाल होती है जो बहुत अधिक विकास ओवरहेड को कम कर देता है।

हालांकि यह विकास के लिए अधिकतम लचीलापन प्रदान करता है, डेवलपर्स को मॉडल को नष्ट करने और विचारों को ठीक से हटाने के लिए सावधान रहना चाहिए। अन्यथा आवेदन में स्मृति रिसाव हो सकता है।



मुझे यह मानना ​​है कि एमवीसी के सभी "फायदे" ने कभी भी अपना काम आसान, तेज, या बेहतर नहीं बनाया है। यह सिर्फ पूरे कोडिंग अनुभव को अधिक सार और समय लेने वाला बनाता है। रखरखाव एक दुःस्वप्न है जब किसी अलगाव की धारणा को किसी अलगाव की धारणा को डीबग करने का प्रयास किया जाता है। पता नहीं है कि आप में से कितने लोगों ने कभी भी एक फ्लेक्स साइट को अपडेट करने का प्रयास किया है जो केर्न्गॉर्म को एमवीसी मॉडल के रूप में इस्तेमाल करता है लेकिन अपडेट करने के लिए 30 सेकंड का समय लेना अक्सर 2 घंटे (शिकार / ट्रेसिंग / डिबगिंग केवल एक ईवेंट खोजने के लिए ले सकता है) )। एमवीसी मेरे लिए था और अभी भी एक "लाभ" है जिसे आप सामान दे सकते हैं।


यह एक बहुत अच्छा प्रारंभिक वीडियो है: http://vimeo.com/22685608

यदि आप रेल और बैकबोन पर अधिक खोज रहे हैं, तो थॉटबॉट में यह बहुत अच्छी किताब है (मुफ्त नहीं): https://workshops.thoughtbot.com/backbone-js-on-rails


यह केवीओ के साथ नियंत्रकों और विचारों का उपयोग करके रूटिंग भी जोड़ता है। आप इसके साथ "AJAXy" अनुप्रयोग विकसित करने में सक्षम होंगे।

इसे हल्के वजन वाले स्प्राउटकोर या कैप्चिनो फ्रेमवर्क के रूप में देखें।





backbone.js