📷 🤚🏿 🥈 STAN - सबसे छोटा टेम्पलेट इंजन 👸🏿 🧒🏾 ➿

ठंड के अप्रैल के दिन, जब उरल में अभी तक बर्फ नहीं पिघली है। अंधेरा हो रहा था। मैंने माइक्रो-पैटर्न के साथ खेला। उदाहरण के लिए: ejohn.org/blog/javascript-micro-templating वे सभी परीक्षणों पर सुपर-उत्पादक थे, लेकिन साथ ही उनके पास कम से कम कुछ अधिक या कम गंभीर कार्यक्षमता का अभाव था।

आखिरी तिनका यह था कि मैं js1k से चूक गया। एक बात ने दूसरे को आगे बढ़ाया। और एक दिलचस्प विचार मेरे दिमाग में आया। क्यों नहीं जेएस की सबसे अधिक? टेम्पलेट में जेएस सिंटैक्स का उपयोग करें (जो टेम्पलेट को पार्स करने के लिए जेएस इंजन का उपयोग करने की अनुमति देता है) और जेएस की सभी विशेषताओं का उपयोग करें।

और परिणाम काफी सरल वाक्य रचना के साथ एक टेम्पलेट इंजन था:

  [TAG] कच्चा (डेटा: स्ट्रिंग) |  चर [टैग] 
 [TAG] .b
 [TAG] .e
 [टैग]
 कच्चा (डेटा: स्ट्रिंग)

जो कुछ इस तरह दिखता है:

function _template() { div.b; span.context.value.span; span.raw(11).span; div.e; hr; raw('plain text') }

 div.b -> ओपनिंग टैग -> <div>
 div.e -> समापन टैग -> </ div>

 div.context.value.div -> <div> {{Reference.value}} </ div>

 घंटा -> स्व-समापन टैग -> <hr />

यह एक तरह का DSL निकलता है।

और क्या आकार कोड?

कोड की ३० पंक्तियाँ :) मैं कीमाधारित संस्करण के बारे में बात नहीं कर रहा हूँ।

एक उदाहरण?

 //  -        //  JS  (   ) var data = [ { name: 'STAN' }, { name: 'Ai_boy' }, { name: 'IceFrog' } ]; //   function _template(){ //  [ ]     XML  h1['class="head"'].raw('List of names').h1; for (var i = 0; i < context.length; i++) { //   partial(_item, context[i]); } } // Partial -  function _item(){ b[args({style: 'color: blue', class: 'test'})].raw("Name:").b; div.context.name.div; hr; } //   helper   //    -   js function args(obj){ var result = ''; for (var key in obj) { if (obj.hasOwnProperty(key)) { result += key + '="' + obj[key] + '" '; } } return result; } document.body.innerHTML = STAN.run(STAN.compile(_template), data);

कैसे शुरू करें?

आप साइट पर जा सकते हैं और सैंडबॉक्स में खेल सकते हैं

aiboy.github.io/STAN/sandbox.html

या GitHub पेज पर जाएं और README.md में दिए गए निर्देशों का पालन करें

github.com/aiboy/STAN

(आप ब्राउज़र और Node.js में टेम्पलेट इंजन का उपयोग कर सकते हैं)

प्लस क्या है?

इसके चार मुख्य फायदे हैं:

1) जेएस सिंटैक्स और इसकी सभी विशेषताओं के लिए पूर्ण समर्थन (कॉफ़ीस्क्रिप्ट, क्लोज़स्क्रिप्ट, टाइपस्क्रिप्ट ... एक्ट)

2) टेम्पलेट रेंडर करने के समय DOM पर पहुँचना।

3) टेम्पलेट के अंदर सभी जेएस पुस्तकालयों के लिए पूर्ण समर्थन (दर्जना, अंडरस्कोर, jquery ... ect)

4) किसी भी पाठ संपादक में टेम्पलेट्स के लिए समर्थन - क्योंकि वे वास्तव में शुद्ध जेएस सिंटैक्स हैं

गति के बारे में क्या?

jsperf.com/stan-speed-test

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

ज़ेन कोडिंग क्यों नहीं?

क्योंकि Zen Coding को JS syntax - यानी Zen Coding के संदर्भ में व्यक्त नहीं किया जा सकता है - JS को मान्य नहीं किया जा सकता है।

क्या यह एक मजाक है?

विचार के पागलपन / मूर्खता (आवश्यक के रूप में रेखांकित) के बावजूद। सब कुछ बहुत गंभीर है। परियोजना विकसित की जाएगी। परीक्षण, अधिक सही वाक्यविन्यास और कई अन्य उपहारों के साथ अतिवृद्धि। GitHub पेज पर जाएं - अपनी इच्छाओं, पाए जाने वाले कीड़े और सब कुछ छोड़ दें।

पुनश्च: वास्तव में, मैं थोड़ा आत्मा-बीमार हूं जब मैं लिखता हूं कि इस टेम्पलेट इंजन में केवल 30 लाइनें हैं। ईमानदार होने के लिए, हम लाइनों को 40-50 प्रारूपित करेंगे। लेकिन मेरे लिए यह एक मनोवैज्ञानिक बाधा है जिसका मैं पालन करने की कोशिश करता हूं।

पीपीएस: मुझे "नोट की शुद्धता और साक्षरता" के बारे में किसी भी टिप्पणी पर खुशी होगी (लेकिन यह सब पीएम में लिखा गया है तो बेहतर होगा)

PPPS: टिप्पणी करने के लिए स्वतंत्र महसूस करें, मैं "नापसंद - पास" से नहीं होगा :)

STAN - सबसे छोटा टेम्पलेट इंजन