🤔 🧦 🥘 स्केलेबल जावास्क्रिप्ट अनुप्रयोग 🥫 💚 👻

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

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

यह लेख एक बड़े वेब एप्लिकेशन को कैसे एक्स्टेंसिबल और समर्थित बनाने के बारे में है: वास्तुकला, दृष्टिकोण, नियम।

यदि आप एक वेब एप्लिकेशन पर काम कर रहे हैं, तो ज्यादातर समय आप कोड लिखने, बग को ठीक करने में बिताते हैं। केवल एक छोटा हिस्सा नई कार्यक्षमता जोड़ने के लिए जाता है। कोई भी परिष्कृत वेब एप्लिकेशन लगातार बदल रहा है। आज - 1 पंक्ति, कल - 20, परसों - 300।

आइए देखें कि साइटों पर किस तरह का कोड है:

$(function () { //     $('#button').click(function (event) { alert(this.innerHTML); }); $('#list').uberScrollerPluginStart({ "theme": "red" }); $('#lazy_thing').click(function () { $.get('/lazy/thing/body.html', doLazyLoad.bind(this)); }); /*       */ });

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

अगर हम इस आर्किटेक्चर को GMail, Yandex.Mail, Yahoo! Portal!, Twitter पर लागू करते हैं, तो हमें कोड (10000+ लाइनें) की एक विशाल गेंद मिलती है, जो कई लोगों को बनाती है। एक विशाल उलझन को सुलझाना बहुत मुश्किल है, और इससे भी अधिक भ्रमित करने के लिए ताकि कुछ भी न टूटे। वेब एप्लिकेशन लगातार विकसित हो रहे हैं, इसलिए इस तरह की उलझन को लगातार सुलझाना और भ्रमित करना है।
साइट कोड संरचित नहीं है, और इसकी वास्तुकला अत्यधिक जुड़ी हुई है। वेब अनुप्रयोगों के लिए, ऐसी वास्तुकला का उपयोग नहीं किया जा सकता है।

आर्किटेक्चर

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

ढांचा

किसी भी आवेदन में, एक नियम के रूप में, एक रूपरेखा शामिल है। सभी ग्राहक चौखटे, चाहे jQuery, Mootools, YUI, dojo, केवल एक टूलबॉक्स हैं। उपकरण आपको नाखूनों को काटने, बोर्डों को काटने में मदद करते हैं। कुछ उपकरण बहुत आवश्यक हैं, कुछ ऐसे हैं जो धूल इकट्ठा कर रहे हैं। यदि कुछ बुनियादी उपकरण हैं, तो भारी जुड़े हुए हैं, उदाहरण के लिए, Backbone.js + Underscore.js
जीवन में, JQuery बॉक्स को Mootools के साथ बदलना आसान है। अब jQuery या अपने पसंदीदा पुस्तकालय को छोड़ने की लागत के बारे में सोचें? प्रतिस्थापन को आसान बनाने के लिए पुस्तकालय कार्यों पर एक आवरण जोड़ना आवश्यक है - यह आवेदन का मूल हो सकता है।

कोर

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

मॉड्यूल

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

वेब अनुप्रयोग मॉड्यूल HTML + सीएसएस + जावास्क्रिप्ट + संसाधनों से मिलकर

मॉड्यूल संसाधन - स्थानीयकरण, वर्णनकर्ता और अन्य निजी मॉड्यूल डेटा।

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

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

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

उप मॉड्यूल

प्रत्येक मॉड्यूल एक माइक्रोप्लिकेशन के रूप में कार्य करता है, जिसके अपने नियम हो सकते हैं; नियमों को वैश्विक लोगों के विपरीत नहीं होना चाहिए। प्रत्येक मॉड्यूल अपने सैंडबॉक्स को अपने भागों में सौंप सकता है, अन्य मॉड्यूल कनेक्ट कर सकता है (परियोजना की विधानसभा के दौरान)।

कर्नेल को परवाह नहीं है कि मॉड्यूल अपने भागों का प्रबंधन कैसे करेगा - इसके लिए यह महत्वपूर्ण है कि प्रत्येक मॉड्यूल के लिए वैश्विक नियमों का सम्मान किया जाए।

अधीनता

सिस्टम के भीतर कनेक्शन की संख्या को कम करने के लिए, हमें एक कठोर अधीनता की आवश्यकता है

- केवल लाइब्रेरी ब्राउज़र और मौजूदा एपीआई के बारे में जानता है
- लाइब्रेरी के बारे में केवल कोर ही जानता है
- केवल सैंडबॉक्स कर्नेल के बारे में जानता है
- प्रत्येक मॉड्यूल केवल अपने सैंडबॉक्स के बारे में जानता है

संपूर्ण एप्लिकेशन के बारे में किसी भी वस्तु को पता नहीं होना चाहिए।

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

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

संचार

हर कोई जानता है कि HTML DOM ईवेंट्स के साथ टीमिंग कर रहा है। घटनाएँ हर जगह हैं - तत्वों में यह है, वे एपीआई (एक्सएचआर, वर्कर्स) में हैं। DOM में ईवेंट दस्तावेज़ ऑब्जेक्ट मॉडल को अनिश्चित काल तक विस्तारित करने और एक्स्टेंसिबल एप्लिकेशन बनाने की अनुमति देता है। मेरा मानना है कि वेब एप्लिकेशन के लिए ईवेंट सबसे अच्छा आधार हैं।

एक उदाहरण पर विचार करें:

 var Module1 = { "someAction": function () { Module2.getSomeValue(); } }; var Module2 = { "getSomeValue": function () { return 'data'; } };

सामान्य योजना में, मॉड्यूल एक दूसरे के साथ सीधे संवाद करते हैं। मॉड्यूल 1 मॉड्यूल 2 और उसके getSomeValue() विधि पर निर्भर करता है। यदि हम मॉड्यूल 2 को हटाते हैं, तो सब कुछ टूट जाएगा।

यदि विधि कॉल को एक घटना से बदल दिया जाता है, तो मॉड्यूल स्वतंत्र हो जाएंगे (शिथिल युग्मित हो जाएंगे)।

 //   var Module1 = { "init": function ($) { $.on('event', function (e) { // $ -  jQuery,   sandbox console.log(e.data); }); } }; var Module2 = { "someAction": function ($) { // $ -  jQuery $.trigger('event', 'data'); } };

मॉड्यूल 1 में, हम ईवेंट ईवेंट को सुनते हैं, मॉड्यूल 2 ईवेंट इवेंट को कुछ डेटा के साथ उठाता है और ईवेंट हैंडलर कंसोल पर डेटा खींचता है

हां, वास्तुकला बहुत बदल रही है, लेकिन हम एक मजबूत कनेक्शन से छुटकारा पा रहे हैं।

अतुल्यकालिक कार्य

घटनाएँ अनिवार्य रूप से अतुल्यकालिक में प्रवेश करती हैं, मुझे लगता है कि हर कोई जानता है कि HTML DOM अतुल्यकालिक विधियों से पूर्ण है। XHR, JSONP, फ़्रेम से डेटा भेज रहा है, कार्यकर्ता को डेटा भेज रहा है और इसके विपरीत। अतुल्यकालिक प्रोग्रामिंग अधिक जटिल है और इसका उपयोग हमेशा उचित नहीं है। लेकिन हमारे मामले में, अतुल्यकालिक कार्य अविश्वसनीय रूप से उपयोगी हो सकते हैं।

आइए एक उदाहरण देखें:

 //   var Storage = { "read": function (key) { return localStorage[key]; } }; var data = Storage.read('key'), pData = process(data); $.trigger('data', pData);

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

चलो स्थानीय कोड के साथ हमारे कोड को फिर से करें:

 //   var Storage = { "read": function (key, cb) { $.get('/read/' + key, cb); } }; Storage.read('key',function(data) { var pData = processData(data); $.trigger('data', pData); }.bind(this));

हमारे पास एक साधारण डेटा अधिग्रहण फ़ंक्शन और स्रोत कोड की 10 लाइनें थीं। हमने 1 लाइन जोड़ी और 4 लाइनों को बदल दिया। लगभग 50% परिवर्तन प्राप्त हुए (और फिर मैंने कोष्ठक को ध्यान में रखा)। यदि हमारी घटनाओं के लिए नहीं है, तो हमें स्टोर कोड का उपयोग करना होगा। डेटा प्राप्त करने और सहेजने के कार्यों में एक अतुल्यकालिक दृष्टिकोण का उपयोग करते हुए, हम भविष्य में कुछ समस्याओं से खुद को बचाते हैं।

एक नियम के रूप में, सभी अतुल्यकालिक तरीके डेटा (XHR, स्थान एपीआई, फ़ाइल एपीआई) भेजने और प्राप्त करने से जुड़े हैं, इसलिए डेटा को अतुल्यकालिक या घटनाओं को जोड़ने और सहेजने के सभी कार्यों को करना बेहतर है।

ऐसी वास्तुकला के फायदे

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

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

उदाहरण: एक स्केलेबल जावास्क्रिप्ट एप्लिकेशन जिसे बनाए रखना आसान है

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

कोर
रेत की खान,
मॉड्यूल: एक मॉड्यूल जो पाठ प्रदर्शित करता है; एक मॉड्यूल जो टाइमर घटनाओं को उत्पन्न करता है; एक मॉड्यूल इस घटना को छानने; मॉड्यूल जो कंसोल में कुछ ईवेंट्स को लॉग करता है।

मैं परियोजना के संयोजन, इकाई परीक्षण और इकाई परीक्षण की स्वचालित पीढ़ी से संबंधित उदाहरणों का हिस्सा दिखाऊंगा ताकि लेख को अधिभार न डालें।

पुस्तकालय और प्रौद्योगिकी

हमेशा की तरह, वहाँ jQuery होगा। लेआउट को व्यवस्थित करने के लिए हम सरलीकृत बीईएम प्रौद्योगिकी का उपयोग करेंगे: ब्लॉक, तत्व, संशोधक। लिपियों के गतिशील लोडिंग के लिए हम $ script.js का उपयोग करेंगे। टेम्प्लेट - रेजिग से एक संशोधित टेम्प्लेट इंजन।

परियोजना की संरचना

  /app /css -        /blocks /b-module-name /b-module-name.css ... ... /pages /index.css ... /descriptors -   /ModuleName.json ... /locales -   /ModuleName.json ... /modules -   /ModuleName.js ... /templates -   /ModuleName.html ... /views -   /ModuleName.html ... /build -    /lib -   /Core.js /test -  /lib /qunit.css /qunit.js /ModuleName -   ModuleName /index.html /index.js /TestData.js -     /vendors -   /Script.js /jQuery.js ... /index.html -   /index.js -  js ,    /index.json -   ...

मॉड्यूल

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

हमारे मॉड्यूल में कई भाग शामिल होंगे:

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

प्रत्येक मॉड्यूल का पर्याप्त नाम होता है, मॉड्यूल का प्रत्येक भाग एक अलग निर्देशिका में स्थित होता है और मॉड्यूल के समान नाम होता है। हमने मॉड्यूल (लेआउट / टेम्पलेट, व्यू, लॉजिक, विवरण और कॉन्फ़िगरेशन, टेक्स) के सभी तार्किक भागों को यथासंभव अलग कर दिया। प्रत्येक मॉड्यूल केवल 2 तरीके निर्यात करता है: init और नष्ट करें:

मॉड्यूल उदाहरण (DataGenerator मॉड्यूल)

 (function(global){ "use strict"; var intervalId; var DataGenerator = { init: function (sandbox) { intervalId = setInterval(function () { sandbox.trigger('newData', Math.random()); }, sandbox.getResource('interval')); }, destroy: function () { clearInterval(intervalId); } }; //  if (!global) { return DataGenerator; } if (!global.exports) { global.exports = {}; } global.exports.DataGenerator = DataGenerator; }(this)) // ;  !

मैं मानता हूं कि कोड में बहुत सारा कचरा है। मॉड्यूल के लिए आवश्यकताओं के कारण हमारे पास बस एक ऐसा प्रारूप है: सत्तावादी कर्नेल, यह मॉड्यूल को खुद से जोड़ता है, इसे सांख्यिकीय और गतिशील रूप से जोड़ा जा सकता है। जावास्क्रिप्ट के पास ऐसा कोई मॉड्यूल नहीं है, इसलिए प्रत्येक अपना स्वयं का रूप बनाता है। कुछ " मानक " हैं, लेकिन अधिक बार यह विशिष्ट कार्यों के लिए एक बाइक है।

डिस्क्रिप्टिव उदाहरण (डेटा-जेनरेटर मॉड्यूल)

 { "name": "DataGenerator", "acl": { "trigger:newData": true //     newData }, "resources": { "interval": 1000 } }

स्थान का उदाहरण (MessageView मॉड्यूल)

 { "text_label": { "ru": " : ", "en": "He said: " } }

नमूना टेम्पलेट (संदेश दृश्य मॉड्यूल)

 <div class="b-message-view"> <span class="b-message-view__label">{%=label%}</span> <span class="b-message-view__value">{%=value%}</span> </div>

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

कोर

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

  var loaderFactory = function (cacheObject, method, format, methodOwner, type) { return function (name) { var dfd = $.Deferred(), self = this; if (cacheObject[name]) { dfd.resolve(); return dfd.promise(); } function successOrFail(object) { var camelCasedType = type.slice(0, 1).toUpperCase() + type.slice(1); self['push' + camelCasedType](name, object); dfd.resolve(); if (object) { // if fail EventManager.trigger(type + ':loaded', {name: name}); EventManager.trigger(type + ':' + name + ':loaded'); } } var path = Core.descriptor.path[type] + format.replace('$0', name); if (type === 'module') { method.call(methodOwner, path, successOrFail); } else if (type === 'template') { method.call(methodOwner, path, successOrFail, 'html').error(successOrFail); } else { method.call(methodOwner, path, successOrFail).error(successOrFail); } return dfd.promise(); } };

ModuleManager

मॉड्यूल प्रबंधक बस मॉड्यूल के हिस्सों को लोड करता है और उन्हें कैश करता है। इसमें लोडिंग (स्टैटिक असेंबली) के बिना मॉड्यूल को पंजीकृत करने के कई तरीके हैं।

  var ModuleManager = { modules: {}, descriptors: {}, locales: {}, templates: {}, pushModule: function (name, module) {}, pushDescriptor: function (name, descriptor) {}, pushLocale: function (name, locale) {}, pushTemplate: function (name, template) {}, load: function (name) {} }; ModuleManager.getModule = loaderFactory(ModuleManager.modules, require, '$0.js', this, 'module'); ModuleManager.getDescriptor = loaderFactory(ModuleManager.descriptors, $.getJSON, '$0.json', $, 'descriptor'); ModuleManager.getLocale = loaderFactory(ModuleManager.locales, $.getJSON, '$0.json', $, 'locale'); ModuleManager.getTemplate = loaderFactory(ModuleManager.templates, $.get, '$0.html', $, 'template');

मैंने ऑब्जेक्ट के कंकाल को छोड़ दिया ताकि यह अधिक स्थान न ले। किसी भी मामले में, कोई भी नहीं पढ़ता है। स्रोत में पूर्ण संस्करण।

साँचा इंजन

हम जॉन रेजिग से एक साधारण टेम्पलेट इंजन का उपयोग करेंगे

 var templateFactory = function(str, data) {}

EventManager

इवेंट मैनेजर ईवेंट्स को हटाता है, हटाता है, कॉल करता है। आवेदन में सभी वैश्विक कार्यक्रम इसके माध्यम से जाते हैं। हम पहिया को सुदृढ़ नहीं करेंगे। EventManager मानक तरीकों के अलावा jQuery.bind jQuery.trigger jQuery.unbind उपयोग करेगा, इसमें एक दिलचस्प विधि होगी - hook , जो घटना के लिए हुक फ़ंक्शन को हुक करता है। हुक फ़ंक्शन ईवेंट मापदंडों की सामग्री को बदल सकता है, यह इवेंट को कॉल करने से भी रोक सकता है।

  var EventManager = { $: $('<div/>'), hooks: {}, trigger: function (event, data) { if (this.hooks[event]) { // Update event data var result = this.hooks[event](data); // Don't trigger event if (result === false) { return this; } // Trigger with new data data = result || data; } this.$.trigger.apply(this.$, [event, data]); return this; }, bind: function () {}, unbind: function () {}, hook: function (event, hookFunction) { // One hook for example this.hooks[event] = hookFunction; return this; }, unhook: function (event) { delete this.hooks[event]; return this; } };

वैश्विक इवेंट मैनेजर का उपयोग करना एक महत्वपूर्ण प्लस है: हम ईवेंट लॉग रिकॉर्ड कर सकते हैं, और फिर लॉग से ईवेंट के पाठ्यक्रम को पुनर्स्थापित कर सकते हैं (उपयोगकर्ता पक्ष पर कीड़े पकड़ने के लिए सुविधाजनक)।

कोर

  var Core = { descriptor: {}, runningModules: {}, //  ,   init: function (descriptorOrFileName, callback) {}, //    _initModules: function (callback) {}, //      initModule: function (name, callback) {}, //   destroyModule: function (name) {}, //  HTMLElement    getBox: function (name) {}, //      getTemplateFunction: function (moduleName, templateSelector) {} };

फ़ंक्शन बॉडी और JSDoc ब्लॉक को हटा दिया।

बाहर से, हमें केवल अपने सभी कर्नेल मॉड्यूल से कुछ तरीकों की आवश्यकता है। हम केवल उन्हें निर्यात करेंगे:

  var CorePublic = { trigger: $.proxy(EventManager.trigger, EventManager), bind: $.proxy(EventManager.bind, EventManager), unbind: $.proxy(EventManager.trigger, EventManager), on: $.proxy(EventManager.bind, EventManager), getModule: $.proxy(ModuleManager.getModule, ModuleManager), getDescriptor: $.proxy(ModuleManager.getDescriptor, ModuleManager), getLocale: $.proxy(ModuleManager.getLocale, ModuleManager), getTemplate: $.proxy(ModuleManager.getTemplate, ModuleManager), pushModule: $.proxy(ModuleManager.pushModule, ModuleManager), pushDescriptor: $.proxy(ModuleManager.pushDescriptor, ModuleManager), pushLocale: $.proxy(ModuleManager.pushLocale, ModuleManager), pushTemplate: $.proxy(ModuleManager.pushTemplate, ModuleManager), init: $.proxy(Core.init, Core), destroyModule: $.proxy(Core.destroyModule, Core), initModule: $.proxy(Core.initModule, Core), getTemplateFunction: $.proxy(Core.getTemplateFunction, Core) };

सैंडबॉक्स

प्रत्येक मॉड्यूल का अपना सैंडबॉक्स होता है, इसलिए हम सैंडबॉक्स निर्माता बनाएंगे जो सैंडबॉक्स को जन्म देता है। सैंडबॉक्स एक तर्क के रूप में मॉड्यूल डिस्क्रिप्टर को प्राप्त करता है। सैंडबॉक्स के सभी तरीके मॉड्यूल का उपयोग कर सकते हैं।

  var Sandbox = function (descriptor) { this.descriptor = descriptor || {}; }; Sandbox.prototype.getBox = function () {}; //      -  Sandbox.prototype.is = function (role) {}; Sandbox.prototype.bind = function (event, callback) {}; Sandbox.prototype.unbind = function (event, callback) {}; Sandbox.prototype.trigger = function (event, data) {}; Sandbox.prototype.hook = function (event, hookFunction) {}; Sandbox.prototype.unhook = function (event) {}; Sandbox.prototype.getText = function (message) {}; Sandbox.prototype.getResource = function (resource) {}; Sandbox.prototype.getTemplate = function (templateSelector) {};

उन कार्यों में ( bind, trigger, hook, ...) जो अन्य ऑब्जेक्ट्स को प्रभावित कर सकते हैं, सैंडबॉक्स यह जांचता है कि क्या यह फ़ंक्शन इस मॉड्यूल (मॉड्यूल डिस्क्रिप्टर का उपयोग करके) पर किया जा सकता है।

कर्नेल विधानसभा

कर्नेल का प्रत्येक भाग एक अलग फ़ाइल में होना चाहिए और प्रीप्रोसेसर द्वारा एक साथ इकट्ठा होना चाहिए, उदाहरण में मैं प्रीप्रोसेसर का उपयोग नहीं करता हूं (यह एक वैक्यूम में गोलाकार है), इसलिए मैंने यह सब एक साथ फेंक दिया।

 (function(global, $, require, undefined){ "use strict"; var templateFactory = function(str, data){}; var loaderFactory = function (cacheObject, method, format, self, type) {}; var ModuleManager = {}; var Sandbox = function (descriptor) {}; var EventManager = {}; var Core = {}; var CorePublic = {}; if (!global) { return CorePublic; } if (!global.exports) { global.exports = {}; } global.exports.Core = CorePublic; }(this, jQuery, $script));

आवेदन का विवरण

एप्लिकेशन में एक डिस्क्रिप्टर भी होता है जो बताता है कि एप्लिकेशन में कौन से मॉड्यूल शामिल हैं, जहां मॉड्यूल के हिस्से स्थित हैं, वर्तमान लोकेल को निर्धारित करता है, मूल मार्कअप का वर्णन करता है। विभिन्न विधानसभाओं के लिए कई विवरणक हो सकते हैं।

 { "modules": ["MessageView", "DataGenerator", "Logger", "Hook"], "layout": { "MessageView": ".b-message-view" }, "locale": "ru", "path": { "descriptor": "./app/descriptors/", "module": "./app/modules/", "locale": "./app/locales/", "template": "./app/templates/" } }

आवेदन: index.js

जैसा कि आप एप्लिकेशन डिस्क्रिप्टर से समझते हैं, हमारे पास 4 मॉड्यूल होंगे। सर्वर के साथ किसी भी बातचीत के बिना आवेदन सबसे सरल निकला। मैं लेख में मॉड्यूल कोड संलग्न नहीं करता - यह भंडार में है।

MessageView - newData इवेंट पर एक संदेश प्रदर्शित करता है
DataGenerator - डेटा के साथ एक दूसरी बार एक नयाडेटा उत्पन्न करता है।
लकड़हारा - नयाडाटा घटना को सुनता है और जो आता है उसे कंसोल पर लिखता है
हुक - नयाडाटा घटना पर एक हुक लटका।यदि कोई स्ट्रिंग इवेंट में आती है, तो हुक इवेंट को निरस्त कर देता है। यदि 0.5 से कम संख्या आती है, तो इसे 100 से गुणा किया जाता है।

सभा

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

असेंबली इंडेक्स ।js

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

 /*$require: ./lib/Core.js */ (function (Core) { "use strict"; /*$buildFrom ./index.json */ Core.on('ready', function () { Core.trigger('newData', 'Pewpew'); }); Core.init(/*$require*/'./index.json'/*$*/); }(this.exports.Core))

असेंबली के बाद, फ़ाइल कुछ इस तरह दिख सकती है:

 //   Core.js (function (Core) { "use strict"; // + descriptors/Logger.json Core.pushDescriptor("Logger", { "name": "Logger", "acl": { "listen:newData": true, "listen:ready": true } }); // - descriptors/Logger.json // + modules/Logger.js Core.pushModule("Logger", (function(global){ // ... }(this))); // - modules/Logger.js // + locales/Logger.js Core.pushLocale("Logger", {}); // - locales/Logger.js // ...  -  .... Core.on('ready', function () { Core.trigger('newData', 'Pewpew'); }); Core.init({ "modules": ["MessageView", "DataGenerator", "Logger", "Hook"], "layout": { "MessageView": ".b-message-view" }, "locale": "ru", "path": { "descriptor": "./app/descriptors/", "module": "./app/modules/", "locale": "./app/locales/", "template": "./app/templates/" } }); }(this.exports.Core))

सी requireसब कुछ स्पष्ट है, लेकिन buildFromथोड़ा और अधिक जटिल के साथ। यह फ़ंक्शन कुछ फ़ाइलों को संलग्न करने के लिए एप्लिकेशन डिस्क्रिप्टर का उपयोग करता है। हमारे मामले में, मैंने मॉड्यूल को इकट्ठा किया Logger(बाकी भी किसी तरह जुड़े हुए हैं)। तर्क buildFromथोड़ा और जटिल हो सकता है, यह स्थानीयकरण (हमारे मामले में, इसे हटा दें "en": "He said: ") को साफ कर सकता है, प्रारंभिक जांच कर सकता है, आदि।
देव वातावरण के लिए, एप्लिकेशन का निर्माण नहीं किया जा सकता है - मॉड्यूल गतिशील रूप से कर्नेल द्वारा लोड किए गए हैं।

विधानसभा index.css

उदाहरण में, हमारे पास एक सरल मॉड्यूल संरचना है: प्रत्येक मॉड्यूल में 1 ब्लॉक है, इसलिए हम खुद को एक गोलाकार कलेक्टर में एक वैक्यूम में प्रतिबंधित करते हैं:

 /*$buildFrom: ../../index.json */ /* app/css/blocks/b-message-view/b-message-view.css */ .b-message-view { color: green; font-family: monospace; }

buildFromसंदर्भ में तर्क cssनिम्नलिखित है: वह लेआउट के लिए एप्लिकेशन कॉन्फ़िगरेशन को देखता है और प्रत्येक लेआउट के लिए, हमारे साथ संबंधित ब्लॉक को जोड़ता है, यह b-message-viewसभी सरल है। यह विधानसभा का एक अत्यंत सरल संस्करण है, जो अधिक जटिल अनुप्रयोगों के लिए उपयुक्त नहीं हो सकता है, लेकिन यह एक उदाहरण के लिए पर्याप्त है। उदाहरण के लिए, BEM बिल्डर अनुप्रयोग के ब्लॉक का वर्णन करते हुए एक json फ़ाइल का उपयोग करता है।

विधानसभा index.html

हमारे पास index.cssऔर है index.js। हम विधानसभा के लिए एक ही प्रीप्रोसेसर का उपयोग करेंगेindex.html

 <!DOCTYPE HTML> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title></title> <!--$require: index.css--> <link rel="stylesheet" href="app/css/pages/index.css" /> <!--$--> </head> <body> <!--$buildFrom: index.json--> <div class="b-message-view"></div> <!--$--> <script type="text/javascript" src="http://yandex.st/jquery/1.6.1/jquery.js"></script> <!--$require: index.js--> <script type="text/javascript" src="./vendors/Script.js"></script> <script type="text/javascript" src="./lib/Core.js"></script> <script type="text/javascript" src="./index.js"></script> <!--$--> </body> </html>

buildFromHtml के संदर्भ में तर्क निम्नलिखित है (css के समान): यह लेआउट के लिए एप्लिकेशन कॉन्फिग को देखता है और प्रत्येक लेआउट के लिए हमारे लिए संबंधित div बनाता है b-message-view। एक बार फिर मैं कहूंगा कि यह विधानसभा का सबसे सरल संस्करण है। आप xslt, होशियार संग्राहकों का उपयोग कर सकते हैं।

उत्पादन में हम प्राप्त:

 <!DOCTYPE HTML> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title></title> <link rel="stylesheet" href="/index.css" /> </head> <body> <div class="b-message-view"></div> <script type="text/javascript" src="http://yandex.st/jquery/1.6.1/jquery.js"></script> <script type="text/javascript" src="/index.js"></script> </body> </html>

मेकफाइल - महासभा

कलेक्टर क्या करता है:

Index.css बनाने के लिए एक पूर्वप्रक्रमक चलाता है
Index.css को ऑप्टिमाइज़ करता है: डेटा / uri, आदि।
Index.css को संकुचित करता है (gz वैकल्पिक)
Index.css संसाधन बनाता है: चित्र
स्वचालित इकाई परीक्षण चलाता है (नीचे)
Index.js बनाने के लिए एक पूर्वप्रक्रमक चलाता है
सूचकांक सूचकांक। मान्य करता है
Index.js (gz वैकल्पिक) को संपीड़ित करता है
आपके OS .deb .rpm के लिए एक पैकेज बनाता है
पैकेज को रिपॉजिटरी में रखता है
पैकेज स्थापित करता है

इकाई परीक्षण

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

हमारे एप्लिकेशन डिस्क्रिप्टर और मॉड्यूल डिस्क्रिप्टर का उपयोग करके, हम यूनिट परीक्षणों के स्वचालित निर्माण का उपयोग कर सकते हैं। जनरेटर (यह एक वैक्यूम में भी गोलाकार है) आवश्यक मॉड्यूल संसाधनों को इकट्ठा करेगा और मॉड्यूल डिस्क्रिप्टर में acl का उपयोग करके, उन घटनाओं के लिए परीक्षण कंकाल बनाएगा जो मॉड्यूल उत्पन्न करता है और सुनता है। बाकी सब कुछ हैंडल है।

एक नियम के रूप में, प्रत्येक घटना का अपना प्रारूप होता है, परीक्षण कार्य को आसान बनाने के लिए, हम एक घटना नमूना बनाएँगे:

 var TestData = { "newData": function () { var data = [NaN, Infinity, window, Error, 'pewpewpew', '<b>Pewpew</b>', '"', '\'', new Date, Date, Math, 42, 8, -1, 0, false, true]; return data; } };

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

टेस्ट कोड: index.js

 // MessageView test (function (Core, $, TestData, ok, test, module, equals, expect, asyncTest, start, stop) { "use strict"; //    var ApplicationEnvironment = { "modules": ["MessageView"], "layout": { "MessageView": ".b-message-view" }, "locale": "ru", "path": { "descriptor": "../../app/descriptors/", "module": "../../app/modules/", "locale": "../../app/locales/", "template": "../../app/templates/" } }; Core.on('ready', function () { module("MessageView"); //  1 test("listen:newData", function() { var testItems = TestData["newData"](), $MessageView = Core.getBox("MessageView"), template = Core.getTemplateFunction("MessageView", '.b-message-view'), label = Core.getText("MessageView", "text_label"); expect(testItems.length); // >>> put your code $.each(testItems, function (index, text) { Core.trigger("newData", [text]); // >>> put your code var expected = template({label: label, value: text}); // <<< equals(expected, $MessageView.html(), 'Should be "text_label: value"'); // <<< }); }); //  2 test("trigger:newData:display", function() { var testItems = TestData["newData"](), $MessageView = Core.getBox("MessageView"), template = Core.getTemplateFunction("MessageView", '.b-message-view'); expect(testItems.length); // >>> put your code Core.on("newData:display", function () { // <<< ok(true); // <<< }); // <<< $.each(testItems, function (index, item) { Core.trigger("newData", [item]); // >>> put your code }); }); }); Core.init(ApplicationEnvironment); }(this.exports.Core, jQuery, TestData, ok, test, module, equals, expect, asyncTest, start, stop))

कोड के इस सभी द्रव्यमान में से, डेवलपर को केवल 5 लाइनों को जोड़ना चाहिए, मैंने उन्हें " <<<" के साथ चिह्नित किया ।

परीक्षण कोड index.html स्पष्ट है - मैं इसे लागू नहीं करता।

परीक्षण के साथ परीक्षण स्वचालन और कोड कवरेज

यदि आप स्वचालित परीक्षण का उपयोग नहीं करते हैं, तो आपके परीक्षणों की उपयोगिता 60 प्रतिशत कम हो जाती है (आप सभी ब्राउज़रों पर लगातार परीक्षण नहीं चला सकते हैं, और यह एक कृतघ्न काम है)। यदि आप परीक्षणों के साथ कोड कवरेज का परीक्षण नहीं करते हैं, तो ऐसे परीक्षणों के लाभ भी कम हो जाते हैं (एक महत्वपूर्ण बिंदु को याद करने का मौका है)। कई चौखटे हैं जो इस कार्य को बहुत सरल करते हैं (यह इस लेख का विषय नहीं है, इसलिए मैं इसे पारित करने में उल्लेख करूंगा):
- js-test-driver - क्विट के साथ दोस्त है, इसमें एक अंतर्निहित कोड कवरेज मॉड्यूल है।
- टेस्टस्वर्म ( विकी ) - रेजिग और मोज़िला लैब्स से मॉड्यूल
- JSCoverage

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

कोड सत्यापन और प्रलेखन विधानसभा

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

सामान्य बिंदु

मैं इस हिस्से को अमूर्त के रूप में तैयार करूंगा। वे न केवल वेब अनुप्रयोगों के लिए मान्य हैं।

अन्य लोग आपके साथ काम करते हैं - उनके काम का सम्मान करते हैं और उनके समय को महत्व देते हैं
( ). JSLint, JSHint !
.
, , ! $textarea.val($textarea.val())
: . — ! — . — . : foo, temp. , ( tmp), , — !
JavaScript, HTML CSS ( ). HTML — , . CSS — . JavaScript — .
. Element.style. , html ( FTW!). CSS Expressions!
. 2-3 !
, . — ! (Array.prototype, Function.prototype)
, — , !
instanceof, typeof, Object.prototype.toString magic
! URL ; ; , ,
विकास प्रक्रिया को स्वचालित करें: स्वचालित परीक्षण उपकरण (js-test-driver), कोड सत्यापन (JSLint, JSHint), कोड असेंबली और प्रलेखन (JSDocToolkit, Dox) का उपयोग करें। यदि परीक्षण सर्वर दूरस्थ रूप से स्थित है, तो Ctrl + S द्वारा स्वचालित फ़ाइल अपलोड को कॉन्फ़िगर करें। कोड जनरेटर का उपयोग करें: परीक्षण, मॉड्यूल कंकाल।

उदाहरण अनुप्रयोग कोड

GitHub स्केलेबल-जेएस-ऐप (मॉड्यूल, टिप्पणियों का पूरा पाठ) पर स्रोत झूठ बोलते हैं

: आवेदन में क्या नहीं है: स्वचालित विधानसभा, इकाई परीक्षणों की स्वचालित पीढ़ी, सभी परीक्षण (संदेश दृश्य को छोड़कर), स्वचालित प्रलेखन विधानसभा।

पढ़ें / देखें

एंड्रयू ड्यूपॉन्ट (गोवल्ला, प्रोटोटाइप.जेएस, एस 2) - बनाए रखने योग्य जावास्क्रिप्ट
Nicholas Zakas (Yahoo!, YUI, YUI Test) — Writing Maintainable JavaScript . ,
Nicholas Zakas — Scalable JavaScript Application Architecture
" JavaScript " .

PS और इसलिए, आपने सभी कोड को फिर से लिखने का फैसला किया, JSHint / JSLint का उपयोग करके कोड को साफ़ करें। बंद करो! रीमेक करने के लिए आपको बहुत समय लगेगा, परीक्षण करने के लिए और भी अधिक रीमेक क्योंकि निश्चित रूप से कम से कम कुछ टूट जाएगा (यदि आपके पास यूनिट टेस्ट नहीं हैं, तो यह संभवतः होगा)। नए मानक के अनुसार एक नया कोड बनाएं, और पुराने को संशोधित करें, जब आप इसका हिस्सा बदलते हैं।

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

स्केलेबल जावास्क्रिप्ट अनुप्रयोग

आर्किटेक्चर

ढांचा

कोर

मॉड्यूल

उप मॉड्यूल

अधीनता

संचार

अतुल्यकालिक कार्य

ऐसी वास्तुकला के फायदे

उदाहरण: एक स्केलेबल जावास्क्रिप्ट एप्लिकेशन जिसे बनाए रखना आसान है

पुस्तकालय और प्रौद्योगिकी

परियोजना की संरचना

मॉड्यूल

मॉड्यूल उदाहरण (DataGenerator मॉड्यूल)

डिस्क्रिप्टिव उदाहरण (डेटा-जेनरेटर मॉड्यूल)

स्थान का उदाहरण (MessageView मॉड्यूल)

नमूना टेम्पलेट (संदेश दृश्य मॉड्यूल)

कोर

ModuleManager

साँचा इंजन

EventManager

कोर

सैंडबॉक्स

कर्नेल विधानसभा

आवेदन का विवरण

आवेदन: index.js

सभा

असेंबली इंडेक्स ।js

विधानसभा index.css

विधानसभा index.html

मेकफाइल - महासभा

इकाई परीक्षण

टेस्ट कोड: index.js

परीक्षण के साथ परीक्षण स्वचालन और कोड कवरेज

कोड सत्यापन और प्रलेखन विधानसभा

सामान्य बिंदु

उदाहरण अनुप्रयोग कोड

पढ़ें / देखें

More articles: