[Из песочницы] Html-maker — удобная и простая генерация html с помощью coffeescript
Хочу поделиться своей небольшой библиотекой. Интересно услышать ваше мнение о ней.Сразу к сути дела: htmlmake — это js-функция, позволяющая создавать строку с html-разметкой внутри для дальнейшей вставки в DOM-дерево.
Зачем это использовать? Начну немного издалека. Современную веб-разработку я бы условно поделил на 2 категории: Сайты, в которых html генерируется сервером, а javascript используется в основном для анимаций и ajax запросов (далее их я так и буду называть «сайты»); Одностраничные приложения, в которых js берет на себя всю отрисовку DOM (далее «веб-приложения»). Если говорить о веб-приложениях, то в них логично распространение js-шаблонизаторов для генерации html (например Jade). Моя библиотека рассчитана на 1 группу, в которой чаще всего распространен компонентный подход к написанию js-ов. Когда внедрять js-шаблонизатор ради генерации несложного набора html элементов слишком дорого, обычно html генерируется своим jquery кодом. Допустим, нам необходимо собрать следующий html:
Привет, Хабр!
).html («Привет, Хабр!»))
Или вот так:
$(»Привет, Хабр!
»)
И, на мой взгляд, такой код трудно читать и поддерживать. Вот пример использования моей функции:
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 будет сгенерирован. Результат:
- one
- two
- three
html = htmlmake (m)=> m.div «names», (m)=> m.ul (m)=> for name in @names m.li name Результат:
- Katarina
- Diana
- Alistar
