Laconic обеспечивает интуитивный подход к генерированию DOM джаваскриптом. Исходный код Laconic выложен на Гитхабе.
При использовании стандартного DOM API для создания вложенных друг в друга элементов простой таблицы потребовался бы вот какой код:
Такой код много обширнее, чем это уместно — так что по его виду угадать результат его работы трудно. Теперь взгляните на более лаконический способ создания той же таблицы:
Laconic добавляет в пространство имён $.el по одному методу для каждого из известных элементов HTML. Этим методам при их запуске передаётся список аргументов, имеющий переменную длину и состоящий из дочерних элементов, строк, чисел, или массивов элементов этих типов. Первым аргументом метода может быть необязательный объект, содержащий атрибуты элемента. Вот пример:
Код этого примера создаст такую структуру элементов:
Если вы работаете с нестандартными элементами, то можно вызвать непосредственно $.el, указав имя элемента в качестве первого параметра. Например, результат нижеследующего примера будет тождественен предыдущему:
Если некоторую конструкцию из элементов HTML вам приходится создавать часто, то можете зарегистрировать их в качестве особого элемента. Вам придётся дать ему имя и указать функцию, которая добавляет необходимое содержимоек this, потому что this служит ссылкою на корневой узел. Вот пример:
Зарегистрировав такой элемент, вы можете вставлять его:
Этот вызов создаст желаемую структуру элементов:
При использовании стандартного DOM API для создания вложенных друг в друга элементов простой таблицы потребовался бы вот какой код:
ворох кода
var firstTh = document.createElement('th');
firstTh.appendChild(document.createTextNode('first name'));
var secondTh = document.createElement('th');
secondTh.appendChild(document.createTextNode('last name'));
var firstTr = document.createElement('tr');
firstTr.appendChild(firstTh);
firstTr.appendChild(secondTh);
var firstTd = document.createElement('td');
firstTd.appendChild(document.createTextNode('Joe'));
var secondTd = document.createElement('td');
secondTd.appendChild(document.createTextNode('Stelmach'));
var secondTr = document.createElement('tr');
secondTr.appendChild(firstTd);
secondTr.appendChild(secondTd);
var table = document.createElement('table');
table.appendChild(firstTr);
table.appendChild(secondTr);
document.body.appendChild(table);
Такой код много обширнее, чем это уместно — так что по его виду угадать результат его работы трудно. Теперь взгляните на более лаконический способ создания той же таблицы:
$.el.table(
$.el.tr(
$.el.th('first name'),
$.el.th('last name')),
$.el.tr(
$.el.td('Joe'),
$.el.td('Stelmach'))
).appendTo(document.body);
Laconic добавляет в пространство имён $.el по одному методу для каждого из известных элементов HTML. Этим методам при их запуске передаётся список аргументов, имеющий переменную длину и состоящий из дочерних элементов, строк, чисел, или массивов элементов этих типов. Первым аргументом метода может быть необязательный объект, содержащий атрибуты элемента. Вот пример:
$.el.div({'class' : 'example'},
$.el.div('content'));
Код этого примера создаст такую структуру элементов:
<div class='example'>
<div>content<div/>
</div>
Если вы работаете с нестандартными элементами, то можно вызвать непосредственно $.el, указав имя элемента в качестве первого параметра. Например, результат нижеследующего примера будет тождественен предыдущему:
$.el('div', {'class' : 'example'},
$.el.div('content'));
Если некоторую конструкцию из элементов HTML вам приходится создавать часто, то можете зарегистрировать их в качестве особого элемента. Вам придётся дать ему имя и указать функцию, которая добавляет необходимое содержимое
$.el.registerElement('element', function(one, two) {
this.appendChild($.el.div(one));
this.appendChild($.el.div(two));
});
Зарегистрировав такой элемент, вы можете вставлять его:
$.el.element('first', 'second').appendTo(document.body);
Этот вызов создаст желаемую структуру элементов:
<div class='element'>
<div>first</div>
<div>second</div>
</div>