Лаконичная Dom-Библиотека.

Laconic обеспечивает интуитивно понятный подход к генерации DOM с помощью JavaScript. Выложен лаконичный исходный код на Гитхабе .

При использовании стандартного 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>

Теги: #Лаконичность #генерация кода #генерация #разработка сайтов #JavaScript

Последнее изменение: 2024-10-19 21:10:22

Вместе с данным постом часто просматривают: