🛀🏽 👊 🔡 JsRender: नई पीढ़ी के jQuery के टेम्पलेट 👷🏻 🍆 ❓

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

सबसे पहले, यह परीक्षण करने का निर्णय लिया गया था, जब 1,500 तत्वों की एक सूची तैयार करते हुए, 20 बार की श्रेष्ठता प्राप्त की गई थी, इसी तरह के परिणाम jQuery टेम्पलेट (परीक्षणों के साथ पृष्ठ) की तुलना करके दिखाए गए हैं।

मैं काफी सरलता से JsRender गया। JQuery के टेम्प्लेट पृष्ठ पर जाने के बाद, मैंने पढ़ा कि jQuery की टीम ने बीटा से इस प्लगइन को न हटाने का फैसला किया, उन्होंने अपना शब्द रखा और 6 महीने तक कोई अद्यतन नहीं हुआ। एक ही पृष्ठ JsRender डेवलपर ब्लॉग के लिए एक लिंक प्रदान करता है।

JSRender को उच्च प्रदर्शन के लिए अनुकूलित किया गया है, नियमित स्ट्रिंग्स का उपयोग DOM या jQuery के साथ बातचीत के बिना किया जाता है, जो प्रदर्शन को जोड़ने के लिए काफी तार्किक है, क्योंकि jQuery के बारे में कई लेखों में, आप सुझाव पा सकते हैं कि jQuery का उपयोग न करें, उदाहरण के लिए, आईडी प्राप्त करने के लिए (फॉर्म के निर्माण के बिना): $ (यह) .attr ('आईडी')) और विभिन्न सूचियों को उत्पन्न करने के लिए केवल तार का उपयोग करें, और फिर उन्हें एक झपट्टा में डोम में डालें।

साइट से उदाहरण पर विचार करें:

<html> <body> <script id="movieTemplate" type="text/x-jsrender"> <div> {{:#index+1}}: <b>{{>name}}</b> ({{>releaseYear}}) </div> </script> <div id="movieList"></div> <script type="text/javascript"> var movies = [ { name: "The Red Violin", releaseYear: "1998" }, { name: "Eyes Wide Shut", releaseYear: "1999" }, { name: "The Inheritance", releaseYear: "1976" } ]; $( "#movieList" ).html( $( "#movieTemplate" ).render( movies ) ); </script> </body> </html>

इस उदाहरण में, हमारे पास है:

1. टेम्पलेट (आईडी = "मूवीटेम्पलेट"), एक अज्ञात प्रकार की सामग्री को ब्राउज़र द्वारा संसाधित नहीं किया जाएगा, इसलिए यह इसे पाठ की तरह ही मानता है।
{{: # इंडेक्स + 1}} - हम इनपुट को ऑब्जेक्ट्स की एक सरणी देते हैं, जाली की मदद से हम इंडेक्स प्राप्त कर सकते हैं, क्योंकि यह शून्य से शुरू होता है, फिर हम एक जोड़ते हैं
{{> नाम}} - ऑब्जेक्ट के गुणों तक पहुंच, एक त्रिकोणीय ब्रैकेट इंगित करता है कि हम स्ट्रिंग को एन्कोड करेंगे, अर्थात। टैग दिखाई देंगे।
2. कंटेनर जहां सामग्री डाली जाएगी (आईडी = "मूवीलिस्ट")।
3. स्क्रिप्ट स्वयं, जहां टेम्पलेट jQuery का उपयोग करके स्थित है, यह रेंडर से भरा है और डेटा कंटेनर में डाला गया है।

जिसके बाद हम निम्नलिखित परिणाम देखेंगे:

तालिका सिंटैक्स मूल बातें

कस्टम टैग, सहायक तरीके और कन्वर्टर्स

यह सुविधाओं का केवल एक हिस्सा है, लेख के अंत में, मैं लिंक की एक विस्तृत सूची प्रदान करूंगा।

डिबगिंग

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

महत्वपूर्ण है

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

संदर्भ

JsRender Fundamentals (स्लाइड): JsRender Fundamentals: HTML5 अनुप्रयोगों के लिए अस्थायी
आधिकारिक उदाहरण: JsRender: डेमो
दो-भाग लेख: जावास्क्रिप्ट और HTML और उन्नत JsRender अस्थायी सुविधाओं के साथ JsRender का उपयोग करना