Pull to refresh

Javascript fluent html builder

Reading time 3 min
Views 3.7K
Идея генерации html с помощью javascript меня не отпустила. Напомню eе суть с помощью jQuery
$("<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

Progg it
Tags:
Hubs:
+4
Comments 12
Comments Comments 12

Articles