जावास्क्रिप्ट लाइब्रेरी और सीएसएस फ़ोल्डर संरचना को व्यवस्थित करने के लिए सर्वोत्तम अभ्यास [बंद]

Question

आप अपने वेब एप्लिकेशन में अपने js और css फ़ोल्डर को कैसे व्यवस्थित करते हैं?

मेरी वर्तमान परियोजना संरचना इस प्रकार है:

root/
├── assets/
│   ├── js/
│   │   └──lib/
│   ├── css/
│   └── img/
└── index.html

लेकिन यह अधिक जटिल है जब मैं कई जावास्क्रिप्ट पुस्तकालय और सीएसएस प्लगइन का उपयोग करता हूं। जावास्क्रिप्ट प्लगइन अपने .js फ़ाइल और कभी-कभी अपनी .css फ़ाइल के साथ आता है।

उदाहरण के लिए, जब मैं JQuery का उपयोग JQueryUI प्लगइन के साथ करता हूं, तो मैं js / lib निर्देशिका में jquery.js और jquery-ui.js डाल देता हूं। लेकिन JQueryUI अपनी css फाइल के साथ आता है। मुझे सर्वश्रेष्ठ अभ्यास के लिए जावास्क्रिप्ट प्लगइन से सीएसएस कहाँ लगाना चाहिए? क्या मुझे अपनी css और जावास्क्रिप्ट css प्लगइन को अलग करने के लिए, उन्हें lib फ़ोल्डर के अंदर रखना चाहिए? या कहीं और?

मुझे पता है कि यह एक व्यक्तिगत प्राथमिकता है, लेकिन मैं सिर्फ यह जानना चाहता हूं कि आप लोग अपने प्रोजेक्ट फ़ोल्डर को कैसे व्यवस्थित करते हैं।

अग्रिम में धन्यवाद :)

Comments

अगर सीएसएस घटक से संबंधित है तो सीएसएस को जेएस के समान फ़ोल्डर में रखें। अर्थात। आपके पास table.js है, तो फ़ोल्डर में उसके आगे table.css है। इस तरह आप CSS

— ओलिवर वाटकिंस

यह परियोजना के पैमाने पर निर्भर करता है। आम तौर पर बोलते हुए, IMHO, सभी परियोजनाओं को कार्य धावकों (NPM / GULP) का उपयोग करना चाहिए ताकि आपके पास एक buildफ़ोल्डर और srcफ़ोल्डर होना चाहिए ।

— vsync

Css और Js फोल्डर आजकल के स्टाइल और स्क्रिप्ट हैं

— Yousha Aleayoub

Answer 1

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

आपका प्रोजेक्ट

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

• appcropolis-परियोजना
• मेरी-index.html

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

• appcropolis-परियोजना
• साधन
• विक्रेताओं
• मेरी-index.html

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

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

• appcropolis-परियोजना
• साधन
• सीएसएस
• js
• इमेजिस
• डेटा
• विक्रेताओं
• मेरी-index.html

Js फ़ोल्डर अपने जावास्क्रिप्ट कोड का आयोजन करेगा। इसी तरह, इमेज फोल्डर वह जगह है, जहां आपको उन छवियों को जोड़ना चाहिए जो सीधे आपके आवेदन में index.html या किसी अन्य पेज से उपयोग की जाती हैं। इस चित्र फ़ोल्डर का उपयोग स्टाइलशीट-संबंधित फ़ाइलों को होस्ट करने के लिए नहीं किया जाना चाहिए। आपका CSS कोड और संबंधित चित्र css फ़ोल्डर के अंदर स्थित होना चाहिए । ऐसा करने से, आप उन पृष्ठों का निर्माण कर सकते हैं जो आसानी से विभिन्न विषयों का उपयोग कर सकते हैं और आप अपने एप्लिकेशन को अधिक पोर्टेबल होने की अनुमति देते हैं।

• appcropolis-परियोजना
• साधन
• सीएसएस
• नीली विषय
• background.png
• इमेजिस
• background.png
• नीली theme.css
• मेरी-index.css
• js
• मेरी-index.js
• मेरे संपर्क-info.js
• इमेजिस
• उत्पादों
• computer.jpg
• cellphone.png
• printer.jpg
• मेरी कंपनी-logo-small.png
• मेरी कंपनी-logo-large.png
• डेटा
• कुछ-data.json
• अधिक-data.xml
• टेबल data.csv
• अतिरिक्त data.txt
• विक्रेताओं
• jQuery
• इमेजिस
• अजाक्स loader.gif
• माउस-18-white.png
• jquery.min.js
• jquery.mobile-1.1.0.min.css
• jquery.mobile-1.1.0.min.js
• कुछ-सीएसएस-पुस्तकालय
• कुछ-plugin.jquery
• मेरी-index.html
• मेरे संपर्क-info.html
• मेरी-products.html

पिछला उदाहरण सीएसएस फ़ोल्डर की सामग्री को दर्शाता है । ध्यान दें कि एक फ़ाइल है जिसका नाम default.css है जिसे आपकी मुख्य CSS फ़ाइल के रूप में उपयोग किया जाना चाहिए। डिफ़ॉल्ट स्टाइलशीट द्वारा उपयोग की जाने वाली छवियां छवियों के फ़ोल्डर के अंदर होनी चाहिए । यदि आप वैकल्पिक स्टाइलशीट बनाना चाहते हैं या यदि आप अपनी डिफ़ॉल्ट स्टाइलशीट में परिभाषित नियमों को ओवरराइड करना चाहते हैं, तो आप अतिरिक्त CSS फाइलें और संवाददाता फ़ोल्डर बना सकते हैं। उदाहरण के लिए, आप एक ब्लू-थीम बना सकते हैं। स्टाइल स्टाइलशीट और सभी संबंधित छवियों को ब्लू-थीम के अंदर रख सकते हैंफ़ोल्डर। यदि आपके पास CSS या जावास्क्रिप्ट कोड है जो केवल एक पृष्ठ (इस मामले में my-index.html) द्वारा उपयोग किया जाता है, तो आप पृष्ठ के विशिष्ट कोड को .css और .js फ़ाइलों के साथ उसी नाम के समूह में जोड़ सकते हैं (ei my-index) .css और my-index.js)। आपका सीएसएस और जावास्क्रिप्ट कोड संभव के रूप में एक सामान्य होना चाहिए, लेकिन आप उन्हें अलग-अलग फाइलों में रखकर अपवादों का ट्रैक रख सकते हैं।

 

अंतिम सिफारिशें

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

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

स्रोत क्रेडिट: अपने HTML, CSS और जावास्क्रिप्ट फ़ाइलों को कैसे व्यवस्थित करें

Comments

हाय, अनंत। क्या आप मुझे अगले सवाल के साथ मदद कर सकते हैं: stackoverflow.com/questions/33837168/…

— मैक्सिम झूकोव

आप वीडियो और ऑडियो फ़ाइलें कहाँ रखेंगे? या कस्टम फ़ॉन्ट फ़ाइलें?

— boblapointe

ज़बरदस्त plagarism

— OneCricketeer

Css और Js फोल्डर आजकल के स्टाइल और स्क्रिप्ट हैं

— Yousha Aleayoub

Answer 2

 root/
   assets/
      lib/-------------------------libraries--------------------
          bootstrap/--------------Libraries can have js/css/images------------
              css/
              js/
              images/  
          jquery/
              js/
          font-awesome/
              css/
              images/
     common/--------------------common section will have application level resources             
          css/
          js/
          img/

 index.html

इस तरह मैंने अपने एप्लिकेशन के स्थिर संसाधनों को व्यवस्थित किया।

Comments

लेकिन आप JS स्रोत फ़ाइलें और मिनीकृत फ़ाइलें कहाँ रखते हैं?

— कोकोडको

आप उसी निर्देशिका में रख सकते हैं।

— अखलेश

लगता है कि स्रोत और वितरण के लिए अलग-अलग निर्देशिका होनी चाहिए

— अनूप डी