🗻 💪🏿 🚶 और फिर से एमवीसी के बारे में 👩‍💼 👃🏼 🔊

मुझे वेब पर जावास्क्रिप्ट के लिए बहुत कम MVC कार्यान्वयन मिले, इसलिए मैं जावास्क्रिप्ट कार्यान्वयन में इस दृष्टिकोण के लाभों को उजागर करना चाहूंगा।

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

थोड़ा इतिहास:
MVC (मॉडल व्यू कंट्रोलर) 1979 में वर्णित किया गया था, यह भी स्मॉलटॉक भाषा के लिए।
तब से, इंटरफेस में कुछ भी नया आविष्कार नहीं किया गया है। टेम्पलेट में सुधार, पूरक और विस्तार किया गया है। प्लेटफ़ॉर्म की क्षमताओं और उस भाषा के आधार पर अनुयायी दिखाई देते हैं, जिसमें एप्लिकेशन लिखा जाता है, जैसे HMVC (Hierarhical Model View Controller), MVP (मॉडल व्यू प्रेजेंटर), MVVM (मॉडल व्यू व्यूमॉडल), लेकिन सार एक ही रहता है - डेटा स्रोत को संशोधित और कमांडिंग से अलग करना। कार्य और उनके कमजोर बंधन।
मैं पहले से कहता हूं कि 1979 में टेम्प्लेट की उपस्थिति के बाद से, पहली समीक्षा कुछ इस तरह थी: " यह आवश्यक क्यों है? और इसलिए यह अच्छी तरह से काम करता है। ", दूसरी समीक्षा: " बाह! हां, डेटा अभी और मॉडल में देखें डुप्लिकेट है। सब कुछ धीमा हो जाएगा। "और अंत में, तीसरा:" हर बार जब मॉडल बदलता है, तो दृश्य अपडेट किया जाता है। सब कुछ धीमा हो जाएगा! "। इसलिए, आश्चर्यचकित न हों कि इस लेख को पढ़ते समय आपके पास समान प्रश्न होंगे। सब कुछ के बावजूद, एमवीसी और उसके अनुयायी काफी सफल हैं और कुछ कार्यों के लिए समय-परीक्षण किए गए समाधान हैं। मुझे उम्मीद है कि आप भी इसे देखेंगे।

कार्य : मानों को जोड़ने और हटाने के लिए एक साधारण इंटरेक्टिव पेज - मानों की एक सूची और दो बटन बनाएं। पारंपरिक दृष्टिकोण काफी सरल है - एक html फ़ाइल बनाएं। सूची के लिए चयन का उपयोग किया जाता है, बटन का उपयोग जोड़तोड़ के लिए किया जाता है। बटन के ऑनक्लिक विशेषता में हम एक जावास्क्रिप्ट फ़ंक्शन कॉल लिखते हैं। किसी मूल्य को चयन से हटाने के लिए, हम DOM सेलेक्ट ऑब्जेक्ट की ओर मुड़ते हैं, SelectIndex प्रॉपर्टी के लिए पूछते हैं और संबंधित ऑब्जेक्ट को हटाते हैं।

<html><head><script> // <![CDATA[ function addItem (value) { if (!value) { return; } var myselect = document.getElementById('myselect'); var newoption = myselect.appendChild(document.createElement('option')); newoption.value = value; newoption.innerHTML=value; } function removeCurrentItem () { var myselect = document.getElementById('myselect'); if (myselect.selectedIndex === -1) { return; } var selectedOption = myselect.options[myselect.selectedIndex]; selectedOption.parentNode.removeChild(selectedOption); } // ]]> </script> </head> <body> <select id="myselect" size="4"></select> <button onClick="addItem(prompt('enter value'))">+</button> <button onClick="removeCurrentItem()" />-</button> </body> </html>

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

"मैं इसे Jquery / Dojo / MooTools / My_Love_Ajax_Library के माध्यम से करूंगा।" उदाहरण के लिए, इस तरह:

 <html><head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script> <script> // <![CDATA[ $(document).ready(function(){ $('#plus').bind('click', function(){ var value = prompt('add value'); if (!value) { return; } $('<option>').html(value).appendTo($('#myselect')); }); $('#minus').bind('click', function(){ var myselect = $('#myselect'); if (myselect.attr('selectedIndex') === -1) { return; } myselect.children().remove(':selected'); }); }); // ]]> </script> </head> <body> <select id="myselect" size="4"></select> <button id="plus">+</button> <button id="minus"/>-</button> </body> </html>

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

