Javascript fluent html builder
Идея генерации html с помощью javascript меня не отпустила. Напомню eе суть с помощью jQuery
но так как читаемость оставляет желать лучшего, была реализована небольшая библиотека.
Мне оно видится в том, что у нас есть набор кирпичиков, которые мы можем компоновать во что-то более сложное и повторно используемое.
var items = [1,2,3]
хотим получить
Сравните что нам придется сделать при обоих подходах если понадобится другой список.
Нужно к li чего то добавить?
Не вопрос.
http://jshtmlbuilder.codeplex.com
$("<div>", {"class":"something",id:10})
но так как читаемость оставляет желать лучшего, была реализована небольшая библиотека.
Теги, атрибуты и контент
//У нас есть переменная var h = Htmls которая содержит все теги.
h.div() == '<div></div>'
//У каждого тега есть методы для установки всех возможных атрибутов.
h.div().Class("some").Id(10) == '<div class="some" id="10"></div>'
//Так же имеется метод $(), для внутреннего контента тега.
h.div().$("some text") == '<div>some text</div>'
* This source code was highlighted with Source Code Highlighter.В чем же преимущество перед стандартным подходом шаблонизаторов?
Мне оно видится в том, что у нас есть набор кирпичиков, которые мы можем компоновать во что-то более сложное и повторно используемое.
Рассмотрим задачу
var items = [1,2,3]
хотим получить
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
Стандартный подход.
<% if(items.length) %>
<ul>
<% for(var item in items){ %>
<li><%= item %></li>
<% } %>
</ul>
<% } %>
Не стандартный
function defaultUl(items){
if(!items.length)
return null;
return h.ul(items.map(function(i){
return h.li(i);
}));
}
defaultUl(items);
Сравните что нам придется сделать при обоих подходах если понадобится другой список.
Нужно к li чего то добавить?
<ul>
<li id="1">1</li>
<li id="2">2</li>
<li id="3">3</li>
</ul>
Не вопрос.
function defaultUl(items, trans){
if(!items.length)
return null;
return h.ul(
items.map(function(i){
return trans(h.li(i),i);
}));
}
defaultUl(items, function(tag, item){
return tag.Id(item);
}
Еще один небольшой пример
var persons =
[{id:1,name:"First", balance: 100},
{id:2,name:"Second", balance: -200},
{id:3,name:"Third", balance: 300}];
<table>
<tr><th>Name</th><th>Balance</th></tr>
<tr id="1" class="green"><td>First</td><td>100</td></tr>
<tr id="2" class="red"><td>Second</td><td>-200</td></tr>
<tr id="3" class="green"><td>Third</td><td>300</td></tr>
</table>
var tr = function(tag, items){
return h.tr(items.map(function(x){return tag(x);}));
};
h.Head = function(){
var args = Array.prototype.slice.call(arguments);
return tr(h.th, args);
};
h.Row = function(){
var args = Array.prototype.slice.call(arguments);
return tr(h.td, args);
};
with (Htmls) {
var htmlPart = table(
Head("Name", "Balance"),
persons.map(function(p){
return Row(p.name, p.balance).Id(p.id).Class(p.balance > 0 ? "green" : "red" );
}));
}
Исходники
http://jshtmlbuilder.codeplex.com
комментарии (12)