जूनियर्स के लिए js कोड का संगठन

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

इस दृष्टिकोण को "मॉड्यूलर जावास्क्रिप्ट" कहा जाता है, और कट के तहत हम सीखेंगे कि इसका उपयोग कैसे किया जाए।



इस लेख को नाम दिया गया है क्योंकि जेडी स्तर के लोग पहले से ही अधिक उन्नत तकनीकों का उपयोग करते हैं और मुझे लगता है कि वे उन्हें टिप्पणियों में साझा करेंगे।

मैंने खुद को निम्न कार्य निर्धारित किया:
"सभी क्लाइंट जेएस कोड को सुविधाजनक तरीके से व्यवस्थित करें ताकि इसे बनाए रखना आसान हो, त्रुटियों की तलाश करें और इसे पूरक करें।"

इसके लिए प्रेरणा किसी और की साइट के साथ काम कर रही थी, जहां सभी जेएस एक बहुत बड़ी फ़ाइल में थे और कुछ को पूरक करने के प्रयास ने एक एपिक हमले का कारण बना।

तकनीक का पूरा बिंदु हमारे आवेदन को मॉड्यूल में तोड़ना है। मैं उन्हें "विजेट" भी कहता हूं, क्योंकि उनके सार को समझना आसान है।

प्रत्येक विजेट एक अलग इकाई है। वह अन्य विगेट्स के बारे में नहीं जानता है और उन्हें सीधे संबोधित नहीं करता है। एक विजेट केवल खुद के साथ काम कर सकता है और ऐसी घटनाओं को उत्पन्न कर सकता है जो अन्य विजेट की सदस्यता ले सकते हैं।

योजनाबद्ध रूप से, एक विजेट हमारी साइट का एक निश्चित हिस्सा है जिसमें विशिष्ट कार्यक्षमता है।



हम मानसिक रूप से अपनी परीक्षा साइट को 3 विजेट में विभाजित कर सकते हैं।
1. ग्लोबल मॉड्यूल - अन्य मॉड्यूल को इनिशियलाइज़ करने के लिए जिम्मेदार होगा।
2. प्रोफाइल - उपयोगकर्ता के अवतार (हाय रिचर्ड :)), और गतिविधि के निर्देशों के साथ एक मेनू प्रदर्शित करता है।
3. पोर्टफोलियो - इस उपयोगकर्ता के लिए चयनित दिशा में काम के उदाहरण प्रदर्शित करता है

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

ग्लोबल मॉड्यूल App.js

//     ,       //   ,   API     var App = (function(){ //       // var someArray = []; //     App.someArray,       //,   API return { init: function(){ //  .          Profile.init(); Portfolio.init(); } } })(); //     App.init(); 

प्रोफाइल.जज प्रोफाइल मॉड्यूल

 var Profile = (function(){ //     ,     var url = 'http://someweb.com'; //    html ,     var el = '.div-profile'; return { //  init: function(){ //         var profileData = this.getData(url); }, getData: function(url){ /* *    ajax   ,         res */ //   this.render(res); }, render: function(){ /* *     html ,     . *        html */ //      . //       jQuery $(el).html(html); //  DOM      this.event(); }, event: function(){ //     .menu-item //   data-list-id $('.menu-item').click(function(){ var id = $(this).data('list-id'); //  .  ,    . //        //   id   $(window).trigger('clickItem', {id: id}); }); } } })(); 

Portfolio.js पोर्टफोलियो मॉड्यूल

 var Portfolio = (function(){ //    $this = this; var el = '.portfolio' return { init: function(){ //    .       $(window).on('clickItem', function(e, data){ $this.getData(data.id) }); }, getData: function(id){ /* *           .       res */ this.render(res); }, render: function(data){ /* *        */ }, event: function(){ /* *    */ } } })(); 

यह हमें क्या देता है

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

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

क्या मैं अपने पोर्टफोलियो में नौकरी पर क्लिक करने पर दिखाई देने वाला पॉपअप जोड़ना चाहता हूं? कोई सवाल नहीं। पोर्टफोलियो मॉड्यूल की घटना विधि में, कुछ ऐसा जोड़ें

 //'.portfolio-item' - -,    $('.portfolio-item').click(function(){ $(window).trigger('showModal'); }); 

अब हमें 'showModal' ईवेंट के लिए अपने एप्लिकेशन के दौरान पॉपअप विंडो जनरेटिंग मॉड्यूल को साइन अप करना होगा और वह यह है।

मुझे उम्मीद है कि यह सामग्री आपके लिए उपयोगी होगी।

विषय पर, मैं आपको लार्जस्केलजेसेरू पढ़ने की भी सलाह देता हूं।

मॉड्यूल के साथ फाइल लोड करने के लिए मैं yepnope.js का उपयोग करता हूं ।

आपका ध्यान देने के लिए धन्यवाद।