क्या आपको वास्तव में अपने js, html और css को अलग रखना चाहिए?


10

मैं हर समय सुनता / पढ़ता हूं कि अपने js , html और css को अलग रखना क्लीनर है । माना जाता है कि इसे बनाए रखना, डिबग करना अधिक आसान है। माना जाता है कि यह अधिक कुशल है, क्योंकि यह सीएसएस और जेएस फाइलों को कैशिंग / छोटा करने की अनुमति देता है ।

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

इस संगठन के साथ - जो मुझे जितना साफ लगता है, वह पुन: प्रयोज्य को अधिकतम कर सकता है - मुझे यह समझने में परेशानी होती है कि सभी जेएस और सीएसएस को अलग-अलग फाइलों में रखना सरल क्यों होगा । मुझे लगता है कि यह उदाहरण के लिए बहुत सरल होगा :

कई विजेट फ़ाइल का चयन करें

  • एचटीएमएल
  • बुनियादी सीएसएस लेआउट
  • जेएस के एक बिट के साथ प्रत्यक्ष बातचीत और UX संवर्द्धन का नियंत्रण।

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

इसलिए मुझे यह जानकर अच्छा लगेगा कि आप लोग अपने कोड को कैसे व्यवस्थित करते हैं, यदि आप उस अलगाव से चिपके रहते हैं जो आमतौर पर अनुशंसित होता है।

  • क्या वास्तव में ऐसा करने के अच्छे कारण हैं?
  • क्या ऐसा नहीं है कि आमतौर पर वेब पर मौजूद गाइड यह मान लेते हैं कि आप किसी भी फैंसी टूल का उपयोग नहीं करेंगे (जिस स्थिति में मैं सर्वश्रेष्ठ प्रथाओं के लिए ऑनलाइन अप-टू-डेट पढ़ना पसंद करूंगा)?
  • क्या यह सिर्फ वरीयता का मामला है?


8
ध्यान रखें कि यदि आप फ़ाइलों से अलग नहीं होते हैं तो आपके उपयोगकर्ता एक बार डाउनलोड करने और उसे कैशिंग करने के बजाय प्रत्येक पृष्ठ पर एम्बेडेड HTML और CSS डाउनलोड करेंगे।
निकोल

@RobertHarvey: ठीक है अच्छा संदर्भ ... लेकिन सामग्री / प्रस्तुति के लिए वहां सूचीबद्ध एकमात्र कारण मशीन की पठनीयता में सुधार है। हालाँकि मुझे लगता है कि जेएस के साथ पृष्ठ पर विजेट जोड़े जाने पर कोई फर्क नहीं पड़ता। मूल HTML में उन्हें वैसे भी शामिल नहीं किया गया है!
17

1
@ रेनेसिस: यह एक बड़ी कमी है, सच है ... लेकिन उदाहरण के लिए Django के साथ यह आपके js और css को कई टेम्प्लेट से इकट्ठा करना और उन्हें एक सिंगल फ़ाइल में मर्ज करना काफी आसान है।
17

2
मतलब, आप एक सामान्य वेब पेज, एक मोबाइल वेब पेज और एक प्रिंट करने योग्य पृष्ठ की सेवा कर सकते हैं, बिना प्रत्येक पृष्ठ को खरोंच से हाथ से लिखने के बिना, बस प्रस्तुति (यानी सीएसएस) को घुमाकर।
रॉबर्ट हार्वे

जवाबों:


5

मैं इस संरचना को बनाए रखता हूं

प्रत्येक पृष्ठ या नियंत्रण के लिए, मैं इसे html पृष्ठ (या aspx, या php, आदि) के लिए एक फ़ोल्डर देता हूं। उस फोल्डर में js, xml, images और css फाइल्स के लिए भी फोल्डर हैं। वे पृष्ठ / नियंत्रण विशिष्ट के लिए हैं, साझा संसाधन नहीं।

साइट रूट में, js, xml, चित्र और css फ़ोल्डर भी होते हैं, जिनमें से प्रत्येक में साइट के व्यापक संसाधन होते हैं।

साइट चौड़ी js और css फाइलें सर्वर साइड से लुढ़की हुई हैं और एकल js फाइल के रूप में वापस आ जाती हैं। पृष्ठ विशिष्ट वाले, क्योंकि आमतौर पर प्रति पृष्ठ केवल एक ही होता है, अकेले छोड़ दिए जाते हैं।

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

जब मैं पृष्ठ पर होता हूं, तो मैं पेजएक्स के लिए विशिष्ट संसाधनों को लोड नहीं कर रहा हूं। एकमात्र "कचरा" साइट वाइड रिसोर्स फ़ाइल में हो सकता है, लेकिन जब से यह कैश हो गया है, और कई संसाधन कई स्थानों पर उपयोग किए जाएंगे, यह अधिक कुशल है।


1
बढ़िया है ! मैंने फ़ाइलों को केवल अलग-अलग फ़ोल्डरों में समूहीकृत करने के बारे में नहीं सोचा था, और उन्हें सेवा के लिए एकत्र किया था! यह सभी समस्याओं को संबोधित करता है - कैशिंग, SoC, ... - इनकैप्सुलेशन की अनुमति देते समय। महान !
sebpiq

2

आम तौर पर कन्वेंशन में सामग्री, प्रस्तुति और व्यवहार का पृथक्करण बनाए रखने के लिए JS / CSS / HTML के लिए अलग-अलग फाइलें होती हैं। हालाँकि, अगर गति एक मुद्दा बन जाती है तो कुछ भी हो जाता है।


अलग फ़ाइलें वास्तव में गति में सुधार करती हैं, बल्कि इसे नीचा
दिखाती हैं

एचटीएमएल फ़ाइल में सीएसएस और जेएस की छोटी मात्रा तीन पेज के अनुरोधों के बजाय एक पेज अनुरोध है, जो बड़ी संख्या में पृष्ठों की सेवा के लिए बेहतर हो सकती है। या कम से कम उन्हें आवश्यकतानुसार संयोजित करें - code.google.com/speed/page-speed/docs/rtt.html
ब्राच

1

कई विजेट फ़ाइल का चयन करें

  • एचटीएमएल
  • बुनियादी सीएसएस लेआउट
  • जेएस के एक बिट के साथ प्रत्यक्ष बातचीत और UX संवर्द्धन का नियंत्रण।

मेरे पास एक संगठन उपकरण ( ट्रिनिटी ) है जो आपको बढ़ावा देता है कि आप ऐसा करें।

सिवाय इसके कि विजेट फ़ाइल 3 छोटी फाइलों, HTML, CSS और JS में विभाजित है। इसका मतलब है कि आपके पास अपनी अलग फाइलें हैं लेकिन वे अभी भी जुड़ी हुई हैं।

यह वसा फ़ाइलों की समस्या से बचा जाता है लेकिन फिर भी आपको अलग फ़ाइलों को देता है।

तो बस चिंताओं को अलग करने का मतलब यह नहीं है कि आपके पास एक बड़ी HTML / CSS / JS फाइल होनी चाहिए । आपके पास <HTML, CSS, JS>अपने सभी पुन: उपयोग करने योग्य कूटबद्ध कोड के लिए कई ट्रिपल होने चाहिए

अब इन सभी को एक फ़ाइल में रखने में कुछ भी गलत नहीं है क्योंकि ये स्पष्ट रूप से अलग हैं।

तो एक विजेट जो दिखता है

<div id="wrapper">
  <style scoped> CSS code </style>
  <script> JS code </script>
  HTML code
</div>

ठीक है, और महान है। एक फाइल में सब कुछ होने के अलावा एक अनुरक्षक के लिए सीएसएस / जेएस / एचटीएमएल को मिलाना और मिलान करना बहुत आसान हो जाता है।

यह समय के साथ इसे स्पेगेटी में बदल देता है।

लोगों को अलग फ़ाइलों को बढ़ावा देने का मुख्य कारण दो गुना है

  • अलग डाउनलोड। जैसे ही आप किसी भी css / js कोड को कई "विगेट्स" में कॉपी और पेस्ट करते हैं, आपको उसे अपनी फ़ाइल में डालना होगा।
  • एग्रेसिवली स्पैगेटी कोड को लेखक द्वारा अपनी css / js / html को अच्छी तरह से एक ही फाइल में अलग रखने के लिए निर्भर नहीं होने से पहले से ही ले लेता है

हाँ ... चाड के रूप में एक ही सुझाव! और वास्तव में मैंने तुरंत इसकी कोशिश की, और मैं बेच दिया गया हूं :) यह इतना क्लीनर है जैसा कि ... आपका टूल नोड के लिए सही है? मुझे Django के लिए कुछ इस तरह से ढूंढना चाहिए ...
sebpiq

@sebpiq यह नोड के लिए है, लेकिन मैं इसे क्लाइंट के लिए पोर्ट कर रहा हूं। यह अल्फ़ा भी है और मैं इसे क्लाइंट / सर्वर कोड री-यूज़ सहित संपूर्ण HTML / CSS / JS संगठन मंच बनाने पर भारी काम कर रहा हूँ। मुझे व्यक्तिगत रूप से संदेह है कि आपको अन्य प्लेटफार्मों पर ऐसा कुछ भी मिलेगा, आप इसे ओ /
रेनोस डिस

1

यह html, css और js को अलग करने का एक अच्छा अभ्यास है क्योंकि यह आपकी वेबसाइट को आसान बनाता है।

जब आप शुरू कर रहे हैं, तो आपके पास केवल एक मुख्य सूचकांक हो सकता है। एक ही style.css फ़ाइल, लेकिन आपकी वेबसाइट बढ़ने की संभावना से अधिक, आप कई स्क्रिप्ट और स्टाइलशीट के साथ समाप्त हो जाएंगे जो एक व्यक्तिगत घटक के लिए विशिष्ट हैं या endpoint।

जुदाई का उपयोग करना:

  • अलग जावास्क्रिप्ट अन्य पृष्ठों पर इसका पुन: उपयोग किया जा सकता है
  • अलग सीएसएस पुन: उपयोग के साथ आसानी से साइट को एक नया रूप देने में सक्षम हो सकता है
  • अलग HTML सामग्री नहीं दिखने पर ध्यान केंद्रित किया जा सकता है।

यदि आपकी साइट पर कई पृष्ठों पर उपयोग किया गया है तो सीएसएस / जेएस को भी कैश किया जा सकता है


... और कई "बिल्ड टूल" हैं जो वास्तविक फाइलों को बनाने के लिए जेएस और सीएसएस परिसंपत्तियां (नहीं-तैनात) से अलग-अलग फाइलों को इकट्ठा कर सकते हैं ... संपत्तियों को इकट्ठा करना, हटाना (या पता लगाना) डुप्लिकेट, माइनिंग और जल्द ही।
माइक रॉबिन्सन
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.