Html-maker — удобная и простая генерация html с помощью coffeescript

Хочу поделиться своей небольшой библиотекой. Интересно услышать ваше мнение о ней.

Сразу к сути дела: htmlmake — это js-функция, позволяющая создавать строку с html-разметкой внутри для дальнейшей вставки в DOM-дерево.

Зачем это использовать?

Начну немного издалека. Современную веб-разработку я бы условно поделил на 2 категории:

• Сайты, в которых html генерируется сервером, а javascript используется в основном для анимаций и ajax запросов (далее их я так и буду называть «сайты»);
• Одностраничные приложения, в которых js берет на себя всю отрисовку DOM (далее «веб-приложения»).

Если говорить о веб-приложениях, то в них логично распространение js-шаблонизаторов для генерации html (например Jade). Моя библиотека рассчитана на 1 группу, в которой чаще всего распространен компонентный подход к написанию js-ов. Когда внедрять js-шаблонизатор ради генерации несложного набора html элементов слишком дорого, обычно html генерируется своим jquery кодом. Допустим, нам необходимо собрать следующий html:

 <div class='wrapper'><h1>Привет, Хабр!</h1></div>

Тогда обычно мы пишем как-то так:

$(“<div>”).addClass(“wrapper”).append($(<h1>).html(“Привет, Хабр!”))

Или вот так:

$(“<div class='wrapper'><h1>Привет, Хабр!</h1></div>”)

И, на мой взгляд, такой код трудно читать и поддерживать. Вот пример использования моей функции:

htmlString = htmlmake ->
  @div "wrapper", ->
    @h1 "Привет, Хабр!"

Почему все примеры на coffeescript?

Вложенные функции пишутся слишком длинно на нативном js, поэтому сразу же не рекомендую использовать эту функцию тем, кто не использует coffeescript.

Вот пример чуть посложнее:

 html = htmlmake ->
    @div "hello-class", ->
      @ul ->
        @li "one"
        @li "two"
        @li "three"
      @a href: "http://google.com", "underworld!"

Интерфейс задуман максимально легкий. Cразу понятно, какой html будет сгенерирован. Результат:

 <div class='hello-class'>
    <ul>
      <li>one</li>
      <li>two</li>
      <li>three</li>
    </ul>
    <a href='http://google.com'>underworld</a>
  </div>

А если я хочу свой this?

Частенько бывает, что нам необходимо пробрасывать контекст в обработчики. Благо в coffescript это делается минимумом усилий. Но в этом случае мы теряем методы, генерирующие dom элементы, поэтому был предусмотрен входящий параметр во всех callback-ах. Вот пример:

@hello = "superman"
html = htmlmake (hm)=>
  hm.span id: "super", @hello

Результат:

 <span id='super'>superman</span>

Пример посложнее:

@names = ["Katarina", "Diana", "Alistar"]

  html = htmlmake (m)=>
    m.div "names", (m)=>
      m.ul (m)=>
        for name in @names
          m.li name

Результат:

 <div class='names'>
    <ul>
      <li>Katarina</li>
      <li>Diana</li>
      <li>Alistar</li>
    </ul>
  </div>

Спасибо за внимание! Буду рад услышать вашу критику/советы/пожелания.

Ссылка на репозиторий, ну или bower install html-maker.