Basic working principles of the template engine

Basic working principles of the template engine

The basic working principle of the template engine is simply to use regular expressions to replace the predefined tags in the template.

Here is a simple example of how to run it.

-----------------------------------------------------------------------------

The requirements are as follows:

The data of each student in a class must be displayed in a table on the webpage. For example:

Name	Student ID	Gender
Xiao Zhang	01	Male
John	02	Female
Wang Wu	03	Female

 

 

 

 

Assume that the data we extract from the database is in JSON format, as shown below:

User = [{"name": "John", "num": "01", "sex": "male "},
{"Name": "John", "num": "02", "sex": "female "},
{"Name": "Wu", "num": "03", "sex": "female "},
...
...
{"Name": "six", "num": "33", "sex": "female"}];

Then, how can we easily put JSON-format data into the HTML structure?

The html structure of each row in the table is only "name", "student ID", and "gender. Then we can extract the same structure from each row. The name, student ID, and gender are used as parameters. Then, the javascript method is used to repeatedly append a new tag to the table tag, so that the table structure can be conveniently generated.

For example:

function getHTMLElement(name, num, sex) {     return  "<tr><td>" + name + "</td><td>" + num + "</td><td>" + sex + "</td></tr>";}var str = "";for(i = 0; i < user.length; i++){    str += getHTMLELement(user[i][name], user[i][num], user[i][sex])}document.getElementById("#table").innerHTML = str;

-----------------------------------------------------------------------------

However, the format of String concatenation is too cumbersome and is not used in complex scenarios. For example, if a tag has attributes, the single quotation marks and double quotation marks must be considered. Therefore, the template engine uses regular expression matching instead of String concatenation: the code changes are as follows:

1) Use a template to replace String concatenation

<Script type = "text/plain" id = "template"> // note that the type in this region cannot be set to text/javascript. Otherwise, the browser will parse the data in the tag with js, an error is reported.
<Tr> <td >{{ name }}</td> <td >{{ num }}</td> <td >{{ sex }}</td> </tr>
</Script>

The String concatenation write structure is replaced by the html structure written in the script tag. To fill in the data, use an agreed mark. For example

{+ 0 ~ Multiple spaces + code specific data identifiers + 0 ~ Multiple spaces + }}

Ending with "{" and "}" is to distinguish the part of the data to be filled from other normal html code.

Function template (tpl, data ){

Var reg =/{\ s + ([a-zA-Z] +) \ s +}/; // used to match the fields to be filled in the template

Html = document. getElementById (tpl). innerHTML; // obtain the Template

Var match;
While (match = reg.exe c (html) {// retrieve all fields to be filled in the template

Console (match); // print the result, for example, => ["{name}", "name", index: 8, input: "<tr> <td >{{ name }}</td> <td >{{ num }}</td> <td >{{ sex }}</td> </tr> "]

Html = html. replace (match [0], data [match [1]); // implement replacement
}

Return html; // return the replaced html code.
}

In the last step, you only need to append the data to the structure.

var str = "";for(i = 0; i < user.length; i++){    str += template("template", user[i]);}document.getElementById("#table").innerHTML = str;

-----------------------------------------------------------------------------

Finally, an example of the full version is provided.

<! DOCTYPE html>