1. घर
  2. सवाल और जवाब
  3. किसी पृष्ठ पर HTML टेम्पलेट्स संग्रहीत करने के लिए सर्वोत्तम अभ्यास?

किसी पृष्ठ पर HTML टेम्पलेट्स संग्रहीत करने के लिए सर्वोत्तम अभ्यास?

2010-11-18 14 views
23

मैं एक साइट मैं निर्माण कर रहा हूँ करने के लिए एक नहीं बल्कि भारी जावास्क्रिप्ट इंटरफेस के विकास कर रहा हूँ, और मैं एक JSON एपीआई के लिए अपने प्रश्नों से (हाल ही में किए गए आधिकारिक) का उपयोग करने jQuery templates plugin मेरी तत्वों उत्पन्न करने के लिए तय कर लिया है। अब, समस्या मैं वर्तमान में हो रही है:किसी पृष्ठ पर HTML टेम्पलेट्स संग्रहीत करने के लिए सर्वोत्तम अभ्यास?

मैं चारों ओर इन टेम्पलेट्स का एक समूह है से ग्रस्त रहा हूँ। प्रत्येक प्रकार की वस्तु के लिए, कुछ सूचियों के लिए, पृष्ठ के कुछ हिस्सों के लिए कुछ आदि। क्या इन टेम्पलेट्स को संग्रहीत करने का कोई पसंदीदा तरीका है? मैं हर एक पेज में उन लोगों के <script> टैग का एक समूह एक id के साथ एक <script> टैग को परिभाषित टेम्पलेट नाम का उपयोग कर, और फिर वहाँ से पाठ को पुन: प्राप्त (जॉन Resig "JavaScript Micro-Templating" में वर्णित करते हैं), लेकिन होने के बारे में पढ़ा है एक सा लग रहा है hackish।

तो, सवाल यह है: क्या इस तरह के परिदृश्य के लिए कोई 'सर्वोत्तम अभ्यास' है?

स्रोत

2010-11-18 dguaraglia

+0

क्या ब्राउज़र में एचटीएमएल को पार्स करने से रोकने के लिए '

4

मैंने हाल ही में यह अभ्यास किया है और हालांकि <script> टैग दृष्टिकोण थोड़ा सा हैक लगता है, मैंने इसे एक अच्छा समाधान के रूप में स्वीकार किया और अपना खुद का संस्करण चुना (जॉन रेसिग संस्करण वास्तव में अच्छा है, लेकिन मैं अपने स्वयं के आसानी से समझने के लिए गया (एकल आइटम टेम्पलेट या पंक्ति टेम्पलेट)

0: मेरे अपने मस्तिष्क संस्करण) के लिए

मेरे संस्करण form##VALUE##

खाका में बदले जा मानों का उपयोग कर एक बुनियादी टेम्पलेट और प्रतिस्थापन है

सामग्री निर्माण फंक्शन:

function constructFromTemplate(content, values, appendTo) { 
    var modifiedHtml = content; 
    modifiedHtml = modifiedHtml.replace(new RegExp('__', 'g'), '##'); 

    $.each(values, function (n, v) { 
     modifiedHtml = modifiedHtml.replace(new RegExp('##' + n + '##', 'g'), v); 
    }); 

    if (appendTo != null) 
    { 
     $(appendTo).append(modifiedHtml); 
     //initializePageElements(); 
    } 

    return modifiedHtml; 
}

उपयोग

सामग्री समारोह से वापस आ जाएगा और/या आप सेट कर सकते हैं appendTo पैरामीटर elementID के लिए स्वचालित रूप append सामग्री निर्धारित किया है। (append नहीं करने के लिए null सेट)

बदले मूल्यों सिर्फ एक गतिशील वस्तु जहां object नाम बदली आइटम हैं के रूप में जुड़ जाते हैं।

var theContent = constructFromTemplate(ItemTemplate, { LABEL1: 'The Label 1 content', LABEL2: 'The Label 2 content' }, null);

ध्यान दें: मैं //initializePageElements(); बाहर टिप्पणी की है, इस jQuery प्लगइन, टेम्पलेट पर शैलियों प्रारंभ करने में प्रयोग किया जाता है।

केवल इनलाइन शैलियों जब डोम

स्रोत

2010-11-18 20:57:02

+1

जिज्ञासा से बाहर: वह दृष्टिकोण क्या होगा? :) – dguaraglia

1

मैं अपने ढांचे jquery pure html templates

सर्वोत्तम प्रथाओं के बारे में के साथ सफलतापूर्वक स्क्रिप्ट का इस्तेमाल किया में सामग्री डालने से काम करने लगते हैं, कृपया, ट्विटर के नए इंटरफेस पर एक नजर है सबकुछ के लिए एक पेज का उपयोग करना और केवल "#!/पथ" के माध्यम से आंतरिक रूप से रूटिंग करना।

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

स्रोत

2010-11-19 23:36:04 mpapis

8