क्लासिक एमवीसी कार्यान्वयन में, मूल सिद्धांत हैं:

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

इस मामले में, अंतर इस प्रकार हैं:

मॉडल को किसी के बारे में कुछ नहीं पता है। अलर्ट भेज सकते हैं
देखें केवल मॉडल के बारे में जानते हैं
कंट्रोलर व्यू और मॉडल के बारे में जानता है।

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

आदर्श

हमारे मामले में मॉडल केवल वस्तुओं (स्ट्रिंग) की एक सरणी को संग्रहीत करता है जिसे हमने दर्ज किया था। "वर्तमान" ऑब्जेक्ट का सीरियल नंबर भी संग्रहीत है। वस्तुओं को जोड़ने और हटाने के लिए मानक तरीके भी हैं: addItem, removeCurrentItem, आप उनके बिना नहीं कर सकते, क्योंकि मॉडल को उनके परिवर्तन के बारे में सूचित किया जाना चाहिए।
अलर्ट भेजने के लिए, विषय प्रकार (मॉडलचेंजड्यूज) का उपयोग किया जाता है, आप इनमें से कई ऑब्जेक्ट बना सकते हैं और न केवल "मॉडल बदल गया है", बल्कि "मॉडल का संपत्ति एक्स बदल गया है" ग्राहकों को सूचनाएँ भेजते हैं। यह व्यू को पूरी तरह से अपडेट नहीं करने में मदद करेगा, लेकिन केवल उन क्षेत्रों में जो वास्तव में मॉडल में बदल चुके हैं।
मुझे jquery में विषय बनाने के लिए मानक कार्य नहीं मिला, इसलिए मैंने एक कनाडाई प्रोग्रामर द्वारा एक उत्कृष्ट mvc लेख से तैयार मेकएब्सर्वेबलसुबिज लिया।

 ... OMVC.Model = function () { var that = this; var items = []; this.modelChangedSubject = OMVC.makeObservableSubject(); this.addItem = function (value) { if (!value) { return; } items.push(value); that.modelChangedSubject.notifyObservers(); }; this.removeCurrentItem = function () { if (that.selectedIndex === -1) { return; } items.splice(that.selectedIndex, 1); that.modelChangedSubject.notifyObservers(); }; this.getItems = function () { return items; }; this.selectedIndex = -1; this.getSelectedIndex = function () { return that.selectedIndex; } this.setSelectedIndex = function (value) { that.selectedIndex = value; that.modelChangedSubject.notifyObservers(); } }; ...

राय

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

 ... OMVC.View = function (model, rootObject) { var that = this; that.select = $('<select/>').appendTo(rootObject); that.select.attr('size', '4'); that.buttonAdd = $('<button>+</button>').appendTo(rootObject).height(20); that.buttonRemove = $('<button>-</button>').appendTo(rootObject).height(20); model.modelChangedSubject.addObserver(function () { var items = model.getItems(); var innerHTML = ''; for (var i = 0; i<items.length; i += 1) { innerHTML += "<option>"+items[i]+"</option>"; } that.select.html(innerHTML); }); }; ...

नियंत्रक

इस नियंत्रक में, हम बस दृश्य वस्तुओं को लटकाते हैं, मॉडल और दृश्य को जोड़ते हैं।

 ... OMVC.Controller = function (model, view) { view.buttonAdd.bind('click', function () { model.addItem(prompt('addvalue')); }); view.buttonRemove.bind('click', function () { model.removeCurrentItem(); }); view.select.bind('click', function () { model.setSelectedIndex(view.select[0].selectedIndex); }); }; ...

