जावास्क्रिप्ट एमवीसी आर्किटेक्चर क्या है और यह कैसे काम करता है?

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

• जावास्क्रिप्ट एमवीसी वास्तुकला
• मॉडल
• दृश्य
• नियंत्रकों
• जावास्क्रिप्ट MVC चौखटे

जावास्क्रिप्ट एमवीसी वास्तुकला

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

MVC में तीन घटक होते हैं:

• नमूना
• राय
• नियंत्रक

अब, आइए इन तीन जावास्क्रिप्ट एमवीसी घटकों की गहराई पर आगे बढ़ें।

मॉडल

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

आइए, बैकबोन का उपयोग करके कार्यान्वित एक सरलीकृत मॉडल का एक उदाहरण लें:

कृत्रिम बुद्धिमत्ता में नवीनतम तकनीक

var Photo = Backbone.Model.extend ({// फोटो डिफॉल्ट के लिए डिफ़ॉल्ट विशेषताएँ: {src: 'प्लेसहोल्डर.jpg', कैप्शन: 'एक डिफ़ॉल्ट छवि', देखी गई: गलत}, // यह सुनिश्चित करें कि प्रत्येक तस्वीर का निर्माण किया गया है `src`। आरंभ करें: फ़ंक्शन () {this.set ({'src': this.defaults.src})}})

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

दृश्य

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

var buildPhotoView = function (photoModel, photoController) {var base = document.createElement ('div'), photoEl = document.createElement ('div') base.appendCild (photoEl) var प्रस्तुतिकरण = function () {// हम एक का उपयोग करते हैं अस्थायी लाइब्रेरी जैसे कि अंडरस्कोर // टेम्प्लेटिंग जो हमारी // फोटो प्रविष्टि photoEl.innerHTML = _.template (ph #photoTemplate ’, {src: photoModel.getSrc ())}}} photoModel.addSubscriber (रेंडर) photoEl के लिए HTML उत्पन्न करती है। addEventListener ('क्लिक', फंक्शन () {photoController.handleEvent ('क्लिक', photoModel)}) var show = function () {photoEl.style.display = ''> 'hide = function () {photoEl.style.display = 'कोई नहीं'} वापसी {showView: show, HideView: Hide}}

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

नियंत्रकों

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

var PhotosController = Spine.Controller.sub ({init: function () {this.item.bind ('update', this.proxy (this.render)) this.item.bind ('नष्ट, this.proxy (यह) .remove))}, रेंडर करें: function () {/ // temleating this.replace ($ (em #photoTemplate ’)) .tmpl (this.item)) इसे वापस लौटाएँ}, remove: function () {this.el.remove () this.release ()}}

यह उदाहरण आपको मॉडल और दृश्य के बीच परिवर्तनों को प्रबंधित करने का एक बहुत ही हल्का, सरल तरीका प्रदान करेगा।

जावास्क्रिप्ट MVC चौखटे

पिछले कुछ वर्षों में, जावास्क्रिप्ट एमवीसी की एक श्रृंखला विकसित किया गया है। इनमें से हर एक फ्रेमवर्क, MVC पैटर्न के कुछ रूप का अनुसरण करता है, जो डेवलपर्स को अधिक संरचित जावास्क्रिप्ट कोड लिखने के लिए प्रोत्साहित करने के लक्ष्य के साथ है। कुछ चौखटे हैं:

• backbone.js
• Ember.js
• AngularJS
• सेन्छा
• केंडो यूआई

इसके साथ, हम जावास्क्रिप्ट एमवीसी लेख के अंत में आ गए हैं। मुझे आशा है कि आप एमवीसी वास्तुकला में शामिल तीन घटकों को समझ गए होंगे।

अब जब आप जावास्क्रिप्ट MVC के बारे में जानते हैं, तो देखें Edureka द्वारा। वेब डेवलपमेंट सर्टिफिकेशन ट्रेनिंग आपको HTML5, CSS3, ट्विटर बूटस्ट्रैप 3, jQuery और Google API का उपयोग करके प्रभावशाली वेबसाइट बनाने और इसे अमेज़ॅन सिंपल स्टोरेज सर्विस (S3) में तैनात करने में मदद करेगी।

क्या आप हमसे कोई प्रश्न पूछना चाहते हैं? कृपया 'जावास्क्रिप्ट एमवीसी' के टिप्पणी अनुभाग में इसका उल्लेख करें और हम आपके पास वापस आ जाएंगे।