👩‍❤️‍👨 👩🏽‍🍳 🏞️ आवश्यकताएँ का उपयोग करके एक क्लाइंट MVC एप्लिकेशन बनाना 👩🏾‍🚀 👼🏻 ➗

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

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

इस चरण-दर-चरण मार्गदर्शिका में, आप सीखेंगे कि आवश्यकताएँ के लिए एक सरल MVC (मॉडल - दृश्य - नियंत्रक) एप्लिकेशन का उपयोग कैसे करें। आपको स्क्रिप्ट लोड करने में किसी पूर्व ज्ञान की आवश्यकता नहीं है, हम इस लेख में मूल बातें कवर करेंगे।

परिचय

क्या आवश्यकता हैJJS और क्या यह अच्छा है

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

सामने के छोर पर एमवीसी?

MVC सर्वर-साइड कोड को व्यवस्थित करने के लिए एक प्रसिद्ध पैटर्न है, जो इसे मॉड्यूलर और समर्थित बनाता है। सामने के छोर पर इसके उपयोग के बारे में क्या कहा जा सकता है? क्या हम इस पैटर्न को जावास्क्रिप्ट में लागू कर सकते हैं? यदि आप केवल एनीमेशन के लिए जावास्क्रिप्ट का उपयोग करते हैं, तो कई रूपों की जाँच, या कई सरल तरीकों की आवश्यकता होती है जो कोड की कई पंक्तियों की आवश्यकता नहीं होती है (जैसे, 100 से कम लाइनें), एमवीसी का उपयोग करके फ़ाइलों को संरचना करने की कोई आवश्यकता नहीं है, और शायद आवश्यकताएँ का उपयोग करने की कोई आवश्यकता नहीं है। हालांकि, यदि आप कई अलग-अलग विचारों के साथ एक बड़ा वेब एप्लिकेशन बना रहे हैं, तो निश्चित रूप से हाँ!

एक एप्लिकेशन बनाएं

आवश्यकताएँ का उपयोग करके MVC कोड को व्यवस्थित करने का तरीका दिखाने के लिए, हम 2 विचारों के साथ एक बहुत ही सरल एप्लिकेशन बनाएंगे:

पहला दृश्य उपयोगकर्ताओं की एक सूची प्रदर्शित करता है (नाम विशेषता द्वारा दर्शाया गया है),
दूसरा दृश्य आपको एक उपयोगकर्ता जोड़ने की अनुमति देता है।

यहाँ है कि यह कैसा दिखेगा:

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

HTML और CSS

यह HTML फ़ाइल का पाठ है जिसका उपयोग हम उदाहरण में करेंगे:

<!doctype html> <html> <head> <meta charset="utf-8"> <title>A simple MVC structure</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <div id="container"> <h1>My users</h1> <nav><a href="#list">List</a> - <a href="#add">Add</a></nav> <div id="app"></div> </div> <script data-main="js/main" src="js/require.js"></script> </body> </html>

हमारे आवेदन में नेविगेशन नेवी मेनू के लिंक होंगे, जो एप्लिकेशन के प्रत्येक पृष्ठ पर मौजूद होंगे, और MVC एप्लिकेशन का सारा जादू <div id = "app"> </ div> तत्व में होगा। हमने शरीर के निचले भाग में आवश्यकताएँ (जिसे आप यहाँ डाउनलोड कर सकते हैं ) को भी शामिल किया। आप स्क्रिप्ट टैग पर एक विशेष विशेषता देख सकते हैं: डेटा-मुख्य = "जेएस / मुख्य" । इस विशेषता को दिया गया मान, संपूर्ण अनुप्रयोग के प्रवेश बिंदु के रूप मेंजेईजेएस द्वारा उपयोग किया जाता है।

आइए कुछ शैलियों को भी जोड़ते हैं:

 #container{ font-family:Calibri, Helvetica, serif; color:#444; width:200px; margin:100px auto 0; padding:30px; border:1px solid #ddd; background:#f6f6f6; -webkit-border-radius:4px; -moz-border-radius:4px; border-radius:4px; } h1, nav{ text-align:center; margin:0 0 20px; }