पूर्ण पृष्ठ का पाठ:

 <!doctype html> <html> <body> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script> <script> // <![CDATA[ var OMVC = {}; OMVC.makeObservableSubject = function () { var observers = []; var addObserver = function (o) { if (typeof o !== 'function') { throw new Error('observer must be a function'); } for (var i = 0, ilen = observers.length; i < ilen; i += 1) { var observer = observers[i]; if (observer === o) { throw new Error('observer already in the list'); } } observers.push(o); }; var removeObserver = function (o) { for (var i = 0, ilen = observers.length; i < ilen; i += 1) { var observer = observers[i]; if (observer === o) { observers.splice(i, 1); return; } } throw new Error('could not find observer in list of observers'); }; var notifyObservers = function (data) { // Make a copy of observer list in case the list // is mutated during the notifications. var observersSnapshot = observers.slice(0); for (var i = 0, ilen = observersSnapshot.length; i < ilen; i += 1) { observersSnapshot[i](data); } }; return { addObserver: addObserver, removeObserver: removeObserver, notifyObservers: notifyObservers, notify: notifyObservers }; }; OMVC.Model = function () { var that = this; var items = []; this.modelChangedSubject = OMVC.makeObservableSubject(); this.addItem = function (value) { if (!value) { return; } items.push(value); that.modelChangedSubject.notifyObservers(); }; this.removeCurrentItem = function () { if (that.selectedIndex === -1) { return; } items.splice(that.selectedIndex, 1); that.modelChangedSubject.notifyObservers(); }; this.getItems = function () { return items; }; this.selectedIndex = -1; this.getSelectedIndex = function () { return that.selectedIndex; } this.setSelectedIndex = function (value) { that.selectedIndex = value; that.modelChangedSubject.notifyObservers(); } }; OMVC.View = function (model, rootObject) { var that = this; that.select = $('<select/>').appendTo(rootObject); that.select.attr('size', '4'); that.buttonAdd = $('<button>+</button>').appendTo(rootObject).height(20); that.buttonRemove = $('<button>-</button>').appendTo(rootObject).height(20); model.modelChangedSubject.addObserver(function () { var items = model.getItems(); var innerHTML = ''; for (var i = 0; i<items.length; i += 1) { innerHTML += "<option>"+items[i]+"</option>"; } that.select.html(innerHTML); }); }; OMVC.Controller = function (model, view) { view.buttonAdd.bind('click', function () { model.addItem(prompt('addvalue')); }); view.buttonRemove.bind('click', function () { model.removeCurrentItem(); }); view.select.bind('click', function () { model.setSelectedIndex(view.select[0].selectedIndex); }); }; $(document).ready(function () { var model = new OMVC.Model(); var view = new OMVC.View(model, $('<div/>').appendTo($("body"))); var controller = new OMVC.Controller(model, view); }); // ]]> </script> </body> </html>

निष्कर्ष

अंत में, सवाल यह है : पहले, मानक या बेहतर jQuery-ev पर MVC कार्यान्वयन के क्या फायदे हैं? हमने तीन बार ज्यादा से ज्यादा कोड लिखे, और किस लिए?
उत्तर : इस तरह के एक सरल उदाहरण के साथ, MVC टेम्पलेट के लाभ धीरे-धीरे ध्यान देने योग्य होने लगे हैं:

दस्तावेज़ में बाद में उन्हें प्राप्त करने के लिए इंटरफ़ेस में आईडी तत्वों को असाइन करने की कोई आवश्यकता नहीं है। इसे पहले ही प्राप्त कर लें। क्योंकि सभी तत्व पहले से ही व्यू में संग्रहीत हैं, आपको HTML दस्तावेज़ में उन्हें खोजने की आवश्यकता नहीं है।
सभी ऑब्जेक्ट रूटऑब्जेक्ट तत्व के अंदर खींचे जाते हैं। किसी भी रूट ऑबजेक्ट के लिए दृश्य को कई बार आसानी से उपयोग किया जा सकता है।
Html बॉडी में कुछ भी संग्रहित नहीं है, अर्थात बेशक वहाँ कुछ है, लेकिन हम इसमें बिल्कुल भी दिलचस्पी नहीं ले रहे हैं - परिवर्तन से पहले, हमें इसे दो स्थानों पर देखना होगा और दो स्थानों पर करना होगा: html और जावास्क्रिप्ट कार्यों में। अब सब कुछ केवल जावास्क्रिप्ट और इसके अलावा किया जाता है, डिज़ाइन केवल व्यू ऑब्जेक्ट में संग्रहीत किया जाता है।
बदलाव बहुत आसान हैं। उदाहरण के लिए, ऊपर उल्लिखित "बॉस" अनुरोध इस प्रकार लागू किया गया है:
- selectIndex को बदलने के लिए एक विषय बनाएं
  this.selectedIndexChangedSubject = OMVC.makeObservableSubject ();
- बदलते समय, सूचित करें कि .selectedIndexChangedSubject.notifyObservers ();
- और जिस रूप में हम selectIndexChangedSubject अलर्ट की सदस्यता लेते हैं

बैकलाइट के साथ विशेषताओं के साथ पूर्ण, अंतिम संस्करण:

 <!doctype html> <html> <body> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script> <script> // <![CDATA[ var OMVC = {}; OMVC.makeObservableSubject = function () { var observers = []; var addObserver = function (o) { if (typeof o !== 'function') { throw new Error('observer must be a function'); } for (var i = 0, ilen = observers.length; i < ilen; i += 1) { var observer = observers[i]; if (observer === o) { throw new Error('observer already in the list'); } } observers.push(o); }; var removeObserver = function (o) { for (var i = 0, ilen = observers.length; i < ilen; i += 1) { var observer = observers[i]; if (observer === o) { observers.splice(i, 1); return; } } throw new Error('could not find observer in list of observers'); }; var notifyObservers = function (data) { // Make a copy of observer list in case the list // is mutated during the notifications. var observersSnapshot = observers.slice(0); for (var i = 0, ilen = observersSnapshot.length; i < ilen; i += 1) { observersSnapshot[i](data); } }; return { addObserver: addObserver, removeObserver: removeObserver, notifyObservers: notifyObservers, notify: notifyObservers }; }; OMVC.Model = function () { var that = this; var items = []; this.modelChangedSubject = OMVC.makeObservableSubject(); this.addItem = function (value) { if (!value) { return; } items.push(value); that.modelChangedSubject.notifyObservers(); }; this.removeCurrentItem = function () { if (that.selectedIndex === -1) { return; } items.splice(that.selectedIndex, 1); if (items.length === 0) { that.setSelectedIndex(-1); } that.modelChangedSubject.notifyObservers(); }; this.getItems = function () { return items; }; this.selectedIndex = -1; this.getSelectedIndex = function () { return that.selectedIndex; } this.selectedIndexChangedSubject = OMVC.makeObservableSubject(); this.setSelectedIndex = function (value) { that.selectedIndex = value; that.selectedIndexChangedSubject.notifyObservers(); } }; OMVC.View = function (model, rootObject) { var that = this; that.select = $('<select/>').appendTo(rootObject); that.select.attr('size', '4'); that.buttonAdd = $('<button>+</button>').appendTo(rootObject).height(20); that.buttonRemove = $('<button>-</button>').appendTo(rootObject).height(20).fadeOut(); model.modelChangedSubject.addObserver(function () { var items = model.getItems(); var innerHTML = ''; for (var i = 0; i<items.length; i += 1) { innerHTML += "<option>"+items[i]+"</option>"; } that.select.html(innerHTML); }); model.selectedIndexChangedSubject.addObserver(function () { if(model.getSelectedIndex() === -1) { that.buttonRemove.fadeOut(); } else { that.buttonRemove.fadeIn(); } }); }; OMVC.Controller = function (model, view) { view.buttonAdd.bind('click', function () { model.addItem(prompt('addvalue')); }); view.buttonRemove.bind('click', function () { model.removeCurrentItem(); }); view.select.bind('click', function () { model.setSelectedIndex(view.select[0].selectedIndex); }); }; $(document).ready(function () { var model = new OMVC.Model(); var view = new OMVC.View(model, $('<div/>').appendTo($("body"))); var controller = new OMVC.Controller(model, view); }); // ]]> </script> </body> </html>

हमारे पास एक इंटरैक्टिव HTML पेज हुआ करता था - अब हमारे पास HTML में एक ग्राफिकल शेल के साथ एक जावास्क्रिप्ट एप्लिकेशन है। फर्क महसूस करो।

और फिर से एमवीसी के बारे में

आदर्श

राय

नियंत्रक

निष्कर्ष

More articles: