Clever Geek Handbook

即興のJavaScriptテンプレートエンジン

Webプロジェクトに本格的なテンプレートエンジンは必要ないと仮定しますが、一方で、HTMLをJavaScriptから分離するのが良いコードの場所がときどきあります。 この場合、1つの解決策は、最も単純なJavaScriptベースのテンプレートオプションを使用することです。

ソースコード 。

デモ

ビデオ（最も便利な視聴にはHDを選択）：






結果コード：



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>


Javascript 


 (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; })();


代替（JavaScript）


ビデオで説明されている方法は読みやすくなっていますが、自動化が必要な場合は、次のように値と正規表現を動的に適用できます。 

 (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:


All Articles