Шаблонизация

Transcript

1. View Slide

2. Михаил Давыдов
   Разработчик JavaScript
   Шаблонизаторы
   

   View Slide

3. 3
   var parent = document.createElement('div');
   for (var i = 0; i < 10; i++) {
   var item = document.createElement('div');
   item.setAttribute('class', 'item');
   item.appendChild(document.createTextNode('Pewpew'));
   parent.appendChild(item);
   }
   document.getElementById('container').appendChild(parent);
   Шаблоны на DOM методах
   

   View Slide

4. 4
   // ЛОЛШТО???
   item.appendChild
   (document.createTextNode
   ('Pewpew'));
   

   View Slide

5. 5
   Короче никак???
   // Pewpew
   

   View Slide

6. 6
   var html = '';
   for (var i = 0; i < 10; i++) {
   html += 'Pewpew';
   }
   html += '';
   document.getElementById('container')
   .innerHTML = html;
   Шаблоны на строках
   

   View Slide

7. 7
   Ну вот - другое дело!
   .innerHTML = html; <3
   

   View Slide

8. 8
   Код и данные смешиваются
   с шаблонами.
   Можно ли иначе?
   

   View Slide

9. 9
   Шаблонизаторы FTW!
   

   View Slide

10. 10
    
    {{do n.times}}
    Pewpew
    {{/do}}
    
    // Юзаем
    TemplateEngine.render(template, {
    n: 10
    })
    .appendTo('#container');
    Шаблоны на шаблонах!
    

    View Slide

11. 11
    Красота!
    

    View Slide

12. 12
    Шаблонизаторы
    •  http://ejohn.org/blog/javascript-micro-
    templating/
    •  http://api.jquery.com/jquery.tmpl/
    •  http://mustache.github.com/mustache.5.html
    еще OVER 900 http://goo.gl/aoM8b
    

    View Slide

13. Все
    

    View Slide