What is javascript template engine

JavaScript template engine is a method of separating the html structure from the content contained in it. It is produced to separate the user interface from business data. It can generate a standard html document; the template engine is to make dynamic Something that can be used to simplify string splicing operations when rendering the page.

The operating environment of this tutorial: Windows 10 system, JavaScript version 1.8.5, Dell G3 computer.

What is a javascript template engine

The template engine (here specifically refers to the template engine used for Web development) is produced to separate the user interface from business data (content). It can generate For a document in a specific format, the template engine used for the website will generate a standard HTML document.

The template engine is designed to simplify string splicing operations when rendering dynamic pages.

JavaScript templates are a way to separate the structure of HTML from the content contained within it. Template systems often introduce some new syntax, but are usually very simple to use, especially if we have used a template system elsewhere before (such as Twig in PHP). An interesting thing to note is that token substitution is typically represented by double braces ( {{ ... }} ), from which Mustache and Handlebars are derived (tip: turn it sideways to see the similarity).

For example, we need to render a list on the page:

111
222
333

The data in the list is an array obtained dynamically data=['111','222','333']. Then we write it directly in code, we need to loop the data, and then splice the data of each li. Students who are used to writing pages want to write the code logic directly in an html. As long as the data source is changed, different page codes can be output. For example, we can write like this:

for(var i = 0; i < this.list.length; i++){
  
this.list[i]
}

When the data of this.list is replaced, different results can be obtained. But with such code, it is impossible to distinguish where is the logic code and where is the HTML code itself. So we added some tags, here we use <% %> to wrap the logic code.

<%for(var i = 0; i < this.list.length; i++){%>
  
<%=this.list[i]%>
<%}%>

We can add this code to the script tag, change the type to text/html or other formats, and obtain the text content through the dom when needed. If js can understand this code, it can update the template content by changing the data source. We can capture all logical codes through regular matching and then analyze them. Here I took a trick and used js to use new Function to execute the code. I added the parts other than the logic code into a string. After execution, the final string result was output: var etj = function (str, data) {

var reg = /^<%.*?%>/,
    reg2 = /^(.*?)<%/,
    str2 = 'var str = "";',
    str = str.replace(/[\r\t\n]/g, " ");
while (str.length) {
    if (match = reg.exec(str)) {
        if (/^<%=/.exec(str)) {
            str = str.replace(match[0], '');
            str2 += ('str +' + match[0].replace(/<%|%>/g, ''));
            str2 += ';';
        } else {
            str = str.replace(match[0], '');
            str2 += match[0].replace(/<%|%>/g, '');
            str2 += ';';
        }
    } else {
        match = reg2.exec(str)[1];
        str = str.replace(match[0], '');
        str2 += 'str +="';
        str2 += match[0];
        str2 += '";';
    }
}
str2 += 'return str;'
var f = new Function(str2);
return f.call(data);

} This is a toy engine written by myself, and it still has bugs. Let’s do a demo first (the logic is simple after all). Here we use simple regular rules to turn the template into a piece of pure js code. After importing the data source, the execution result is the html code we want. We only need to execute:

etj(str, {'list': [1, 2, 3]});

. In this way, the logic of html does not need to be embedded in the js code.

【Related recommendations: javascript video tutorial, web front-end】

The above is the detailed content of What is javascript template engine. For more information, please follow other related articles on the PHP Chinese website!