एचटीएमएल या जावास्क्रिप्ट में क्लाइंट-साइड जावास्क्रिप्ट टेम्पलेट्स रखें? (अंडरस्कोर के templating इंजन का प्रयोग करके) निम्नलिखित की तरह

Question

चाहिए क्लाइंट साइड टेम्पलेट्स:

<p class="foo"><%= bar %></p> 

एक अलग HTML फ़ाइल में रखा जाना, या एक अलग JavaScript फ़ाइल? मुझे पता है कि यह दोनों तरीकों से काम कर सकता है। बस चिंताएं दृष्टिकोण के पृथक्करण से

<script type="text/template" id="omg-template"> 
    <span id="swag-name"><%= name %></span> 
</script> 

:

उदाहरण के लिए, किसी JavaScript फ़ाइल सिर्फ स्ट्रिंग चरों की सूची इतनी तरह हो सकता है:

var cute = '<p class="the"><%= unicorn %></p>'; 
var fb = '<p class="new-design"><%= sucks %></p>'; 

लेकिन मैं यह भी देखा है निम्नलिखित , टेम्पलेट भंडारण कहां से संबंधित है?

Answer 1

मैं आम तौर पर एक संपत्ति प्रबंधन प्रणाली का उपयोग करता हूं जो जावास्क्रिप्ट और सीएसएस को जोड़ता और छोटा करता है, और क्लाइंट साइड टेम्पलेट फ़ाइलों का अनुवाद वैश्विक वैर से लटकने वाले जेएस तारों में करता है। इस तरह की चीज आपके प्लेटफ़ॉर्म पर निर्भर करती है, लेकिन रेल दुनिया में आप jammit या sprockets (जो अब रेल का हिस्सा है)

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

Answer 2

मैं बहुत दूसरा विकल्प पसंद करते हैं, निम्नलिखित कारणों के लिए:

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

लेकिन दूसरे विकल्प का उपयोग करने के लिए किसी भी तरह से अपनी टेम्पलेट फ़ाइल लोड करना, या इसे अपने एचटीएमएल में शामिल करना, या बिल्ड समय पर अपने एचटीएमएल में चिपकाना आवश्यक है। इसके अलावा script टैग के कारण अधिक डेटा ओवरहेड है, और आपको jQuery के .html() या इसी तरह की विधि का उपयोग करके DOM से स्ट्रिंग प्राप्त करनी होगी। तो प्रदर्शन के अनुसार, स्ट्रिंग विकल्प बेहतर हो सकता है - यही कारण है कि @ मैट के निर्माण समय पर तारों में डालने का सुझाव शायद सबसे अच्छा है।

Answer 3

आप jQuery's templating engine का उपयोग कर सकते हैं और अपने सभी टेम्पलेट्स को बाहरी जेएस फ़ाइल में लोड कर सकते हैं।

Answer 4

यदि आप Transparency टेम्पलेट्स जैसे लॉजिकलेस क्लाइंट-साइड टेम्पलेट इंजन का उपयोग कर रहे हैं तो मुख्य HTML में टेम्पलेट एम्बेड किए जा सकते हैं क्योंकि टेम्पलेट स्वयं मान्य HTML हैं।

उदाहरण:

<!-- Template --> 
<div id="template"> 
    <span class="greeting"></span> 
    <span class="name"></span> 
</div> 


// Data 
var hello = { 
    greeting: 'Hello', 
    name:  'world!' 
}; 

<!-- Result --> 
<div id="template"> 
    <span class="greeting">Hello</span> 
    <span class="name">world!</span> 
</div> 

टेम्पलेट्स के लिए तरीके की तरह विजेट में प्रयोग की जाने वाली एक छिपा <div> कंटेनर ठीक करता है।

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