Хочу поделиться своей небольшой библиотекой. Интересно услышать ваше мнение о ней.
Сразу к сути дела: 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> </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.
ссылка на оригинал статьи http://habrahabr.ru/post/257051/
Добавить комментарий