OOP को याद करें: एक मॉड्यूल क्या है?

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

 var MyMath = (function(){ //       return { //     add:function(a, b){ return a + b; } }; })(); console.log(MyMath.add(1, 2));

सार्वजनिक विधियों को शाब्दिक अंकन में वस्तु का उपयोग करके घोषित किया जाता है, जो बहुत सुविधाजनक नहीं है। वैकल्पिक रूप से, आप मॉड्यूल ओपनिंग टेम्प्लेट का उपयोग कर सकते हैं, जो निजी विशेषताओं और विधियों को लौटाता है:

 var MyMath = (function(){ //         : function add(a, b){ return a + b; } return { add:add //        ! }; })(); console.log(MyMath.add(1, 2));

मैं इस लेख के बाकी हिस्सों में मॉड्यूल ओपनिंग टेम्पलेट का उपयोग करूंगा।

RequireJS

आवश्यकताएँ का उपयोग कर मॉड्यूल का विवरण

पिछले अनुभाग में, हमने एक मॉड्यूल को इसकी आगे की कॉल के लिए एक चर में परिभाषित किया। मॉड्यूल घोषित करने का यह सिर्फ एक तरीका है। अब हम आवश्यकताएँ द्वारा उपयोग की जाने वाली एक अन्य विधि को देखेंगे। आवश्यकताएँ का लक्ष्य आसान रखरखाव के लिए हमारी जावास्क्रिप्ट फ़ाइलों को अलग करना है, तो चलिए हमारे MyMath मॉड्यूल को main.js के समान फ़ोल्डर में परिभाषित करने के लिए एक MyMath.js फ़ाइल बनाते हैं :

 define(function(){ function add(a, b){ return a + b; } return { add:add }; });

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

मुख्य फ़ाइल में एक मॉड्यूल लोड हो रहा है

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

 require(['MyMath'], function(MyMath){ console.log(MyMath.add(1, 2)); });

MyMath मॉड्यूल के लिए कॉल अब एक आवश्यक फ़ंक्शन में लिपटे है, जिसमें दो पैरामीटर हैं:

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

अब आप पृष्ठ को पुनः लोड कर सकते हैं। इतना आसान आप किसी अन्य फ़ाइल से एक विधि कह रहे हैं! हां, यह बहुत सरल था और अब आप बड़े और डरावने MVC आर्किटेक्चर के लिए तैयार हैं (जो आपके द्वारा बनाई गई मॉड्यूल परिभाषा की तरह ही काम करता है, इसलिए सुनिश्चित करें कि आप इसे पूरी तरह से कर सकते हैं!)।

MVC संरचना

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

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

नियंत्रकों
- AddController.js
- ListController.js
मॉडल
- User.js
दृश्य
- AddView.js
- ListView.js
main.js
require.js

तो संरचना तैयार है। आइए सबसे सरल भाग के कार्यान्वयन के साथ शुरू करें: यह एक मॉडल है।

मॉडल: उपयोगकर्ता .js

इस उदाहरण में, उपयोगकर्ता एक नाम विशेषता के साथ एक साधारण वर्ग है:

 define(function(){ function User(name){ this.name = name || 'Default name'; } return User; });

यदि हम अब अपनी main.js फ़ाइल पर वापस आते हैं, तो अब हम आवश्यकता विधि में उपयोगकर्ता पर निर्भरता की घोषणा कर सकते हैं, और मैन्युअल रूप से इस उदाहरण के लिए उपयोगकर्ताओं का एक सेट बना सकते हैं:

 require(['Models/User'], function(User){ var users = [new User('Barney'), new User('Cartman'), new User('Sheldon')]; for (var i = 0, len = users.length; i < len; i++){ console.log(users[i].name); } localStorage.users = JSON.stringify(users); });

फिर हम JSON में उपयोगकर्ता सरणी को क्रमबद्ध करते हैं और इसे स्थानीय एचटीएमएल 5 रिपॉजिटरी में सहेजते हैं ताकि उन्हें डेटाबेस में सुलभ बनाया जा सके:

नोट : JSON को अनुक्रमित करने और पार्स करने के लिए deserialize का उपयोग करने के लिए, आपको किसी भी पॉलीफ़िल लाइब्रेरी की आवश्यकता है, ताकि उदाहरण IE7 और उससे पहले में काम करे। इसके लिए आप Github रिपॉजिटरी से डगलस क्रॉकफोर्ड के json2.js लाइब्रेरी का उपयोग कर सकते हैं।

उपयोगकर्ताओं की सूची प्रदर्शित करें

यह हमारे एप्लिकेशन के इंटरफ़ेस में उपयोगकर्ताओं की सूची दिखाने का समय है। इसके लिए हम ListController.js और ListView.js का उपयोग करेंगे। जाहिर है, ये दो घटक आपस में जुड़े हुए हैं। ऐसा करने के कई तरीके हैं, लेकिन हमारे उदाहरण को सरल रखने के लिए मैं सुझाव देता हूं: लिस्ट व्यू में एक रेंडर विधि होगी और हमारे लिस्टकंट्रोलर को केवल उपयोगकर्ताओं को स्थानीय भंडारण से मिलेगा और लिस्ट व्यू में रेंडर विधि को एक पैरामीटर के रूप में पास करना होगा। तो स्पष्ट रूप से ListController में आपको ListView पर निर्भरता की आवश्यकता है।

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

 define(['Views/ListView'], function(ListView){ function start(){ var users = JSON.parse(localStorage.users); ListView.render({users:users}); } return { start:start }; });

यहां हम स्थानीय स्टोरेज से उपयोगकर्ताओं की सूची को डिसेर्बलाइज करते हैं और इसे ऑब्जेक्ट के रूप में रेंडर विधि में पास करते हैं। अब, हम सब करने की जरूरत है ListView.js में रेंडर विधि को लागू करने के लिए है:

 define(function(){ function render(parameters){ var appDiv = document.getElementById('app'); var users = parameters.users; var html = '<ul>'; for (var i = 0, len = users.length; i < len; i++){ html += '<li>' + users[i].name + '</li>'; } html += '</ul>'; appDiv.innerHTML = html; } return { render:render }; });

यह विधि केवल उपयोगकर्ताओं के माध्यम से लूप करती है और HTML स्ट्रिंग में उनके नामों को जोड़ती है जिन्हें हम तत्व में सम्मिलित करते हैं।

महत्वपूर्ण : जावास्क्रिप्ट फ़ाइल में HTML का उपयोग करना, जैसा कि इस उदाहरण में, सबसे अच्छा समाधान नहीं है, क्योंकि इसे बनाए रखना बहुत मुश्किल है। इसके बजाय, आपको पैटर्न पर एक नज़र डालनी चाहिए। टेम्पलेट HTML में डेटा एम्बेड करने का एक सुंदर तरीका है। इंटरनेट पर बहुत सारे अच्छे टेम्पलेट इंजन उपलब्ध हैं। उदाहरण के लिए, आप jQuery-Tmpl या Mustache.js का उपयोग कर सकते हैं। लेकिन यह इस लेख के दायरे से परे है, और वर्तमान वास्तुकला में जटिलता को जोड़ देगा, मैं इसे यथासंभव सरल बनाना पसंद करता हूं।

अब, हमें बस इतना करना है कि हमारे ListController मॉड्यूल को "रन" करें। ऐसा करने के लिए, आइए इसे हमारी main.js फ़ाइल में एक निर्भरता के रूप में घोषित करें, और ListController.start () विधि को कॉल करें:

 require(['Models/User', 'Controllers/ListController'], function(User, ListController){ var users = [new User('Barney'), new User('Cartman'), new User('Sheldon')]; localStorage.users = JSON.stringify(users); ListController.start(); });

अब आप उपयोगकर्ताओं की इस अद्भुत सूची को देखने के लिए पृष्ठ को रीफ़्रेश कर सकते हैं:

हाँ, यह काम करता है! बधाई हो, यदि आप समानांतर में एक उदाहरण चलाते हैं और एक ही परिणाम मिला है!

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

उपयोगकर्ता जोड़ें

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

 define(['Views/AddView'], function(AddView){ function start(){ AddView.render(); } return { start:start }; });

और इसी दृश्य:

 define(function(){ function render(parameters){ var appDiv = document.getElementById('app'); appDiv.innerHTML = '<input id="user-name" /><button id="add">Add this user</button>'; } return { render:render }; });

अब आप AddController को मुख्य फ़ाइल में एक निर्भरता के रूप में घोषित कर सकते हैं और अपेक्षित दृश्य देखने के लिए इसकी शुरुआत विधि को कॉल कर सकते हैं:

लेकिन चूंकि हमारे पास बटन आयोजनों के लिए अभी तक कोई बाध्यता नहीं है, इसलिए यह दृश्य बहुत उपयोगी नहीं है ... चलो इस पर काम करते हैं। मेरे पास आपके लिए एक प्रश्न है: हमें इस घटना को संभालने के लिए तर्क कहाँ रखना चाहिए? दृश्य में या नियंत्रक में? यदि हम दृश्य में जगह देते हैं, तो यह घटना के लिए सदस्यता जोड़ने के लिए सही जगह होगी, लेकिन व्यापार तर्क को दृश्य में रखना बहुत बुरा अभ्यास होगा। कंट्रोलर में तर्क देना एक बेहतर विचार प्रतीत होता है, भले ही यह सही न हो, क्योंकि हम यहां html तत्वों के किसी भी उल्लेख को नहीं देखना चाहते हैं जो दृश्य के लिए प्रासंगिक है।

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

जैसा कि मैंने कहा, चलो नियंत्रक में घटना के सभी तर्क डालते हैं। हमें AddController में bindEvents फ़ंक्शन बनाने और दृश्य HTML को रेंडर करने के बाद इसे कॉल करने की आवश्यकता है:

 define(['Views/AddView', 'Models/User'], function(AddView, User){ function start(){ AddView.render(); bindEvents(); } function bindEvents(){ document.getElementById('add').addEventListener('click', function(){ var users = JSON.parse(localStorage.users); var userName = document.getElementById('user-name').value; users.push(new User(userName)); localStorage.users = JSON.stringify(users); require(['Controllers/ListController'], function(ListController){ ListController.start(); }); }, false); } return { start:start }; });

बाइंड इवेन्ट्स में , हम केवल #add बटन पर क्लिक करने के लिए एक ईवेंट श्रोता को जोड़ते हैं (यदि आप IE में अटैचमेंट के साथ काम कर रहे हैं या jQuery का उपयोग करते हैं तो अपने स्वयं के फ़ंक्शन का उपयोग करने के लिए स्वतंत्र महसूस करें)। जब बटन दबाया जाता है, तो हम उपयोगकर्ता को स्थानीय भंडारण से स्ट्रिंग प्राप्त करते हैं, इसे एक सरणी प्राप्त करने के लिए deserialize करते हैं, # उपयोगकर्ता-नाम इनपुट क्षेत्र में निहित नाम के साथ एक नया उपयोगकर्ता जोड़ते हैं, और अद्यतन उपयोगकर्ता सरणी को स्थानीय भंडारण में डालते हैं। उसके बाद, हम अंत में इसकी प्रारंभ विधि को निष्पादित करने के लिए ListController को लोड करते हैं, और हम परिणाम देख सकते हैं:

अद्भुत! आपके लिए थोड़ा आराम करने का समय है, आपने मेरे साथ उदाहरण का पालन किया तो अच्छा काम किया।

मार्गों का उपयोग करते हुए विचारों के बीच नेविगेट करना

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

इससे एप्लिकेशन के प्रत्येक पृष्ठ को बुकमार्क करना संभव होगा।

नोट : फ़ायरफ़ॉक्स, क्रोम और ओपेरा को HTML5 इतिहास प्रबंधन (PushState, popState, ReplaceState) के लिए अच्छा समर्थन है, जो हैश से बचने में मदद करता है।

कार्यक्षमता और ब्राउज़र संगतता

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

केवल सबसे उन्नत ब्राउज़र : HTML5 इतिहास प्रबंधन,
अधिकांश आधुनिक ब्राउज़र : HTML5 हैश परिवर्तन घटना,
पुराने ब्राउज़र: मैन्युअल हैश परिवर्तन निगरानी,
बहुत पुराने ब्राउज़र: मैन्युअल निगरानी और iframe हैक।

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

नोट : इस प्रक्रिया को नियंत्रित करने के लिए jQuery प्लगइन भी उपलब्ध है।

मार्गों और मुख्य मार्ग चक्र

रूटिंग लॉजिक को नियंत्रित करने के लिए main.js के आगे एक राउटर.जेएस फाइल बनाते हैं। इस फ़ाइल की शुरुआत में, हमें अपने मार्गों को घोषित करने और डिफ़ॉल्ट मार्ग सेट करने की आवश्यकता है यदि यह URL में निर्दिष्ट नहीं है। उदाहरण के लिए, हम रूट ऑब्जेक्ट्स की एक साधारण सरणी का उपयोग करते हैं जिसमें हैश और उनके संबंधित नियंत्रक होते हैं जिन्हें लोड करने की आवश्यकता होती है। अगर URL में हैश मौजूद नहीं है, तो हमें defaultRoute की भी आवश्यकता है:

 define(function(){ var routes = [{hash:'#list', controller:'ListController'}, {hash:'#add', controller:'AddController'}]; var defaultRoute = '#list'; var currentHash = ''; function startRouting(){ window.location.hash = window.location.hash || defaultRoute; setInterval(hashCheck, 100); } return { startRouting:startRouting }; });

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

हैश परिवर्तन की जाँच करें

यह एक हैशचेक फ़ंक्शन है जिसे हर 100 मिलीसेकंड कहा जाता है:

 function hashCheck(){ if (window.location.hash != currentHash){ for (var i = 0, currentRoute; currentRoute = routes[i++];){ if (window.location.hash == currentRoute.hash) loadController(currentRoute.controller); } currentHash = window.location.hash; } }

hashCheck बस यह देखने के लिए जाँच करता है कि क्या हैश currentHash की तुलना में बदल गया है, और यदि यह मार्गों में से एक से मेल खाता है, तो यह उचित नियंत्रक नाम के साथ लोडकंट्रोलर कहता है।

वांछित नियंत्रक डाउनलोड करें

अंत में, लोडकंट्रोलर बस कंट्रोलर मॉड्यूल को लोड करने के लिए एक कॉल करता है और इसके स्टार्ट फंक्शन को कॉल करता है:

 function loadController(controllerName){ require(['Controllers/' + controllerName], function(controller){ controller.start(); }); }

तो, Router.js फ़ाइल का अंतिम संस्करण निम्नानुसार है:

 define(function(){ var routes = [{hash:'#list', controller:'ListController'}, {hash:'#add', controller:'AddController'}]; var defaultRoute = '#list'; var currentHash = ''; function startRouting(){ window.location.hash = window.location.hash || defaultRoute; setInterval(hashCheck, 100); } function hashCheck(){ if (window.location.hash != currentHash){ for (var i = 0, currentRoute; currentRoute = routes[i++];){ if (window.location.hash == currentRoute.hash) loadController(currentRoute.controller); } currentHash = window.location.hash; } } function loadController(controllerName){ require(['Controllers/' + controllerName], function(controller){ controller.start(); }); } return { startRouting:startRouting }; });

नई रूटिंग प्रणाली का उपयोग करना

हमें बस इस मॉड्यूल को अपनी मुख्य फ़ाइल में लोड करना है और स्टार्टिंग विधि को कॉल करना है:

 require(['Models/User', 'Router'], function(User, Router){ var users = [new User('Barney'), new User('Cartman'), new User('Sheldon')]; localStorage.users = JSON.stringify(users); Router.startRouting(); });

अगर हम अपने एप्लिकेशन में एक कंट्रोलर से दूसरे में जाना चाहते हैं, तो हम बस वर्तमान विंडो को बदल सकते हैं। दूसरे कंट्रोलर के रूट के हैश के साथ। हमारे मामले में, हम अभी भी मैन्युअल रूप से हमारे नए मार्ग प्रणाली का उपयोग करने के बजाय AddController से ListController लोड करते हैं:

 require(['Controllers/ListController'], function(ListController){ ListController.start(); });

आइए इन तीन पंक्तियों को एक साधारण हैश अपडेट से बदलें:

 window.location.hash = '#list';

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

यहाँ इस आवेदन के ऑनलाइन डेमो के लिए लिंक है।

निष्कर्ष

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

एक अस्थायी प्रणाली को एकीकृत करें
इसमें सब कुछ डालने के लिए एक छोटी सी बाहरी लाइब्रेरी बनाएं, जो सीधे आपके एप्लिकेशन से जुड़ी न हो (उदाहरण के लिए, एक रूटिंग सिस्टम), ताकि आप इसे अन्य प्रोजेक्ट्स में उपयोग कर सकें,
इस पुस्तकालय में वस्तुओं के रूप में मॉडल, दृश्य और प्रस्तुति का वर्णन करें
विभिन्न स्रोतों (RESTful API, LocalStorage, IndexedDB ...) से डेटा प्राप्त करने के लिए अमूर्तता का एक नया स्तर बनाएं।

यह उदाहरण सीखने के लिए बहुत अच्छा है, लेकिन वास्तविक परियोजनाओं में उपयोग के लिए हमारा ढांचा वास्तव में तैयार नहीं है। यदि आप ऊपर सूचीबद्ध कार्यक्षमता को जोड़ने के लिए बहुत आलसी हैं (और यह सूची संपूर्ण नहीं है!), तो आप मौजूदा MVC फ्रेमवर्क में से एक का अध्ययन करना शुरू कर सकते हैं। यहाँ कुछ सबसे लोकप्रिय हैं:

मूल लेख अंग्रेजी में ।

आवश्यकताएँ का उपयोग करके एक क्लाइंट MVC एप्लिकेशन बनाना