ईसीटी टेम्पलेट इंजन जावास्क्रिप्ट का विमोचन

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

क्या आप ईसीटी जानते हैं?

ईसीटी एक जावास्क्रिप्ट टेम्पलेट इंजन है जिसमें बिल्ट-इन कॉफीस्क्रिप्ट सिंटैक्स होता है (इसलिए नाम: एंबेडेड कॉफीस्क्रिप्ट टेम्पलेट)। ईसीटी मूल रूप से अधिकतम प्रदर्शन पर ध्यान केंद्रित करने के साथ विकसित किया गया था और साथ ही यह डेवलपर को कार्यों के एक समृद्ध सेट के साथ प्रदान करता है।

नया क्या है

उत्पादकता

अब ईसीटी को सबसे तेज जावास्क्रिप्ट टेम्पलेट इंजन कहा जा सकता है। इस मद के तहत, निकट भविष्य में काम पूरा हो गया है, जैसा कि मूल रूप से मांगी गई गति प्राप्त की।

क्लाइंट को भेजने से पहले, सर्वर पर टेम्प्लेट को रोकना

ईसीटी के प्रकाशन के बाद, मुझे कई अलग-अलग समीक्षा मिलीं, आलोचना और आभार दोनों। समीक्षा और सुझाव थे। सबसे लगातार सुझावों में से एक सर्वर साइड पर पूर्व-संकलन टेम्पलेट्स की क्षमता को जोड़ना था, ताकि क्लाइंट पर भारी कॉफी-स्क्रिप्ट.जेएस लोड न करें और क्लाइंट प्रदर्शन में सुधार हो।

अब ऐसा अवसर सामने आया है। कंपाइलर को कनेक्ट / एक्सप्रेस के लिए मिडलवेयर के रूप में लागू किया गया है।

यह इस तरह काम करता है:

• हम सर्वर पर एक टेम्पलेट इंजन को कॉन्फ़िगर करते हैं;
• हमारे कनेक्ट / एक्सप्रेस एप्लिकेशन के ढेर में मिडलवेयर टेम्पलेट कंपाइलर जोड़ें;
• क्लाइंट पर, url निर्दिष्ट करें जो मिडलवेयर को रूट के रूप में काम करेगा।

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

हालाँकि, मैन्युअल संकलन अभी भी काम आ सकता है। उदाहरण के लिए, सर्वर के रूप में या PhoneGap (जिसके साथ ईसीटी बहुत अनुकूल है) के बिना टेम्पलेट इंजन का उपयोग करने के लिए। TODO पहले ही कमांड लाइन से पूर्व-संकलन टेम्पलेट्स के लिए एक उपयोगिता बनाने के बिंदु में प्रवेश कर चुका है।

मिडलवेयर उदाहरण:

var connect = require('connect'); var ECT = require('ect'); var renderer = ECT({ root : __dirname + '/views', ext : '.ect' }); //  .   root        . var app = connect() /** *  middleware  . *   root  base url,    . * ..  url http://server:3000/views/page      __dirname + '/views' + 'page.ect' */ .use(renderer.compiler({ root: '/views', gzip: true })) //     middleware .use(function(err, req, res, next) { res.end(err.message); }); app.listen(3000); 

क्लाइंट पर टेम्पलेट इंजन कॉन्फ़िगरेशन में, हमें उसी रूट को निर्दिष्ट करना होगा जैसे टेम्पलेट कंपाइलर के मिडलवेयर कॉन्फ़िगरेशन में।

 var renderer = ECT({ root : '/views', ext : '.ect' }); var data = { title : 'Hello, World!' }; var html = renderer.render('template', data); 

पूर्ण एक्सप्रेस फ्रेमवर्क समर्थन

एक्सप्रेस में ईसीटी को टेम्पलेट इंजन के रूप में जोड़ना अब कोई समस्या नहीं है।

 var express = require('express'); var app = express(); var ECT = require('ect'); var ectRenderer = ECT({ watch: true, root: __dirname + '/views' }); app.engine('.ect', ectRenderer.render); app.get('/', function(req, res){ res.render('index.ect'); }); app.listen(3000); console.log('Listening on port 3000'); 

वाक्य-विन्यास

रेंडर विधि को सिंक्रोनाइज़ करने की क्षमता को जोड़ा।

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

अतुल्यकालिक शैली:

 var renderer = ECT({ root : '/views' }); var data = { title : 'Hello, World!' }; renderer.render('template.ect', data, function (err, html) { }); 

तुल्यकालिक शैली:

 var renderer = ECT({ root : '/views' }); var data = { title : 'Hello, World!' }; var html = renderer.render('template.ect', data); 

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

बहु-पंक्ति अभिव्यक्तियों के लिए जोड़ा गया समर्थन।

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

अब आप टेम्पलेट कोड में छोटे कार्यों को परिभाषित कर सकते हैं या अन्य कोड निष्पादित कर सकते हैं।

एक उदाहरण:

 <% truncateHelper = (str) -> if str.length > 10 return (str.substr 0, 10) + '…' else return str %> <div> <%- truncateHelper @title %> </div> 

मिष्ठान के लिए

ईसीटी के लिए, उदात्त पाठ 2 के लिए एक सिंटैक्स हाइलाइटिंग प्लगइन जारी किया गया है। इसके लिए टर्टलपी के लिए धन्यवाद।