What should I build a DOM

    Any javascript programmer from time to time there is a need to insert a piece of markup on the page. For large fragments, template engines are used. But what if you need to insert small pieces many times? In plain js this is not easy and elegant to do. The solution to the forehead is to use innerHTML . But this is a terrible decision! It just flips me when I see this in code like this:

    el.innerHTML = "

    Another solution was proposed by Mozilla - the html2dom library for generating html by constructing chain calls from the markup line. This solution is not bad enough, but it does not solve the main problem - the need to simply and clearly describe the markup.

    In the end, I decided to write my own library that solves all the necessary tasks - fast and safe DOM generation from a template with warm tube syntax.

    The library is called SNC - Simple Node Creator. It does not manipulate the markup line (innerHTML in particular), but has its own very simple, understandable and largely familiar syntax. At the input, it takes a string - a template, at the output is quite a finished DocumentFragment .

    The library is based on a lexical analyzer. First, the entire template is split into an array of tokens. In this case, for the separator token, its symbol code will be saved. This will allow you to uniquely identify it during the enumeration of the array - by type. In the end, we go through this sequence of tokens and collect the document.


    Any description of a node begins with its name. The name should be the name of the html tag. Then we decorators add various entities to the element.
    .class - add a class.
    #id- add identifier.
    [...]- allows you to specify nested nodes: div.parent[ span.child ]
    ;- node separator at the same level: ul.menu[ li#home; li#abount ]
    :attr- empty attribute.
    :attr@valueor :attr=value- one of the options for passing the attribute value. In this case, restrictions are imposed on the value - it should not contain control characters#.[]:%@. If the attribute name begins with "on", an event handler will be added, the name of the handler will be the value value, and the body from the second argument. The handler will be added by standard means dynamically. And if the name starts with "jq", then a jQuery event will be hung. The name of the handler can be specified in two ways - :onclick@handlerand :onclick@%handler- both of these methods carry the same meaning.
    %variable- a universal way to set variables, as well as a way to transfer text data (html entities are transmitted correctly). You can write#%idand then the attribute name will be taken from the second parameter - the value map. This is a simple object, where each key corresponds to a name in the template. Recently, it can also be an array; in this case, the values ​​are taken sequentially, as the template is processed. Such variables are supported for all basic elements - identifiers, classes, attributes and their values.

    There is also a third parameter - it is responsible for not throwing an exception if you suddenly forget to specify the value of the variable. I do not recommend using it. In this case, “undefined” will be substituted for the missing values.


    Call the function SNCto which you pass the necessary parameters.
    A few sample patterns have been shown above. Here is another great example:

    SNC("div #parent [" +
       "i.icon-open;" +
       "span.child%txt" +
    "] :data-status@%status" +
      ":onclick@handler" +
      ":jqcustomevent=jhandler", {
         txt:"lorem ipsum", 
         handler:function(e){ console.log("Standart event"); }, 
         jhandler:function(){ console.log("Custom event"); }


    The next development item will be adding cycles. I spied syntax at Emmet. There will be something like this:

    SNC("table [ {tr [ { td } * 2 ]} * 8 ]");

    It is also necessary to translate readme into English. But here I hope for the help of the community.

    Rep: github.com/ReklatsMasters/SNC

    Also popular now: