क्या जावास्क्रिप्ट को HTML के शरीर में एम्बेड करना बुरा व्यवहार है?

Question 1

एक टीम जिस पर मैं काम कर रहा हूं <script>, वह हमारे HTML पृष्ठों के शरीर में यादृच्छिक स्थानों पर टैग का उपयोग करने की आदत में बदल गई है । उदाहरण के लिए:

<html>
    <head></head>
    <body>
        <div id="some-div">
            <script type="text/javascript">//some javascript here</script>
        </div>
    </body>
</html>

मैंने ऐसा पहले नहीं देखा था। यह उन कुछ ब्राउज़रों में काम करने लगता है जिन्हें मैंने परीक्षण किया है। लेकिन जहाँ तक मुझे पता है, इस तरह से स्क्रिप्ट टैग लगाना मान्य नहीं है।

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

Question 2

यह पूरी तरह से वैध है।

आप कोड के बड़े बड़े ब्लॉक को मार्कअप में मिश्रित नहीं करना चाहेंगे (बेहतर बाहरी स्क्रिप्ट का उपयोग करना), लेकिन यह निम्न के लिए उपयोगी हो सकता है:

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

आप उन <style>तत्वों के बारे में सोच रहे होंगे, जिनकी अनुमति नहीं है <body>(हालाँकि अधिकांश ब्राउज़र इसे फिर भी अनुमति देते हैं)।

Question 3

दरअसल, यह काफी सामान्य है। उदाहरण के लिए Google का एनालिटिक्स ट्रैकिंग कोड इस सिंटैक्स का उपयोग करता है:

<script type="text/javascript">
  var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
  document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>

यदि यह Google के लिए पर्याप्त है ...

Question 4

यह मान्य है और, आपके सर्वर-साइड फ्रेमवर्क और कोड की प्रकृति के आधार पर, कभी-कभी बचने के लिए बहुत मुश्किल होता है।

Question 5

जैसा कि कई लोगों ने उल्लेख किया है, यह वैध है, यह काम करता है, और इसका व्यापक रूप से उपयोग किया जाता है।

जहाँ तक शब्दार्थ की सिफारिश की जाती है (या कम से कम उपयोग करने के लिए उपयोग की जाने वाली) की सर्वोत्तम प्रथाएँ हेडर के अंदर स्क्रिप्ट टैग लगा रही हैं।

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

कोड को समझने और बनाए रखने में आसानी के लिए, "विनीत जावास्क्रिप्ट" की सिफारिश की जाती है, जहां कोड एक बाहरी फ़ाइल में होता है और ईवेंट को डोम (Google विनीत जावास्क्रिप्ट) से जोड़ता है।

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

Question 6

मैं बाहरी लिपियों के संदर्भ को सिर में रखना पसंद करता हूं, और स्क्रिप्ट जो चीजों को शुरू करती हैं और विगेट्स को शुरू करती हैं और शरीर में नहीं आती हैं।

एक समस्या जो चलाने में बहुत आसान है वह यह है कि शरीर में एक स्क्रिप्ट तत्व उसके बाद आने वाले तत्वों तक नहीं पहुंच सकता है। इसके अलावा, एक संबंधित गंदा ब्राउज़र संगतता मुद्दा यह है कि IE स्क्रिप्ट तत्वों को उस तत्व को संशोधित करने की अनुमति नहीं देता है जिसमें वे हैं। यदि आपके पास यह है:

<div id="foo">
  <script type="text/javascript">
    document.getElementById("foo")... // do something to it
  </script>
</div>

IE आपके पेज को पसंद नहीं करने वाला है। IE के पुराने संस्करणों ने इसके लिए बहुत ही गुप्त त्रुटि संदेश दिया या पूरे पृष्ठ को खाली कर दिया, लेकिन IE8 एक वर्णनात्मक त्रुटि संदेश देता है।

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

Question 7

यह मान्य है!

आप उपयोग कर सकते हैं:

<script type="text/javascript">
    //<![CDATA[

    // Some JavaScript code that perfectly validates in the W3C validator

    //]]>
</script>

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

Question 8

मैंने ऐसा पहले नहीं देखा था। यह उन कुछ ब्राउज़रों में काम करने लगता है जिन्हें मैंने परीक्षण किया है। लेकिन जहाँ तक मुझे पता है, इस तरह से स्क्रिप्ट टैग लगाना मान्य नहीं है।

यह मान्य है, लेकिन एक अच्छा (या अनुशंसित) अभ्यास नहीं है।

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

<script>किसी भी अन्य तत्वों के तहत रखने में कोई समस्या नहीं है (लेकिन यह अंदर होना चाहिए <head>या <body>)। ब्राउज़र संगतता के मामले में भी कोई समस्या नहीं है, हालांकि, वेब पेजों पर जेएस लिपियों को एम्बेड करना गंभीर नुकसान (कैसे / क्यों वे खराब हैं) प्रस्तुत करता है :

पेज वेट जोड़ता है
खनन के लिए कठिनाई (या शायद असंभव)
अन्य पृष्ठों के लिए माइग्रेट या उपयोग नहीं किया जा सकता है
कैश नहीं किया जा सकता (पेज लोड होने पर हर बार डाउनलोड करने की आवश्यकता होती है)
चिंताओं की जुदाई नहीं (बनाए रखने के लिए कठिन)

Question 9

हालाँकि, यह भी अच्छा है कि आपको पता है कि HTML के एक हिस्से के लिए आवश्यक जावास्क्रिप्ट कोड इसके लिए होने वाला है। फ़ाइल के शीर्ष पर कुछ सम्मिलित करने और बनाने के बजाय।

इसलिए, इसके बजाय "यदि आप इस HTML का उपयोग करने जा रहे हैं, तो सुनिश्चित करें कि आप xyz.js आयात करते हैं" आप बस HTML को शामिल कर सकते हैं और इसके साथ किया जा सकता है।

तो, यह आवश्यक रूप से भयानक बुराई नहीं है। शायद शानदार नहीं, लेकिन पूरी तरह से भयानक भी नहीं। यह इरादे पर निर्भर करता है।

Question 10

सर्वोत्तम अभ्यास के लिए याहू यूआई देखें: http://developer.yahoo.com/performance/rules.html (पृष्ठ के नीचे जावास्क्रिप्ट)

Question 11

यह निश्चित रूप से कानूनी है; मैंने इसे उदाहरण के लिए एक्सफ़ोर्स पर यहां कुछ पृष्ठों पर देखा है ।

अब यह एक ट्यूटोरियल साइट है जो HTML और जावास्क्रिप्ट की मूल बातें दिखाती है, इस संदर्भ में यह पूरी तरह से समझने योग्य है। हालाँकि, मैं इसे एक साधारण कथन या दो से अधिक के लिए उत्पादन कोड में नहीं देखना चाहूंगा। यह देखे बिना कि आपने क्या बदला है, // Some JavaScript code hereमैं टिप्पणी नहीं करना चाहता।

हालांकि इसके साथ कोई ब्राउज़र समस्या नहीं होनी चाहिए।

Question 12

इसमें <script> जोड़ना मान्य है body, लेकिन Internet Explorer वास्तव में इसे पसंद नहीं करता है। तो सुरक्षित पक्ष पर होने के लिए, सुनिश्चित करें कि आपके पास अपनी स्क्रिप्ट <head> टैग के अंदर है।

यह वास्तव में उस परियोजना में कहर पैदा कर रहा था (विशेष रूप से इंटरनेट एक्सप्लोरर के लिए) जिस परियोजना पर हम काम कर रहे हैं।

Question 13

मुझे लगता है कि आपकी टीम या तो ऐसा कर रही है क्योंकि वे एक स्क्रिप्ट को गतिशील रूप से सम्मिलित करना चाहते हैं, या कि वे एक स्क्रिप्ट लिख रहे हैं जो पृष्ठ लोड पर आग लग जाएगी।

मैं यह नहीं कहूंगा कि ऐसा करने में कुछ भी गलत नहीं है जब ABSOLUTELY NECESSARY, (जब तक यह CDATA ब्लॉक में है), लेकिन उसके बाहर, मैं आपकी टीम को सलाह दूंगा कि वे किसी स्क्रिप्ट लाइब्रेरी जैसे कि प्रोटोटाइप या jQuery का उपयोग करें, और रखें स्क्रिप्ट बाहरी पृष्ठ पर। यह आम तौर पर क्लीनर है, और लाइब्रेरी कभी-कभी कोड के लिए थोड़ी सी सफाई के लिए मजबूर करेंगे, जो मैं शर्त लगा सकता हूं कि वर्तमान में नहीं हो रहा है।

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

Question 14

यह कई में से एक है, कई बेहतरीन अभ्यास जो प्रदर्शन में सुधार के बारे में हैं क्योंकि यह प्रोग्रामिंग के लिए आपके दृष्टिकोण को बेहतर बनाने के बारे में है।

अंततः वेब डेवलपमेंट में, उत्पाद को प्राप्त करना सबसे अधिक मायने रखता है!

Question 15

यह पूरी तरह से वैध है, हालांकि यह स्थिरता को नुकसान पहुंचा सकता है। यह भी देखें कि मुझे HTML मार्कअप में <script> टैग कहां रखना चाहिए? और फ़ायरफ़ॉक्स में इस jQuery फ़ंक्शन के लिए कॉल विफल क्यों है? ।

Question 16

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

Question 17

यदि आपके पास एक संपादक है जो HTML और जावास्क्रिप्ट दोनों सिंटैक्स को एक साथ संभाल सकता है। और अगर आप पहले HTML और फिर जावास्क्रिप्ट cpde ... की कुछ पंक्तियों को पढ़ना पसंद करते हैं ... निश्चित रूप से। इसका लाभ उठाएं।

Question 18

कुछ बातें:

यह पूरी तरह से मान्य कोड-वार है।
यह पूरी तरह से अप्राप्त है।

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

उच्च प्रदर्शन जावास्क्रिप्ट खरीदें और पढ़ें । यह आपके जावास्क्रिप्ट कोड लिखने के तरीके को बदल देगा।