HotMilk - मूंछ टेम्पलेट्स के सुविधाजनक संगठन के लिए एक पुस्तकालय

सप्ताह के दौरान एक पोस्ट ^ हेबे पर जावास्क्रिप्ट के डब्ल्यू महीने।

एक-पृष्ठ वेब अनुप्रयोग के विकास पर एक लेख के बाद, मैंने अपने हाथों तक पहुंचने के लिए इसे फाड़ने और थोड़ा खत्म करने के लिए ICANHaz परिवाद को बुकमार्क किया। और, हमेशा की तरह, एक लंबे बक्से में एक तरफ रख दिया।

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

आपको याद दिला दूं कि ICHHaz ब्राउज़र में जावास्क्रिप्ट द्वारा उपयोग किए जाने वाले थोड़ा मूंछें टेम्पलेट को व्यवस्थित करने का एक आसान तरीका है। इस लाइब्रेरी का उपयोग करते हुए टेम्प्लेटिंग टेम्प्लेट एक साधारण फ़ंक्शन कॉल के लिए नीचे आता है। वह टेम्पलेट के आधे हिस्से को ढालने की आवश्यकता को भी समाप्त कर देती है, क्योंकि इसका पाठ सीधे HTML <script> टैग में लिखा जा सकता है

क्यों?

वास्तव में, ICanHaz सरल है: एक टेम्पलेट इंजन (मूंछें) हैं, वहाँ टेम्पलेट (पूर्ण और आंशिक) टेम्पलेट हैं जो HTML कोड में सीधे <script> टैग में आईडी विशेषताओं के नाम के साथ हैं, और एक वैश्विक ich ऑब्जेक्ट है जिसके लिए पृष्ठ लोड होने पर टेम्पलेट नामों के साथ विधियाँ जोड़ी जाती हैं। इसके अलावा, वस्तु को संबंधित विधि से गुजरते हुए, आउटपुट को पाठ प्रदान किया जाता है:

$('#myDiv').html(ich.myTemplateName(objModel)); 

मैं थोड़ा और अधिक सूक्ष्म आत्मा चाहता था ^ टेम्पलेट्स का डब्ल्यू संगठन। उदाहरण के लिए, सबसे सरल ऑनलाइन स्टोर में कई प्रकार के सामान हो सकते हैं (किताबों, पत्रिकाओं, फिल्मों और संगीत को छोड़ दें)। उनमें से प्रत्येक के लिए, एक सूची टेम्पलेट को परिभाषित किया जाना चाहिए, प्रत्येक सूची के लिए एक आइटम, एक निर्धारित मुद्रा (मूल्य) के साथ एक आइटम के लिए। और फिर हम दाईं ओर डिस्काउंट कॉलम जोड़ते हैं और हम कीमत को थोड़ा अलग दिखाना चाहते हैं ...

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

इन विचारों से कुछ पैदा हुआ था।

HotMilk का विवरण

लाइब्रेरी मिल्क टेम्प्लेटिंग इंजन पर आधारित है, जो एक कॉफीस्क्रिप्ट मस्टैच कार्यान्वयन है। दूध को बहुत समय पहले चुना गया था और मुझे यह नहीं याद था कि किन कारणों से मूंछों के विनिर्देशन के लिए बेहतर समर्थन मिल रहा है। नाम, क्रमशः, मिल्क से आया और गया (साथ ही HTML में निर्मित टेम्प्लेट का एक संकेत)।

HotMilk संस्करणों के लिए jQuery, MooTools और बिना किसी फ्रेमवर्क वाले ब्राउज़र को इकट्ठा किया जाता है, साथ ही DOM से लोड किए बिना एक मूल संस्करण भी बनाया जाता है (इसे कम से कम सर्वर पर इस्तेमाल किया जा सकता है)।

इससे पहले कि आप इसका उपयोग करना शुरू कर दें, ICanHaz की तरह, आपको टेम्पलेट लाइब्रेरी को भरना होगा। यह $ addTemplate विधि का उपयोग करके किया जाता है:

  HotMilk.$addTemplate('path/to/template', 'template {{text}}'); HotMilk.$addTemplate('path/to#partial', '...'); 

