🔻 🏳️ 💆🏿 बेहतर जावास्क्रिप्ट टेम्पलेट इंजन 👩‍🎨 🍠 👨🏽‍🌾

मान लें कि आपको किसी वेब प्रोजेक्ट के लिए पूर्ण-टेम्पलेट टेम्पलेट इंजन की आवश्यकता नहीं है, लेकिन दूसरी ओर, कोड में कभी-कभी ऐसे स्थान होते हैं जहां HTML को जावास्क्रिप्ट से अलग करना अच्छा होगा। इस स्थिति में, सरलतम जावास्क्रिप्ट-आधारित टेम्पलेट विकल्प का उपयोग करने के लिए एक समाधान हो सकता है।
स्रोत कोड
डेमो

वीडियो (सबसे सुविधाजनक देखने के लिए एचडी का चयन करें):

परिणाम कोड:

एचटीएमएल

<!doctype html> <html> <head> <meta charset=utf-8> <title> </title> </head> <body> <div class="result"></div> <script type="template" id="template"> <h2> <a href="{{href}}"> {{title}} </a> </h2> <img src="{{imgSrc}}" alt="{{title}}"> </script> </body> </html>

जावास्क्रिप्ट

 (function() { //  AJAX- var data = [ { title: "Create a Sticky Note Effect in 5 Easy Steps with CSS3 and HTML5", href: "http://net.tutsplus.com/tutorials/html-css-techniques/create-a-sticky-note-effect-in-5-easy-steps-with-css3-and-html5/", imgSrc: "http://d2o0t5hpnwv4c1.cloudfront.net/771_sticky/sticky_notes.jpg" }, { title: "Nettuts+ Quiz #8", href: "http://net.tutsplus.com/articles/quizzes/nettuts-quiz-8-abbreviations-darth-sidious-edition/", imgSrc: "http://d2o0t5hpnwv4c1.cloudfront.net/989_quiz2jquerybasics/quiz.jpg" }, { title: "WordPress Plugin Development Essentials", href: "http://net.tutsplus.com/tutorials/wordpress/wordpress-plugin-development-essentials/", imgSrc: "http://d2o0t5hpnwv4c1.cloudfront.net/1101_wpPlugins/wpplugincourse.png" } ], template = document.querySelector('#template').innerHTML, result = document.querySelector('.result'), i = 0, len = data.length, fragment = ''; for ( ; i < len; i++ ) { fragment += template .replace( /\{\{title\}\}/, data[i].title ) .replace( /\{\{href\}\}/, data[i].href ) .replace( /\{\{imgSrc\}\}/, data[i].imgSrc ); } result.innerHTML = fragment; })();

वैकल्पिक (जावास्क्रिप्ट)

वीडियो में वर्णित विधि अधिक पठनीय है, हालांकि, यदि आप अधिक स्वचालन चाहते हैं, तो आप गतिशील रूप से मूल्यों और नियमित अभिव्यक्ति को लागू कर सकते हैं, उदाहरण के लिए:

 (function () { //  AJAX -  var data = [{ title: "Create a Sticky Note Effect in 5 Easy Steps with CSS3 and HTML5", href: "http://net.tutsplus.com/tutorials/html-css-techniques/create-a-sticky-note-effect-in-5-easy-steps-with-css3-and-html5/", imgSrc: "http://d2o0t5hpnwv4c1.cloudfront.net/771_sticky/sticky_notes.jpg" }, { title: "Nettuts+ Quiz #8", href: "http://net.tutsplus.com/articles/quizzes/nettuts-quiz-8-abbreviations-darth-sidious-edition/", imgSrc: "http://d2o0t5hpnwv4c1.cloudfront.net/989_quiz2jquerybasics/quiz.jpg" }, { title: "WordPress Plugin Development Essentials", href: "http://net.tutsplus.com/tutorials/wordpress/wordpress-plugin-development-essentials/", imgSrc: "http://d2o0t5hpnwv4c1.cloudfront.net/1101_wpPlugins/wpplugincourse.png" }], template = document.querySelector('#template').innerHTML, result = document.querySelector('.result'), attachTemplateToData; //    .    //       attachTemplateToData = function(template, data) { var i = 0, len = data.length, fragment = ''; // For each item in the object, make the necessary replacement function replace(obj) { var t, key, reg; for (key in obj) { reg = new RegExp('{{' + key + '}}', 'ig'); t = (t || template).replace(reg, obj[key]); } return t; } for (; i < len; i++) { fragment += replace(data[i]); } return fragment; }; result.innerHTML = attachTemplateToData(template, data); })();

बेहतर जावास्क्रिप्ट टेम्पलेट इंजन

वीडियो (सबसे सुविधाजनक देखने के लिए एचडी का चयन करें):

परिणाम कोड:

एचटीएमएल

जावास्क्रिप्ट

वैकल्पिक (जावास्क्रिप्ट)

More articles: