बड़े जावास्क्रिप्ट अनुप्रयोगों को कैसे संरचित माना जाता है?

Question

मुझे हाल ही में OBIEE मोबाइल ऐप डेवलपर के लिए कुछ जावास्क्रिप्ट प्लगिन दिखाए गए हैं, साथ ही विभिन्न परियोजनाओं के लिए कुछ कस्टम लाइब्रेरी भी दिखाई गई हैं।

OOP पृष्ठभूमि से आने वाले, मैं इन परियोजनाओं की संरचना के बारे में थोड़ा भ्रमित हूं। मैं ऐसी फाइलें देख रहा हूं जो हजारों लाइनें लंबी हैं। मुझे फ़ाइलों और कक्षाओं में चीजों को विभाजित करने के लिए उपयोग किया जाता है लेकिन मैं समझता हूं कि यह एक अलग रूपरेखा है - एक के लिए, फ़ाइल का आकार एक मुद्दा है - लेकिन यह सब करने के लिए एक बेहतर तरीका होना चाहिए?

स्क्रिप्ट की लंबाई न केवल पठनीयता और मुख्यता को प्रभावित करती है, बल्कि एक व्यक्ति की सामान्य समझ भी है कि कार्यक्रम कैसे काम करता है।

बड़े अनुप्रयोगों को कैसे संरचित किया जाता है? इसके लिए कोई सामान्य ओओपी डिजाइन पैटर्न?

Comments

संबंधित (संभवतः एक डुप्लिकेट): क्या कोई ओओ-सिद्धांत हैं जो व्यावहारिक रूप से जावास्क्रिप्ट के लिए लागू होते हैं?

— gnat

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

— जिन्न

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

— neilsimp1

हां, एक सामान्य ओओपी डिजाइन पैटर्न है। इसे टाइपस्क्रिप्ट कहा जाता है। या ES6, यदि आप पसंद करते हैं। टाइपस्क्रिप्ट और ईएस 6 को विशेष रूप से बड़े जावास्क्रिप्ट कार्यक्रमों को पूरा करने के लिए डिज़ाइन किया गया है।

— रॉबर्ट हार्वे

NCZ का यह वीडियो बहुत ही प्रासंगिक है: youtu.be/b5pFv9NB9fs आप मध्यस्थ, घटक और मॉड्यूल-लोडिंग पैटर्न की तलाश कर सकते हैं, जिसके बारे में वह कई प्रमुख रूपरेखाओं में बात करते हैं

— तेहरिशिया

Answer 1

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

खुलासा मॉड्यूल पैटर्न हालांकि आपको बड़ी फ़ाइलों को विभाजित करने और उन्हें व्यवस्थित रूप से व्यवस्थित करने का एक अच्छा तरीका देना चाहिए; हालाँकि जब आप जावास्क्रिप्ट में किसी भी डिज़ाइन पैटर्न के साथ काम कर रहे हों, तो ध्यान रखें कि यह बहुत भ्रामक हो सकता है। उपयोग करने का प्रयास इस , नई , प्रोटोटाइप , .call()और .apply()बुद्धिमानी से।

बड़ी परियोजनाओं पर काम करते समय, ये उपयोगी भी हो सकते हैं:

• यदि संभव हो, तो टाइपस्क्रिप्ट या ES6 पर स्विच करें।
• मॉड्यूलर कोड लिखें । विभिन्न तरीके और तीसरे पक्ष के पुस्तकालय हैं, लेकिन उनमें से कोई भी कुछ भी नहीं से बेहतर है।
• कार्यों को स्वचालित करने के लिए टास्क रनर / बिल्ड सिस्टम का उपयोग करें ।
• डिज़ाइन पैटर्न के बारे में पढ़ें । यह एक अच्छी शुरुआत हो सकती है। जैसा कि मैंने ऊपर कहा, रिवीलिंग मॉड्यूल पैटर्न बहुत उपयोगी है, खासकर यदि आपको लगता है कि आपको सभी लोकप्रिय पैटर्न को मास्टर करने के लिए समय की आवश्यकता है।
• यूनिट टेस्ट लिखें । एक गतिशील भाषा के साथ काम करना अधिक चुनौतीपूर्ण हो सकता है। आपके एप्लिकेशन के महत्वपूर्ण भागों का परीक्षण करने से बहुत समय बच सकता है।
• एक आईडीई या टेक्स्ट एडिटर का उपयोग करें जो वास्तव में आपको कोड लिखने और कीड़े पकड़ने में मदद कर सकता है। WebStorm एक अच्छा विकल्प है। उदात्त पाठ भी।
• यदि आपका आईडीई डिबगर नहीं देता है, तो अपने पसंदीदा वेब ब्राउज़र के डीबगर को मास्टर करने का प्रयास करें।
• पुस्तकालयों का उपयोग करें। परियोजना की प्रकृति के आधार पर, सबसे अच्छा तीसरे पक्ष के कोड को नियुक्त करने का प्रयास करें जो आप पा सकते हैं। यदि आप एक वेब एप्लिकेशन लिख रहे हैं, तो Angular , React और पुराने-पुराने बैकबोन . js पर एक नज़र डालें । यदि आप एक Node.js एप्लिकेशन लिख रहे हैं, तो अपना समय NPM रिपॉजिटरी में सर्च करें । आपको आश्चर्य होगा कि कितने पैकेट पहले से ही वही कर रहे हैं जो आप करने वाले थे।
• भले ही आप परियोजना पर काम करने वाले एकमात्र व्यक्ति हैं, फिर भी Git जैसी संस्करण नियंत्रण प्रणाली का उपयोग करें और एक कोडिंग मानक का पालन करें जो बहुत सख्त और राय वाला नहीं है लेकिन फिर भी एक अच्छी गाइड लाइन प्रदान करता है जिससे आपकी टीम के साथी भी खुश होंगे का पालन करें।
• यहां तक ​​कि अगर आप टाइपस्क्रिप्ट या ईएस 6 के लिए चुनते हैं, तब भी जावास्क्रिप्ट के वर्ग-कम ओओपी को समझना, प्रोटोटाइप ओओपी उपयोगी हो सकता है, विशेष रूप से डिबगिंग करते समय।

