Q

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

2010-05-14 12 views 77 likes

77

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

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

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

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

स्रोत

2010-05-14 Andrew

+1

क्या यह वहां 'document.writes' कर रहा है या इसके लिए कोई विशेष कारण नहीं है? –

+8

स्क्रिप्ट शरीर में कहीं भी होने के लिए कानूनी हैं। इसके साथ कुछ भी गलत नहीं है। इसमें इसके प्रभाव (समय, रखरखाव, कोड और लेआउट, व्यक्तिगत वरीयता का अंतःक्रियाकरण) है, लेकिन अन्यथा यह ठीक है। – Tomalak

+0

@earlz - मेरा जवाब देखें कि यह क्यों बुरा है। बस यहाँ एक जीवन बचाने की कोशिश कर रहा है। और मैं सही हूँ। – Jason

A

उत्तर

77

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

स्रोत

2010-05-14 22:11:25 bobince

+10

ऑटोफोकस के लिए +1; कभी-कभी मैं धीमे कनेक्शन पर हूं और पहले क्षेत्र में वापस आने पर पहले कहीं और (सबसे खराब मामले में: पासवर्ड टाइप करना) मजेदार नहीं है। –

+1

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

1

यह निश्चित रूप से कानूनी है, मैं यह उदाहरण के लिए कुछ पन्नों here on Exforsys पर देखा है।

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

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

स्रोत

2010-05-14 22:08:54 ChrisF

12

असल में, यह काफी आम है। उदाहरण के लिए Google's analytics tracking code सिर्फ इस सिंटैक्स का उपयोग करता:

<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>

यदि यह गूगल के लिए काफी अच्छा है ...

स्रोत

2010-05-14 22:09:18 Keltex

+29

-1 - सिर्फ इसलिए कि Google ऐसा कर रहा है इसका मतलब यह नहीं है कि यह अच्छा अभ्यास है। सामान्य! = अच्छा। – Jason

+2

Google Analytics को वैसे भी अत्यधिक गठित किया गया है और ट्रैकिंग के लिए जावास्क्रिप्ट का उनका उपयोग वास्तव में overengineering का एक अच्छा उदाहरण है। – Esko

+0

भी, वे अनुशंसा करते हैं कि आप स्क्रिप्ट को पृष्ठ के निचले हिस्से में रखें, मध्य में नहीं, जहां स्क्रिप्ट को रखा जाना चाहिए यदि आपको उन्हें रखना है। शीर्षलेख में नहीं जहां लोग आमतौर पर उन्हें – Jason

4

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

स्रोत

2010-05-14 22:09:22 Pointy

1

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

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

तो, यह जरूरी भयानक बुराई नहीं है। शायद शानदार रूप से भयानक नहीं है, लेकिन पूरी तरह से भयानक नहीं है। इरादे पर निर्भर करता है। http://developer.yahoo.com/performance/rules.html (पृष्ठ के तल पर जावास्क्रिप्ट)

स्रोत

2010-05-14 22:10:05

2

सबसे अच्छा अभ्यास के लिए याहू ui देखते हैं।

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

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

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

स्रोत

2010-05-14 22:10:27

+0

बड़ा +1! इतने सारे उत्तर, लेकिन उनमें से कोई भी उल्लेख नहीं करता कि HEAD में स्क्रिप्ट अन्य तत्वों को अवरोधित कर सकती हैं (छवियों की तरह! जो धीमे कनेक्शन पर लेआउट को गड़बड़ कर सकती हैं) –

0

कुछ बातें:

यह पूरी तरह से मान्य कोड के लिहाज से है।
यह पूरी तरह से अनुशंसित है।

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

खरीदें और High Performance Javascript पढ़ें। यह जेएस लिखने के तरीके को बदल देगा।

स्रोत

2010-05-14 22:11:42 Jason

+0

* नकारात्मक वोट पर सिर हिलाता है * श्वास – Jason

+2

मेरे डाउनवॉट्स नहीं, लेकिन जब मैं याहू सोचता हूं, तो मुझे लगता है कि 'YAHOO.util.Event.addListener', कुशल/संक्षिप्त जावास्क्रिप्ट नहीं है। मैं एक पुस्तक नहीं पढ़ूंगा और इसे सुसमाचार के रूप में मानूंगा, कभी-कभी आपको ** पृष्ठ में जावास्क्रिप्ट होना चाहिए, उदा। एक परिवर्तनीय गतिशील रूप से प्रस्तुत किया गया है, जो आप बाहरी '.js' में नहीं कर सकते हैं। –

+2

क्या आपने किताब पढ़ी है? यदि आपके पास था, तो आप जान लेंगे कि यह अनुकूलन तकनीक सिखाता है। 'YAHOO.xx.xx.xx' जैसी चीजें स्थानीय रूप से कैश की जाती हैं। अवसर पर, हाँ पृष्ठ पर एक चर प्रस्तुत करना ठीक है, लेकिन आमतौर पर सर्वर से छिपा इनपुट मान सेट करते समय आमतौर पर इसे बाहरी रूप से किया जा सकता है। लेकिन मैंने कहा कि यह * अनुशंसित * नहीं * गलत * है। लेखक, निकोलस जकास, लेखक, उनकी बकवास जानता है, इस पर ध्यान दिए बिना कि उसका नियोक्ता कौन है। – Jason

1

यह पूरी तरह से मान्य है, हालांकि यह रखरखाव को नुकसान पहुंचा सकता है। यह भी देखें Where should I put <script> tags in HTML markup? और Why does the call to this JQuery function fail in Firefox?

स्रोत

2010-05-14 22:11:52 thSoft

3

यह मान्य है!

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

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

// some javascrpt code that perfectly validates in the w3c validator 

//]]> 
</script>

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

स्रोत

2010-05-14 22:12:06 meo

+1

यह सामान्य रूप से एक बुरा अभ्यास है। – Jason

+0

ठीक है बस आपको पोस्ट करने के लिए अच्छा, पढ़ना अच्छा है। मैं वैसे भी ऐसा नहीं करता, लेकिन कभी नहीं कि यह आपके ब्राउज़र को लटका सकता है ... ... यह कैसे आता है? – meo

+1

कोई भी जावास्क्रिप्ट आपके ब्राउज़र को लटका सकता है (कभी-कभी मुझे फ़ायरफ़ॉक्स में 'अलर्ट स्क्रिप्ट' और 'स्क्रिप्ट जारी रखें' विकल्प के साथ उन चेतावनी बॉक्स मिलते हैं)। –

0

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

स्रोत

2010-05-14 22:13:16

3

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

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

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

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

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

स्रोत

2010-05-14 22:14:39

1

यह कई बेहतरीन प्रथाओं में से एक है जो प्रदर्शन में सुधार के बारे में उतना ही है जितना प्रोग्रामिंग के लिए आपके दृष्टिकोण में सुधार के बारे में है। आखिर में उत्पाद को प्राप्त करने में वेब विकास में सबसे ज्यादा मायने रखती है!

स्रोत

2010-05-15 00:03:25 heydenberk

4

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

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

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

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

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

स्रोत

2010-05-15 00:17:22 Gal

1

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

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

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

स्रोत

2010-05-15 02:04:19 Jesse

0

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

स्रोत

2010-05-18 11:51:48 Cheery

+0

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

1

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

कि वास्तव में परियोजना है जो हम मैं इस से पहले नहीं देखा था

स्रोत

2011-07-21 07:08:08 paddy

2

पर काम कर रहे में (आईई लिए especialy) कहर बनाने गया था। ऐसा लगता है कि मैंने कुछ ब्राउज़रों में काम किया है जो मैंने परीक्षण किया है। लेकिन जहां तक मुझे पता है, इस तरह के स्थानों में स्क्रिप्ट टैग डालना मान्य नहीं है।

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

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

एक <script> किसी भी अन्य तत्वों के तहत रखने कोई समस्या नहीं है (लेकिन यह <head> या <body> अंदर होना चाहिए)।

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

स्रोत

2012-08-21 14:49:06

संबंधित मुद्दे

संबंधित मुद्दे