पायलट: बहुक्रियाशील जावास्क्रिप्ट राउटर

हर दिन, साइटें अधिक जटिल और गतिशील होती जा रही हैं। यह केवल इंटरफ़ेस को "पुनर्जीवित" करने के लिए पर्याप्त नहीं है - अधिक से अधिक बार आपको एक पूर्ण-पृष्ठ अनुप्रयोग बनाने की आवश्यकता होती है। इस तरह के एक अनुप्रयोग का एक आकर्षक उदाहरण किसी भी वेब-मेल (उदाहरण के लिए, Mail.Ru ) है, जहां लिंक पर क्लिक करने से पृष्ठ पुनः लोड नहीं होता है, बल्कि केवल प्रस्तुति में परिवर्तन होता है। और इसका मतलब यह है कि डेटा प्राप्त करने और इसे रूट के आधार पर प्रदर्शित करने का कार्य, जो हमेशा सर्वर का विशेषाधिकार रहा है, क्लाइंट के साथ निहित है। आमतौर पर इस समस्या को एक साधारण राउटर का उपयोग करके नियमित अभिव्यक्तियों के आधार पर हल किया जाता है, और आगे विकसित नहीं किया जाता है, जबकि बैक-एंड पर वे इस विषय पर अधिक ध्यान देते हैं। इस लेख में मैं इस अंतर को भरने की कोशिश करूंगा।

रूटिंग क्या है?

यह संभवतः जावास्क्रिप्ट आवेदन का सबसे कम हिस्सा है:]

सर्वर पर, रूटिंग अनुरोध के आधार पर आवेदन के भीतर मार्ग का निर्धारण करने की प्रक्रिया है। सीधे शब्दों में कहें, यह अनुरोधित URL पर नियंत्रक ढूंढ रहा है और उचित कार्य कर रहा है।

निम्नलिखित कार्य पर विचार करें: आपको एक-पेज गैलरी एप्लिकेशन बनाने की आवश्यकता है, जिसमें तीन स्क्रीन होंगे:

• घर - पेंटिंग में दिशा का एक विकल्प
• गैलरी देखें - पृष्ठांकन के साथ चित्र प्रदर्शित करें और पृष्ठ पर तत्वों की संख्या को बदलने की क्षमता
• चयनित कार्य का विस्तृत दृश्य

योजनाबद्ध रूप से, आवेदन इस तरह दिखेगा:

<div id="app"> <div id="app-index" style="display: none">...</div> <div id="app-gallery" style="display: none">...</div> <div id="app-artwork" style="display: none">...</div> </div> 

प्रत्येक स्क्रीन का अपना URL होगा, और राउटर जो उनका वर्णन करता है, उदाहरण के लिए, इस तरह देख सकते हैं:

 var Router = { routes: { "/": "indexPage", "/gallery/:tag/": "galleryPage", "/gallery/:tag/:perPage/": "galleryPage", "/gallery/:tag/:perPage/page/:page/": "galleryPage", "/artwork/:id/": "artworkPage", } }; 

रूट को सीधे 'मार्गों' ऑब्जेक्ट में सेट किया जाता है: कुंजी पथ टेम्पलेट है, और मूल्य नियंत्रक फ़ंक्शन का नाम है।

इसके बाद, आपको 'Router.routes' ऑब्जेक्ट की कुंजियों को नियमित एक्सप्रेशन में बदलना होगा। ऐसा करने के लिए, `Router.init` विधि को परिभाषित करें:

 var Router = { routes: { /* ... */ }, init: function (){ this._routes = []; for( var route in this.routes ){ var methodName = this.routes[route]; this._routes.push({ pattern: new RegExp('^'+route.replace(/:\w+/, '(\\w+)')+'$'), callback: this[methodName] }); } } }; 