क्यों न केवल अपने टेम्पलेट को एक छिपे हुए तत्व में लोड करें और फिर $(template).clone() का उपयोग करें? यह सिर से बचने के बहुत से बचाता है। मैं .clone() पर <script> दृष्टिकोण बनाकर प्रदर्शन से बात नहीं कर सकता, लेकिन मैं आपको बता सकता हूं कि अतिरिक्त स्क्रिप्ट टैग एक प्रदर्शन जुर्माना है और आमतौर पर कोड गंदा बनाते हैं।

क्यों?

  • भले ही आप अत्यधिक आकर्षित बचने उपयोगिता है, गलतियों अभी भी बनाया जाएगा, और वे उस बहुत कठिन के माध्यम से पढ़ने के लिए हो जाएगा। इसके अलावा यदि आपको किसी टीम की स्थिति में काम करना है, खासकर यदि लोग परियोजना को चालू/रोल करते हैं, तो यह आसानी से समझ में नहीं आता है।

  • आप एक सूचक वस्तु templates = {} बना सकते हैं, कहते हैं,, और इतने की तरह अपने क्लोन करने योग्य तत्वों के लिए यह लोड jQuery वस्तु संकेत के साथ:

    templates = {}; 
templates.message = $("#templates .message"); 
templates.dialog = $("#templates .dialog");

अब तुम सब करने के लिए क्या करना है एक नया टेम्प्लेट बनाने है:

var newDialog = templates.dialog.clone();

आप एक आवरण समारोह पैरामीटर स्वीकार करने के लिए कर सकता है, और फिर newDialog.find("title").html(title), newDialog.find("message").html(message), आदि

01 के साथ इन जोड़ने

फिर से, एक प्रदर्शन परिप्रेक्ष्य से, मुझे नहीं पता कि कौन सा तेज़ है, क्योंकि मेरे पास अभी परीक्षण करने का समय नहीं है। लेकिन मुझे पता है कि स्वीकृत तरीकों का उपयोग आमतौर पर टेम्पलेट की आवश्यकता के लिए पर्याप्त कोडबेस पर काम करते समय बेहतर होता है ... यह अनिवार्य है कि अन्य लोग अंततः शामिल होंगे, और जितना अधिक आपको चीजों को समझाने के लिए आसपास होना होगा, आपके पास कम समय होगा अपने स्वयं के Badass कोडिंग करने के लिए।

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

स्रोत

2010-11-22 20:09:21

+2

टेम्पलेट का उद्देश्य आसानी से डेटा डालना है। एक दस्तावेज़फ्रैगमेंट क्लोनिंग उस प्रक्रिया को बेहद दर्दनाक बना देगा। मैं कोड की एक पंक्ति में टेम्पलेट से एचटीएमएल उत्पन्न कर सकता हूं। –

+0

.clone() एक गहरी विधि है; यह दर्दनाक कैसे होगा? –

+0

एक समय में एक तत्व के बिना आप मार्कअप में डेटा कैसे डालेंगे? –

0

asp.net mvc में मैं अक्सर अपने सामान्य टेम्पलेट्स को आंशिक दृश्य में पैक करता हूं जिसमें मैं इसे शामिल कर सकता हूं जहां मुझे इसकी आवश्यकता है। इस तरह मुझे जगह पर अपने टेम्पलेट दोहराने की जरूरत नहीं है।

एक और तरीका है कि आप अपने टेम्पलेट्स को एक अलग फाइल में रखें। Newslist.tmpl.html की तरह जो आपको टेम्पलेट को AJAX के साथ लोड करने की अनुमति देता है।इसे ध्यान में रखते हुए डेटा की लोडिंग के साथ समानांतर में किया जा सकता है, यह आपको एप्लिकेशन को धीमा नहीं करना चाहिए, क्योंकि यह संभवतः डेटा कॉल की तुलना में तेज़ है।

स्रोत

2010-11-22 21:16:26

2

https://github.com/inspiraller/STQuery पर नज़र

STQuery jQuery के रूप में ही विधि के नाम के सभी लेकिन इसके बजाय डोम पर तत्वों से छेड़छाड़ की, यह स्ट्रिंग पर सीधे काम करता है का उपयोग करता है:

var strTemplate = '<div id="splog"><h1>lorem ipsum</h1><div class="content">lorem ipsum</div></div>'; 

var ST = STQuery(strTemplate); 

ST.find('h1').html('Hello'); 
ST.find('.content').html('World!'); 

var strTemplateUpdated = ST.html();

इस से तर्क अलग रहता है टेम्पलेट, यानी अविभाज्य एचटीएमएल टेम्पलेट्स।

jquery पर फायदे यह है कि STQuery को पहले डीओएम को लिखना नहीं है, जिसका अर्थ है कि आप वेब श्रमिकों का उपयोग कर सकते हैं या सर्वर पर अपने सभी टेम्पलेट मैनिपुलेशन कर सकते हैं। नोट: इस संदेश के रूप में, स्ट्रक्चर केवल जावास्क्रिप्ट में लिखा गया है, इसलिए इसे पसंद के सर्वर साइड भाषा में परिवर्तित करने की आवश्यकता होगी।

स्रोत

2011-07-20 15:18:09 steve

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

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