denldv May 13 2012 at 16:39

Импровизированный шаблонизатор на JavaScript

3 min

2.7K

Translation

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

Tags:

Hubs: