Dac Laconic library
Laconic provides an intuitive approach to generating DOM javascript. The Laconic source code is laid out on Github .
Using the standard DOM API to create nested elements of a simple table, this code would be required:
This code is much more extensive than is appropriate - so by its appearance it is difficult to guess the result of its work. Now take a look at a more concise way to create the same table:
')
Laconic adds one method to the $ .el namespace for each of the known HTML elements . When these methods are run, a list of arguments is passed that has a variable length and consists of children, strings, numbers, or arrays of elements of these types. The first argument to the method can be an optional object containing the attributes of the element. Here is an example:
The code in this example will create the following structure of elements:
If you work with non-standard elements, you can call $ .el directly, specifying the element name as the first parameter. For example, the result of the following example will be identical to the previous one:
If you often have to create some construction from HTML elements, you can register them as a special element. You will have to give it a name and specify a function that adds the necessary contentto this , because this is a link to the root node. Here is an example:
By registering such an item, you can insert it:
This call will create the desired structure of the elements:
Using the standard DOM API to create nested elements of a simple table, this code would be required:
heap of code
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); This code is much more extensive than is appropriate - so by its appearance it is difficult to guess the result of its work. Now take a look at a more concise way to create the same 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 adds one method to the $ .el namespace for each of the known HTML elements . When these methods are run, a list of arguments is passed that has a variable length and consists of children, strings, numbers, or arrays of elements of these types. The first argument to the method can be an optional object containing the attributes of the element. Here is an example:
$.el.div({'class' : 'example'}, $.el.div('content')); The code in this example will create the following structure of elements:
<div class='example'> <div>content<div/> </div> If you work with non-standard elements, you can call $ .el directly, specifying the element name as the first parameter. For example, the result of the following example will be identical to the previous one:
$.el('div', {'class' : 'example'}, $.el.div('content')); If you often have to create some construction from HTML elements, you can register them as a special element. You will have to give it a name and specify a function that adds the necessary content
$.el.registerElement('element', function(one, two) { this.appendChild($.el.div(one)); this.appendChild($.el.div(two)); }); By registering such an item, you can insert it:
$.el.element('first', 'second').appendTo(document.body); This call will create the desired structure of the elements:
<div class='element'> <div>first</div> <div>second</div> </div> Source: https://habr.com/ru/post/145129/
All Articles