Предположим, вам не нужен полноценный шаблонизатор для веб-проекта, но с другой стороны периодически встречаются места в коде, где хорошо бы отделить HTML от JavaScript-а. В таком случае, одним из решением может быть использование варианта самой простой шаблонизации на основе 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);
})();
Автор: denldv