टेम्प्लेट्स को किसी भी क्रम में जोड़ा और हटाया जा सकता है, इसलिए जिस स्थिति में उन्हें सर्वर से अतुल्यकालिक रूप से खींचा जा सकता है। पेज लोडिंग के अंत में टेम्प्लेट को स्वचालित रूप से <script> टैग से इकट्ठा किया जा सकता है। टेम्प्लेट को लोड करने के लिए, आपको इसे "टेक्स्ट / एक्स-मूंछ-टेम्प्लेट" पर सेट करना होगा और इसे डेटा-हॉटमिलक-पथ विशेषता के साथ प्रदान करना होगा (वैसे, एचटीएमएल 5 विनिर्देश डेटा के उपयोग पर प्रतिबंध नहीं लगाता है - स्क्रिप्ट के लिए विशेषताएँ, इसलिए यहां भी वैधता का सम्मान किया गया है ):

  <script type="text/x-mustache-template" data-hotmilk-path="books/list#item"> <a href="books/{{id}}"><b>{{title}}</b> by {{#author}}{{>author}}{{/author}}</a> </script> 

उदाहरण से टेम्पलेट आंशिक है, अर्थात इसका उपयोग 'पुस्तकों / सूची' टेम्प्लेट को प्रस्तुत करते समय भाग के रूप में किया जाता है।

डेटा-हॉटमिलक-पथ विशेषता में, आप एक बृहदान्त्र द्वारा अलग किए गए कई पथ जोड़ सकते हैं (कई स्वतंत्र प्रतियां बनाई जाएंगी)।

आयोजन के सभी सिद्धांतों को कुछ सरल बिंदुओं में रखा जा सकता है:

• टेम्प्लेट एक फाइल सिस्टम की तरह एक पदानुक्रमित संरचना में व्यवस्थित होते हैं, जहां टेम्प्लेट फ़ाइलों का एक एनालॉग होते हैं (एक पेड़ में एक टेम्पलेट हमेशा एक शीट होती है);
• टेम्पलेट का पथ स्लैश के माध्यम से लिखा गया है: पथ / से / टेम्पलेट। फिर इस तरह के टेम्पलेट को कहा जा सकता है

   HotMilk.path.to.template(objData); 

• आप आंशिक को किसी भी नोड (टेम्पलेट या समूह) से बांध सकते हैं: पथ / से / नोड # आंशिक नाम। यह इस नोड और उसके सभी बच्चों के लिए उपलब्ध होगा;
• माता-पिता आंशिक रूप से एक ही नाम के साथ "अतिभारित" हो सकते हैं;
• विभाजन को भी अलग से प्रस्तुत किया जा सकता है:

   HotMilk.path.to.template.$.partial(objData); 

  इस कॉल के साथ, टेम्पलेट को अपने मूल नोड (उदाहरण के लिए, टेम्पलेट नोड) में आंशिक पहुंच उपलब्ध होगी;
• टेम्प्लेट के नाम मान्य जावास्क्रिप्ट पहचानकर्ता होने चाहिए: अक्षरों, संख्याओं, अंडरस्कोर और डॉलर के चिह्न से मिलकर, लेकिन संख्या या डॉलर से शुरू नहीं होना चाहिए।

एक छोटा डेमो गितुब पर हॉटमिलक रिपॉजिटरी में है ।

यदि कोई अचानक पुस्तकालय का उपयोग करना चाहता है, तो ध्यान दें कि कम से कम परीक्षणों का कोई सेट अभी तक नहीं है और शायद लंबे समय तक नहीं होगा, इसलिए कीड़े हो सकते हैं।

हुड के तहत: कार्यान्वयन सुविधाएँ

मैं कुछ टिप्पणियों के साथ स्रोत के कुछ अंशों पर जाऊंगा

आंशिक संग्रह वर्ग। इस डिजाइन के कारण, माता-पिता के सबपैटर्न के टेम्पलेट्स द्वारा विरासत को लागू किया जाता है।

  PartialsCollection = function(parentPartialsCollection) { var ctor = function() {}; ctor.prototype = parentPartialsCollection || PartialsCollection.prototype; return new ctor(); }; 

यह बस काम करता है: प्रत्येक कॉल के साथ यह प्रोटोटाइप के रूप में आंशिक'ओव के पिछले सेट के साथ एक नया वर्ग बनाता है। पहली शुरुआत में, यह अपना प्रोटोटाइप लेता है। तदनुसार, इस तरह से बनाई गई प्रत्येक वस्तु PartialsCollection वर्ग का एक उदाहरण होगी, जो, इसके अलावा, मूल श्रृंखला में सभी संग्रह के गुणों के पास है:

  var a = new PartialsCollection(); a.t1 = "template 1" // a.t1 === 'template 1'; a.hasOwnProperty('t1') === true; var b = new PartialsCollection(a); // b.t1 === 'template 1'; b.hasOwnProperty('t1') === false; 

टेम्पलेट कार्यों का कारखाना। लगभग पुस्तकालय का दिल। PartialCollection वर्ग का टेम्पलेट और उदाहरण प्राप्त करता है और एक फ़ंक्शन लेता है जो एक मॉडल लेता है और एक रेंडर स्ट्रिंग देता है।

  var createTemplatingFunction = function(template, partialsCollection) { return function(data) { return Milk.render(template, data, function(partialName) { if(partialsCollection[partialName] && partialsCollection[partialName].$value != null) { return partialsCollection[partialName].$value; } else { throw new Error("Unknown partial: " + partialName); } }); }; }; 

टेम्पलेट, मॉडल, और नाम से उपपट्टियों की खोज करने का कार्य, जो केवल यह देखने के लिए देखता है कि क्या संग्रह में ऐसा कोई फ़ील्ड है और क्या इसका $ मूल्य है, Milk.render फ़ंक्शन को पास किया गया है।

और इसलिए इस फंक्शन फैक्ट्री की मदद से, हमारे पेड़ का एक पूर्ण विकसित नोड बनाया गया है:

  var createTemplateNode = function(template, partialsCollection) { partialsCollection = partialsCollection || new PartialsCollection(); var templatingFunction = createTemplatingFunction(template, partialsCollection); templatingFunction.$ = partialsCollection; //    Function.prototype      ... templatingFunction.$addTemplate = addTemplate; templatingFunction.$removeTemplate = removeTemplate; return templatingFunction; }; 

यादृच्छिक क्रम में टेम्पलेट्स के अलावा को लागू करने के लिए, मुझे एक और चाल को लागू करना पड़ा। उदाहरण के लिए, एक स्थिति संभव है जब एक आंशिक "पथ / # आंशिक" जोड़ा जाता है, लेकिन कोई भी टेम्पलेट अभी तक मौजूद नहीं है और यह स्पष्ट नहीं है कि "क्या" एक टेम्पलेट या अन्य समूह है। इस स्थिति को हल करने के लिए, पथ हमेशा समूहों से बनाया जाता है, और फिर, अगर यह निकला कि टेम्पलेट संलग्न करना आवश्यक है, तो नोड को आंशिक रूप से संरक्षित के साथ बदल दिया गया है:

  var addNormalTemplate = function(root, path, template) { if(path.length === 0) { throw new Error("Couldn't create template: name must not be empty"); } var node = nodeBuildPath(root, path.slice(0,-1)), name = path[path.length - 1]; if(hasOwnProperty(node, name)) { //   ,       , //  ,   partial' if(node[name] instanceof GroupNode && nodeIsEmpty(node[name])) { node[name] = createTemplateNode(template, node[name].$); } else { //  -  (   ) throw new Error("Couldn't add template: node " + path.join('/') + " already exists"); } } else { //    ,      , //      node[name] = createTemplateNode(template, new PartialsCollection(node.$)); } }; 

उपपट्टनों के साथ आसान:

  var addPartialTemplate = function(root, path, partialName, template) { //   ,   var node = nodeNavigatePath(root, path) || nodeBuildPath(root, path); if(hasOwnProperty(node.$, partialName)) { throw new Error("Couldn't add partial: node " + path.join('/') + "#" + partialName + " already exists"); } // , : .. partial     , //       , //        node.$[partialName] = createPartialTemplate(template, node.$); }; 

यदि किसी टेम्पलेट को बाद के प्रतिस्थापन के साथ एक समूह बनाकर बनाया जाता है, तो विलोपन विपरीत क्रिया है: सबसे पहले, टेम्पलेट को एक समूह द्वारा उपपट्टों के संग्रह के साथ सहेजा जाता है, और फिर अंत से रास्ता साफ हो जाता है (समूह जो बिना टेम्पलेट के छोड़ दिए जाते हैं और आंशिक रूप से हटा दिए जाते हैं)।

चौकस पाठकों ने hasOwnProperty को कॉल करने का एक घुमावदार तरीका देखा है। यह फिर से पुनर्बीमा के लिए किया जाता है, ताकि hasOwnProperty नामक टेम्पलेट से ब्रेक न हो। बेशक, स्थिति भ्रमपूर्ण है, लेकिन ठीक है, एक ही समय में, यह संपीड़न पर सकारात्मक प्रभाव होना चाहिए।

  var hasOwnProperty = function(obj, propName) { return Object.prototype.hasOwnProperty.call(obj, propName); }; 

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

मुझे उम्मीद है कि कोई काम आएगा। आपका ध्यान के लिए धन्यवाद!

संदर्भ

• गीथहब पर हॉटमिलक भंडार
• ICanHaz - प्रोटोटाइप और मास्टरमाइंड
• मूंछें - तर्क-कम टेम्पलेट प्रारूप
• CoffeeScript एक जावास्क्रिप्ट संकलित भाषा है
• दूध - मूंगफली कॉफी पर लागू करना

UPD: यह एक लेख लिखने के लायक था, पता चला कि वह वास्तव में गड़बड़ कर दिया जब फंक्शन से विरासत में लेने की कोशिश कर रहा था (क्या यह भी संभव है ???)।
सामान्य तौर पर, निश्चित। संपादन के बाद, कार्यक्षमता को नुकसान नहीं हुआ, केवल अंदरूनी हिस्सों को फिर से बनाया गया और प्रभावित स्थानों में पोस्ट को अपडेट किया गया।