आप अपनी जावास्क्रिप्ट कहां डालते हैं?

Question

क्या आप अपने जावास्क्रिप्ट को पृष्ठ पर स्थानांतरित करते हैं, या मास्टर "application.js" या इसी तरह के हैं?

यदि यह उत्तरार्द्ध है, तो यह सुनिश्चित करने के लिए सबसे अच्छा अभ्यास क्या है कि आपका .js गलत पृष्ठों पर निष्पादित नहीं हो रहा है?

संपादित करें: जावास्क्रिप्ट द्वारा मेरा मतलब है कि कस्टम जावास्क्रिप्ट जिसे आप डेवलपर के रूप में लिखते हैं, जेएस पुस्तकालय नहीं। मैं कल्पना नहीं कर सकता कि कोई भी jQuery स्रोत को उनके पृष्ठ में कॉपी/पेस्ट करेगा लेकिन आप कभी नहीं जानते।

Answer 1

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

और हाँ, यदि आप जिन जेएस फाइलों का उपयोग कर रहे हैं उनमें से एक भी Google पर होस्ट किया गया है, तो उस का उपयोग करना सुनिश्चित करें।

Answer 2

व्यक्तिगत रूप से, मैं मॉड्यूल (like YUI does) द्वारा क्रमबद्ध कई जावास्क्रिप्ट फ़ाइलों को शामिल करने का प्रयास करता हूं। लेकिन थोड़ी देर में, जब मैं अनिवार्य रूप से एक लाइनर लिख रहा हूं, तो मैं इसे पेज पर रखूंगा।

Answer 3

सर्वोत्तम अभ्यास शायद इसे on Google's servers डालने के लिए है।

(निर्भर करता है आप "अपने" जावास्क्रिप्ट क्या मतलब है कि मैं एक फ़ाइल में अपने सभी js लाना प्रदर्शन मदद कर सकते हैं लगता है :)

Answer 4

यहां मेरे "दिशानिर्देश" हैं। ध्यान दें कि इनमें से कोई भी औपचारिक नहीं है, वे बस सही काम करने की तरह लगते हैं।

सभी साझा जे एस कोड SITE/javascripts निर्देशिका में रहती है, लेकिन यह 'स्तरों'

साइट-व्यापी सामान के लिए (jQuery की तरह, या मेरी साइट विस्तृत application.js) में भरी हुई है, साइट विस्तृत लेआउट (यह होगा एएसपीनेट में एक मास्टर पेज बनें) फ़ाइल शामिल है। script टैग पेज के शीर्ष पर जाते हैं।

'क्षेत्र-व्यापी' सामान भी है (उदाहरण: जेएस कोड जो केवल साइट के व्यवस्थापक अनुभाग में आवश्यक है)। इन क्षेत्रों में या तो एक सामान्य लेआउट होता है (जिसमें स्क्रिप्ट टैग शामिल हो सकते हैं) या एक सामान्य आंशिक प्रस्तुत करेंगे, और उस आंशिक में स्क्रिप्ट टैग शामिल हो सकते हैं)

कम साझा सामग्री के लिए (मेरी लाइब्रेरी कहें कि केवल इसकी आवश्यकता है कुछ स्थानों) तो मैंने व्यक्तिगत रूप से उन HTML पृष्ठों में script टैग डाला। स्क्रिप्ट टैग पृष्ठ के शीर्ष पर जाते हैं।

ऐसी सामग्री के लिए जो केवल एक पृष्ठ के लिए प्रासंगिक है, मैं बस इनलाइन जावास्क्रिप्ट लिखता हूं। मैं इसे जितना संभव हो सके "लक्ष्य" के करीब रखने की कोशिश करता हूं। उदाहरण के लिए, यदि मेरे पास बटन के लिए कुछ ऑनक्लिक जेएस हैं, तो script टैग बटन के नीचे जाएगा।

इनलाइन जेएस के लिए जिसमें कोई लक्ष्य नहीं है (उदाहरण: onload ईवेंट) यह पृष्ठ के निचले हिस्से में जाता है।

---

तो, कुछ स्थानीय पुस्तकालय, या साइट-व्यापी लाइब्रेरी में कैसे मिलता है?

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

इस तरह की प्रणाली के बारे में एक आम शिकायत यह है कि आप 10 या 20 छोटी जेएस फाइलों के साथ हवाएं करते हैं, जहां 2 या 3 बड़ी जेएस फाइलें नेटवर्किंग बिंदु से बेहतर प्रदर्शन करती हैं। हालांकि, दोनों रेल और एएसपी.नेट में ऐसी विशेषताएं हैं जो कई जेएस फ़ाइलों को संयोजन परिस्थितियों के लिए एक या अधिक 'सुपर' जेएस फाइलों में संयोजित और कैशिंग करती हैं।