यह नेविगेशन विधि का वर्णन करने के लिए बना हुआ है जो मार्ग की खोज करेगा और नियंत्रक को कॉल करेगा:

 var Router = { routes: { /* … */ }, init: function (){ /* … */ }, nav: function (path){ var i = this._routes.length; while( i-- ){ var args = path.match(this._routes[i].pattern); if( args ){ this._routes[i].callback.apply(this, args.slice(1)); } } } }; 

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

 Router.init(); Router.nav("/"); //   $("body").on("click", "a", function (evt){ Router.nav(evt.currentTarget.href); evt.preventDefault(); }); 

जैसा कि आप देख सकते हैं, कुछ भी जटिल नहीं है; मुझे लगता है कि बहुत से लोग इस दृष्टिकोण से परिचित हैं। आमतौर पर, कार्यान्वयन में सभी अंतर मार्ग रिकॉर्ड के प्रारूप और एक नियमित अभिव्यक्ति में इसके परिवर्तन के लिए नीचे आते हैं।

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

 var Router = { routes: { /*...*/ }, init: function (){ /*...*/ }, nav: function (url){ /*...*/ }, indexPage: function (){ ManagerView.set("index"); }, galleryPage: function (tag, perPage, page){ var query = { tag: tag, page: page, perPage: perPage }; api.find(query, function (items){ ManagerView.set("gallery", items); }); }, artworkPage: function (id){ api.findById(id, function (item){ ManagerView.set("artwork", item); }); } }; 

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

इस समस्या को विभिन्न तरीकों से हल किया जा सकता है; हर कोई अपना रास्ता खुद चुनता है। उदाहरण के लिए, आप पिछले अनुरोध के लिए `abort` कह सकते हैं, या तर्क को` ManagerView.set` में स्थानांतरित कर सकते हैं।

`ManagerView` क्या करता है? `सेट (नाम, डेटा)` विधि दो मापदंडों को लेती है: इसके निर्माण के लिए "स्क्रीन" और "डेटा" का नाम। हमारे मामले में, कार्य बहुत सरल है, और `सेट` विधि आईडी द्वारा वांछित तत्व प्रदर्शित करता है। यह पोस्टफ़िक्स `” ऐप - ”+ नाम`, और HTML बनाने के लिए डेटा नाम का उपयोग करता है। इसके अलावा, `ManagerView` को पिछली स्क्रीन का नाम याद रखना चाहिए और निर्धारित करना चाहिए कि उपस्थिति को सही ढंग से हेरफेर करने के लिए मार्ग शुरू हुआ / बदल गया / समाप्त हो गया।

इसलिए हमने अपने स्वयं के `राउटर` और` मेनेजर व्यू` के साथ एक-पेज का एप्लिकेशन बनाया, लेकिन समय बीत जाएगा और आपको नई कार्यक्षमता जोड़ने की आवश्यकता होगी। उदाहरण के लिए, "लेख" अनुभाग, जहां "कार्यों" और उनके लिंक का वर्णन होगा। "काम" देखने के लिए स्विच करते समय, आपको उपयोगकर्ता के लिए जहां पर निर्भर करता है, लिंक "लेख पर वापस" या "गैलरी पर वापस" बनाने की आवश्यकता होती है। लेकिन यह कैसे करें? न तो 'ManagerView` और न ही' Router 'के पास ऐसा डेटा है।

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

जैसा कि आप देख सकते हैं, ऐसा राउटर कार्यों को हल नहीं करता है, इसलिए, साइकिल का आविष्कार न करने के लिए, मैं खोज इंजन में गया, आदर्श (मेरी समझ में) राउटर के लिए आवश्यकताओं की सूची संकलित:

• सबसे लचीला मार्ग विवरण वाक्यविन्यास (उदाहरण के लिए, एक्सप्रेस की तरह)
• अनुरोध के साथ काम करें, और न केवल व्यक्तिगत मापदंडों के साथ (उदाहरण के रूप में)
• मार्ग की "शुरुआत", "परिवर्तन" और "अंत" की घटनाओं (/ गैलरी / क्यूबिज़्म / -> / गैलरी / क्यूबिज़्म / 12 / पृष्ठ / 2 -> / कलाकृति / 123 /)
• एक मार्ग के लिए कई हैंडलर असाइन करने की क्षमता
• रूट आईडी को असाइन करने और नेविगेट करने की क्षमता
• बातचीत का दूसरा तरीका `डेटा view → व्यू` (यदि संभव हो तो)

