क्लाइंट-साइड जावास्क्रिप्ट टेम्पलेट बनाएँ

मैं जावास्क्रिप्ट में बहुत कुछ लिखता हूं, और यदि आप लाइन के अंत से थक गए हैं, तो टेम्प्लेट के नामों पर नज़र रखें और टेम्प्लेट के साथ काम करते समय प्रत्येक बिल्ड से पहले उन्हें इकट्ठा करें, यह आपके लिए समाधान है, जावास्क्रिप्ट में क्लाइंट टेम्पलेट को संकलित करने के लिए jsttojs एक उपयोगिता है।

पहला विचार "google" के लिए था, एक छोटी खोज के बाद यह स्पष्ट हो गया कि उपयुक्त कुछ भी नहीं था। वहाँ handlebars.js हैं , लेकिन कोड की मात्रा है कि यह वांछित होने के लिए बहुत कुछ छोड़ देता है, जीत संदिग्ध लगता है। बेशक एक अद्भुत Google क्लोजर टूल्स है , लेकिन यह क्लोजर टूल्स इन्फ्रास्ट्रक्चर पर आधारित एक पूर्ण समाधान है, जो हमारे लिए उपयुक्त नहीं है। यह मेरी अपनी उपयोगिता लिखने का निर्णय लिया गया था, निरंतरता के लिए भाषा के रूप में जावास्क्रिप्ट को चुना गया था।

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

आवेदन का क्षेत्र

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

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

के उपयोग

स्थापना मानक npm पैकेज प्रबंधक का उपयोग करके की जाती है:

$ npm install -g jsttojs 

निम्नलिखित विकल्प उपलब्ध हैं:

 -h, --help    -V, --version  -e, --ext <n>    ,   jst -n, --name <n>      ,   JSTmpl -w, --watch          -r, --removebreak  ,    -a, --amd    AMD   requirejs 

 $ jsttojs templates compiled/templates/index.js --ext mustache --watch 

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

आप आसानी से टेम्पलेट्स के साथ सुविधाजनक काम के लिए एक आवरण लिख सकते हैं, उदाहरण के लिए hogan.js के साथ यह कुछ इस तरह दिखाई देगा:

 var Template = { render: function(name, data) { var template = Hogan.compile(MyGlobalVariable[name]); return template.render(data); }, compile: function(name) { return Hogan.compile(MyGlobalVariable[name]); } } 

और उपयोग करें

 var html = Template.render('video/index', { username: 'World' }); 

उदाहरण

टेम्पलेट्स:

 // tamplates/index.jst Hello world {{ username }} second line 

 // tamplates/video/index.jst Hello {{ username }} on index video page 

हम कमांड निष्पादित करते हैं:

 $ jsttojs templates compiled/templates/index.js --name MyGlobalVariable 

और हम उपयोग करने के लिए तैयार टेम्पलेट प्राप्त करते हैं:

 // compiled/templates/index.js window.MyGlobalVariable = { "index" : "Hello world {{ username }}\nsecond line", "video/index" : "Hello {{ username }} on index video page" } 

निष्कर्ष

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

कोड जीथब पर उपलब्ध है

संदर्भ

आप दूर भी देख सकते हैं

• हैंडल
• उपकरण बंद करना
• jQuery-Tmpl-JST

upd

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