मैं वास्तविक स्रोत कोड की गुणवत्ता/पठनीयता की समझौता करने के बजाय इस तरह की सुविधाओं का उपयोग करने की अनुशंसा करता हूं।

Answer 5

मैं प्रस्तुत पृष्ठ पर जावास्क्रिप्ट कार्यों को टालने से बचने की कोशिश करता हूं। आम तौर पर, मेरे पास एक application.js (या root.js) है जिसमें मेनू मैनिपुलेशन जैसी सामान्य कार्यक्षमता है। यदि किसी दिए गए पृष्ठ में विशिष्ट जावास्क्रिप्ट कार्यक्षमता है, तो मैं उस कोड को संभालने के लिए .js फ़ाइल बनाउंगा और उस फ़ाइल को कैसे प्राप्त करें (rendered फ़ाइल के समान नाम का उपयोग करके) पर डीआईआर संरचना की नकल करें।

दूसरे शब्दों में, यदि प्रस्तुत पृष्ठ सार्वजनिक/dir1/dir2/mypage.html में है, तो जेएस फ़ाइल सार्वजनिक/जेएस/डीआईआर 1/डीआईआर 2/mypage.js में होगी। मैंने पाया है कि यह शैली मेरे लिए अच्छी तरह से काम करती है, खासकर जब किसी साइट पर टेम्पलेट करना। मैं टेम्पलेट इंजन को अनुरोध पथ लेने और रूट पर सीएसएस और जेएस निर्देशिकाओं में सीएसएस और जेएस समकक्षों के लिए कुछ जांच करके अपने संसाधनों (सीएसएस और जेएस) को "ऑटोलोड" करने के लिए बनाता हूं।

Answer 6

Yahoo!'s Exceptional Performance Team जावास्क्रिप्ट के लिए कुछ शानदार प्रदर्शन सुझाव हैं। Steve Souders उस टीम पर था (वह अब Google पर है) और उसने कुछ interesting tools लिखा है जो जावास्क्रिप्ट को कहां रखना है, यह तय करने में आपकी सहायता कर सकता है।

Answer 7

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

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

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

---

यहाँ एक PHP संचालित वेबसाइट के लिए एक उदाहरण है: अपनी साइट वर्गों में विभाजित है और उन अनुभागों के एक कैलेंडर है। उपयोगकर्ता "index.phhp? मॉड्यूल = कैलेंडर & कार्रवाई = दृश्य" पर नेविगेट करता है। यदि PHP कोड क्लास-आधारित है, तो रूटिंग एल्गोरिदम कैलेंडर मॉड्यूल क्लास को तत्काल करता है जो 'मॉड्यूल' पर आधारित है और इसमें वर्चुअल विधि 'getJavascript' है। यह उन जावास्क्रिप्ट कक्षाओं को वापस कर देगा जिन्हें 'कैलेंडर' मॉड्यूल पर कार्रवाई 'दृश्य' करने के लिए आवश्यक है।यह किसी अन्य विशेष आवश्यकताओं को भी ध्यान में रख सकता है और उन लोगों के लिए जेएस फाइल भी लौटा सकता है। प्रतिपादन कोड सत्यापित कर सकता है कि जब जावास्क्रिप्ट सूची अंतिम पृष्ठ के लिए बनाई गई है तो जेएस फ़ाइलों का कोई डुप्लिकेट नहीं है। तो getJavascript विधि इस

return array('prototype.js','mycalendar.js'); 

नोट करें कि यह, या इसका कुछ रूप, एक नया विचार नहीं है। लेकिन मुझे परेशानी के लिए पर्याप्त महत्वपूर्ण सोचने में कुछ समय लगा।

Answer 8

यदि यह केवल कुछ सौ बाइट्स या उससे कम है, और कहीं और इस्तेमाल करने की आवश्यकता नहीं है, तो शायद मैं इसे रेखांकित कर दूंगा। किसी अन्य http अनुरोध के लिए नेटवर्क ओवरहेड संभवतः पृष्ठ से बाहर खींचकर प्राप्त होने वाले किसी भी प्रदर्शन लाभ से अधिक होगा।

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

यदि आप एक आईफोन को लक्षित कर रहे हैं, तो 25k के तहत कैश किए गए कुछ भी रखने की कोशिश करें।

वास्तव में कोई कठोर और तेज़ नियम नहीं है, हर दृष्टिकोण में पेशेवर और विपक्ष हैं, जो आपको याहू के डेवलपर अनुभाग पर प्राप्त लेखों की जांच करने की दृढ़ता से अनुशंसा करेंगे, ताकि आप मामले के आधार पर मामले पर सूचित निर्णय ले सकें।