Answer 2

मैं एक C ++ डेवलपर हूं और हाल ही में वेब डेवलपमेंट करना शुरू किया है। मैं वेब वातावरण के लिए एक बड़ा डेस्कटॉप ऐप पोर्ट कर रहा हूं। मैं अपने जावास्क्रिप्ट कोड को ठीक उसी तरह से संरचना करता हूं जैसे मैं समान पैटर्न का उपयोग करके सी ++ कोड को संरचित करता हूं। मेरे पास सभी में लगभग 25-30 फाइलें हैं, लेकिन मैं अंत में उपयुक्त के रूप में क्लब करके उन्हें 3-5 तक कम कर दूंगा और उन सभी को छोटा करूंगा।

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

अंत में, एक बात जो मुझे जल्दी पता चली कि जावास्क्रिप्ट सी + + की तुलना में बहुत अधिक संक्षिप्त कोड लिखने की अनुमति देती है, इसलिए कभी-कभी गैर-जेएस भाषा से आने वाली बड़ी संख्या में एलओसी होने के कारण पुराने तरीके से काम करने के कारण हो सकता है। एक बार जब इस बात का पता चल जाता है, तो मुझे ऐसा कुछ भी नहीं दिखता जो वास्तव में अलग होना चाहिए। डिजाइन और एल्गोरिदम सभी भाषा अज्ञेय के बाद हैं।

Answer 3

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

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

Answer 4

कोड पर काम करते समय, अलग-अलग घटकों को आमतौर पर मॉड्यूल में विभाजित किया जाता है, प्रत्येक एक आम तौर पर एक एकल वर्ग को लागू करता है, और प्रत्येक एक अलग फाइल में रहता है। उत्पादन के दौरान, इन फ़ाइलों को एक साथ एक एकल फ़ाइल में बांधा जाता है (इसलिए कोड की हजारों लाइनें जो आप देख रहे हैं) Browserify ( http://browserify.org/ ) या HTTP.Js अनुरोधों की संख्या को कम करने के लिए RequJS जैसी किसी चीज़ का उपयोग करके , लेकिन यह भी सुनिश्चित करने के लिए कि निर्भरता सही क्रम में भरी हुई है

जहां तक ​​इन मॉड्यूल के लिए कक्षाएं कैसे लागू की जाती हैं, यह अंतर्निहित यांत्रिकी में OOP से थोड़ा अलग है, लेकिन सतह पर यह अलग नहीं है। ES6 ने भी classकीवर्ड को पेश किया , इसलिए इसे बहुत परिचित होना चाहिए। एमडीएन पर यह लेख शुरू करने के लिए उपयोगी है: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Inheritance_and_the_prototyp_chain

Answer 5

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

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

मेरे सॉफ़्टवेयर के कार्यान्वयन में कंस्ट्रक्टर और प्रोटोटाइप का उपयोग किया गया है। यदि प्रदर्शन एक मुद्दा बन जाता है तो उदाहरण के सदस्यों के साथ प्रोटोटाइप की जगह अधिक मेमोरी उपयोग की कीमत पर प्रदर्शन में सुधार हो सकता है। ऐरे का भी उपयोग किया जाता है। यदि प्रदर्शन एक मुद्दा बन जाता है तो प्रत्यक्ष संदर्भों का उपयोग किया जाता है।

गुणों में से कुछ का उपयोग किया जाता है eval; बहुत अधिक गुणों वाली वस्तुओं के लिए यह स्रोत फ़ाइल में कोड की मात्रा को कम करेगा - और प्रोग्रामर द्वारा टाइपिंग की मात्रा को कम करेगा।

Answer 6

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

https://addyosmani.com/resources/essentialjsdesignpatterns/book/

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