Go away HTML, go away

Тенденция последних лет в веб-разработке — фреймворки и компиляторы (сборщики, если кому то угодно). Они везде: в javascript, css, подключаемых библиотеках и т.д. Javascript фреймворки повсеместно используют шаблоны для отрисовки всего и вся. Но у всех них есть одна общая черта — HTML. Громоздкий, свёрстанный, местами от проекта к проекту контрл+ц — контрл+в… Весь этот html всегда лежит кусками, прикрепляется конструкциями вида script type=«text/template». В общем, как будто здесь еще не придумали, как с ним бороться.

В один момент я подумал, а почему бы не перевести всю вёрстку в JSON. Он компактен, красноречив и очень хорошо читабелен (я имею ввиду сервисы а-ля jsoneditoronline.org). Порыскав готовые библиотеки понял, что эту верстку в json только усложняют и никто не сделал очевидного и простого.

И сделал — randr. Библиотечка небольшая, работает шустро.

Работает так: на вход одноимённой функции даёте определенный json, на выходе — готовый DOM (или какая-то его часть):

var json = {
 node: 'div',
 content: 'Hello World'
}

document.body.appendChild(randr(json));

randr из этого json`а сделает div с текстом «Hello World» внутри.

Еще можно передавать атрибуты:

var json = {
 node: 'div',
 defaults: [
  { type: 'class', data: 'super-class' },
  { type: 'attr', data: 'some attr value' }
 ],
 content: 'Hello World'
}

document.body.appendChild(randr(json));

Отлично! у нашего div`а появились атрибуты class и attr. Однажды мне finom подсказал сделать «defaults» в виде объекта со свойствами, так говорит компактнее. Сказано — сделано:

var json = {
 node: 'div',
 defaults: {
  class: 'super-class',
  attr: 'some attr value'
 },
 content: 'Hello World'
}

document.body.appendChild(randr(json));

Да, стало компактнее. Оставил оба способа. Но уменьшать объем можно и другим способом. Обычно текст (в роли контента) заключен в теги «p». Именно, так мы и поступим, уберём ноду «div»:

var json = {
 defaults: {
  class: 'super-class',
  attr: 'some attr value'
 },
 content: 'Hello World'
}

document.body.appendChild(randr(json));

Получилось! По умолчанию если отсутствует «node» а «content» является текстом — рисуем «p», иначе будет «div». Да, можно просто не писать эти пресловутые div:

var json = {
 defaults: {
  class: 'super-class',
  attr: 'some attr value'
 },
 content: {
   content: {
     content: 'Хватит уже изголяться'
   }
 }
}

document.body.appendChild(randr(json));

Надеюсь ясно, что тут будет параграф, обёрнутый в 2 div`а. И да, контент может быть разный. Например массив:

var json = {
 defaults: {
  class: 'super-class',
  attr: 'some attr value'
 },
 content: [
  { content: 'параграф 1 с текстом' },
  { content: 'параграф 2 с текстом' }
 ]

document.body.appendChild(randr(json));

Вот уже лучше, но можно добавить еще кое-что! Наследование атрибутов:

var json = {
 defaults: {
  class: 'super-class',
  attr: 'some attr value'
 },
 implement: true,
 content: [
  { content: 'параграф 1 с текстом' },
  { content: 'параграф 2 с текстом' }
 ]

document.body.appendChild(randr(json));

Видно, что появился флаг implement: true — именно он отвечает за передачу атрибутов дочерним элементам. Но дети бывают капризные и не захотят принимать это наследство:

var json = {
 defaults: {
  class: 'super-class',
  attr: 'some attr value'
 },
 implement: true,
 content: [
  { content: 'параграф 1 с текстом', extend: false },
  { content: 'параграф 2 с текстом' }
 ]

document.body.appendChild(randr(json));

Думаю, тут тоже ясно. Отрицательный флаг extend не позволяет наследовать атрибуты.
Наследуются атрибуты по принципу затирания родительских дочерними, кроме стилевых классов. У них происходит склеивание — «родительский-класс дочерний-класс».

Зачем вообще наследовать их кончено каждый решит сам. Я лично использую для вспомогательных классов вроде «float-right, center, background-red». Думаю, придумать можно. Но никто не заставляет пользоваться.

Есть еще фишечка — создание своих собственных «нод». Так сказать готовых блоков хитро сверстанных элементов или просто повторяющихся заготовок:

var myNodes = {
 askDelete: function(content){
  var container = document.createElement('div');
  var bYes = document.createElement('button');
  var bNo = document.createElement('button');
  bYes.innerHTML = content.yes;
  bNo.innerHTML = content.no;
  container.appendChild(bYes);
  container.appendChild(bNo);
  return container;
 }
}

var json = {
 defaults: {
  class: 'super-class',
  attr: 'some attr value'
 },
 content: [
  { content: 'параграф 1 с текстом' },
  {
    node: 'askDelete',
    content: {
      yes: 'Да, удалить',
      no: 'Нет конечно'
    }
  }
 ]

document.body.appendChild(randr(json, myNodes));

В этом коде мы создали нашу волшебную ноду «askDelete» в объекте «myNodes» и передали объект вторым параметром в randr. А в json мы вызываем эту волшебную ноду и в качестве параметров используем свойство «content». Таким образом можно создавать свои заготовочки и внедрять их в разнообразные проекты.

Если же вам нужно получить от randr не DOM, а верстку в виде текста, то просто добавьте третий параметр «true» в randr:

var myNodes = {
 askDelete: function(content){
  var container = document.createElement('div');
  var bYes = document.createElement('button');
  var bNo = document.createElement('button');
  bYes.innerHTML = content.yes;
  bNo.innerHTML = content.no;
  container.appendChild(bYes);
  container.appendChild(bNo);
  return container;
 }
}

var json = {
 defaults: {
  class: 'super-class',
  attr: 'some attr value'
 },
 content: [
  { content: 'параграф 1 с текстом' },
  {
    node: 'askDelete',
    content: {
      yes: 'Да, удалить',
      no: 'Нет конечно'
    }
  }
 ]

document.body.innerHTML = randr(json, myNodes, true);

На этом всё. Думаю, такая реализация вёрстки с помощью json будет вам полезна. По крайней мере занимает меньше места и можно передавать в Ajax в виде объектов.