Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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

Mikhail Davydov

November 26, 2012
Tweet

More Decks by Mikhail Davydov

Other Decks in Education

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