जैसा कि आप अनुमान लगा सकते हैं, मुझे वह नहीं मिला जो मैं चाहता था, हालाँकि मैं बहुत योग्य समाधानों के साथ आया था, जैसे:

• चौराहे.जेएस - मार्गों के साथ बहुत शक्तिशाली काम
• Path.js - मार्ग के "शुरुआत" और "अंत" की घटनाओं का कार्यान्वयन है, 1KB (क्लोजर कंपाइलर + gzipped)
• Router.js - सरल और कार्यात्मक, केवल 443 बाइट्स (क्लोजर कंपाइलर + gzipped)

पायलट

और अब यह वही करने का समय है, लेकिन पायलट का उपयोग कर रहा है। इसमें तीन भाग होते हैं:

1. पायलट - राउटर ही
2. पायलट.आउट - रूट कंट्रोलर
3. Pilot.View - उन्नत मार्ग नियंत्रक, इनहेरिट करता है। पायलट

मार्गों के लिए जिम्मेदार नियंत्रकों को परिभाषित करें। आवेदन की HTML संरचना लेख के पहले भाग में उदाहरण के समान है।

 // ,     var pages = {}; //     pages.index = Pilot.View.extend({ el: "#app-index" }); //   pages.gallery = Pilot.View.extend({ el: "#app-gallery", template: function (data/**Object*/){ /*    this.getData() */ return html; }, loadData: function (req/**Object*/){ // app.find —  $.Deferred(); return app.find(req.params, this.bound(function (items){ this.setData(items); })); }, onRoute: function (evt/**$.Event*/, req/**Object*/){ //    routerstart  routeend this.render(); } }); //   pages.artwork = Pilot.View.extend({ el: "#app-artwork", template: function (data/**Object*/){ /*    this.getData() */ return html; }, loadData: function (req/**Object*/){ return api.findById(req.params.id, this.bound(function (data){ this.setData(data); })); }, onRoute: function (evt/**$.Event*/, req/**Object*/){ this.render(); } }); 

मार्गों के बीच स्विच करने से स्क्रीन में परिवर्तन होता है, इसलिए उदाहरण में मैं पायलट का उपयोग करता हूं। दृश्य। DOM तत्वों के साथ काम करने के अलावा, इसकी कक्षा का एक उदाहरण शुरुआत में रूटस्टार्ट और रूटेंड इवेंट्स के लिए सब्सक्राइब किया गया है। इन घटनाओं का उपयोग करके, Pilot.View संबंधित DOM तत्व को 'डिस्प्ले: कोई नहीं' या इसे हटाकर प्रदर्शित करता है। नोड को 'एल' संपत्ति के माध्यम से सौंपा गया है।

तीन प्रकार के कार्यक्रम हैं: रूस्टार्ट, रूनचेंज और रूटेंड। उन्हें राउटर द्वारा कंट्रोलर (ओं) के पास बुलाया जाता है। योजनाबद्ध रूप से, यह इस तरह दिखता है:

तीन मार्ग और उनके नियंत्रक हैं:

  "/" -- pages.index "/gallery/:page?" -- pages.gallery "/artwork/:id/" -- pages.artwork 

प्रत्येक मार्ग में कई URL हो सकते हैं। यदि नया URL वर्तमान मार्ग से मेल खाता है, तो राउटर एक रूचेक घटना उत्पन्न करेगा। यदि मार्ग बदल गया है, तो उसके नियंत्रक को रूटएंड घटना प्राप्त होती है, और नए के नियंत्रक को रूटस्टार्ट घटना प्राप्त होती है।

  "/" -- pages.index.routestart "/gallery/" -- pages.index.routeend, pages.gallery.routestart "/gallery/2/" -- pages.gallery.routechange "/gallery/3/" -- pages.gallery.routechange "/artwork/123/" -- pages.artwork.routestart, pages.gallery.routeend 

कंटेनर की दृश्यता को बदलने के अलावा (`this.el`), एक नियम के रूप में, आपको इसकी सामग्री को अपडेट करने की आवश्यकता है। ऐसा करने के लिए, Pilot.View में निम्न विधियाँ हैं जिन्हें कार्य के आधार पर पुनर्परिभाषित करने की आवश्यकता है:

टेम्पलेट (डेटा) - एक टेम्पलेट विधि जिसके भीतर एचटीएमएल बनता है। उदाहरण लोडडेटा में प्राप्त डेटा का उपयोग करता है।

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

onRoute (evt, req) - सहायक घटना। रूटेस्टार्ट या रेकचेंज के बाद कॉल किया जाता है। उदाहरण का उपयोग रेंडर विधि को कॉल करके कंटेनर की सामग्री को अपडेट करने के लिए किया जाता है।

रेंडर () HTML कंटेनर को अपडेट करने की एक विधि है (`this.el`)। इसे कॉल करता है ।emplate (this.getData ())।

अब यह एप्लिकेशन का निर्माण करने के लिए बना हुआ है। ऐसा करने के लिए, हमें एक राउटर की आवश्यकता है:

 var GuideRouter = Pilot.extend({ init: function (){ //     : this .route("index", "/", pages.index) .route("gallery", "/gallery/:tag/:prePage?(/page/:page/)?", pages.gallery) .route("artwork", "/artwork/:id/", pages.artwork) ; } }); var Guide = new GuideRouter({ //  ,       el: "#app", //  HistoryAPI useHistory: true }); //   Guide.start(); 

सबसे पहले, हम एक राउटर बनाते हैं और `इनिट` विधि में मार्गों को परिभाषित करते हैं। मार्ग `मार्ग` विधि द्वारा निर्धारित किया जाता है। यह तीन तर्क लेता है: मार्ग आईडी, पैटर्न और नियंत्रक।

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

गैलरी मार्ग पर विचार करें:

 //       this.route("gallery", "/gallery/:tag/:prePage?(/page/:page/)?", …) //     ,    `page`. //    ,     . Guide.getUrl("gallery", { tag: "cubism" }); // "/gallery/cubism/"; Guide.getUrl("gallery", { tag: "cubism", page: 2 }); // "/gallery/cubism/page/2/"; Guide.getUrl("gallery", { tag: "cubism", page: 2, perPage: 20 }); // "/gallery/cubism/20/page/2/"; 

यह बहुत आसानी से निकला: मार्ग और URL एक और समान हैं। यह कोड में स्पष्ट URL और उत्पन्न URL के लिए अतिरिक्त तरीके बनाने की आवश्यकता से बचा जाता है। इच्छित मार्ग पर जाने के लिए, Guide.go (id, params) का उपयोग करें।

अंतिम चरण लिंक आईडी को बाधित करने और इतिहास एपीआई का उपयोग करने के विकल्पों के साथ एक गाइड राउटर उदाहरण बनाना है। डिफ़ॉल्ट रूप से, पायलट location.hash के साथ काम करता है, लेकिन आप history.pushState का उपयोग कर सकते हैं। ऐसा करने के लिए, Pilot.pushState = true सेट करें। लेकिन, यदि ब्राउज़र location.hash या history.pushState का समर्थन नहीं करता है, तो इतिहास एपीआई के पूर्ण समर्थन के लिए आपको पॉलीफ़ाइल, या किसी अन्य उपयुक्त लाइब्रेरी का उपयोग करने की आवश्यकता है। कार्यान्वयन के दौरान, आपको दो तरीकों को फिर से परिभाषित करना होगा - Pilot.getLocation () और Pilot.setLocation (req)।

बस इतना ही। अन्य विकल्प दस्तावेज में पाए जा सकते हैं।
आपके सवालों, मुद्दे और किसी अन्य प्रतिक्रिया की प्रतीक्षा में:]

उपयोगी लिंक

- उदाहरण ( app.js )
- प्रलेखन
- सूत्र
- jquery.leaks.js ( jQuery.cache की निगरानी के लिए उपयोगिता)