JavaScript function template engine: a powerful tool for dynamically generating HTML

JavaScript function template engine: a powerful tool for dynamically generating HTML

In front-end development, dynamically generating HTML is a common requirement, for example: displaying information based on user input Search results, dynamic rendering of pages based on data incoming from the background, etc. In traditional front-end development, we usually use string concatenation to generate dynamic HTML code. However, this method has many limitations, such as poor readability, error-prone, and difficult maintenance. The JavaScript function template engine can solve these problems very well. At the same time, compared with other template engines, the JavaScript function template engine is more lightweight, flexible and easy to use.

What is the JavaScript function template engine?

The JavaScript function template engine is a common tool in front-end development. It uses HTML fragments as parameters to dynamically generate HTML strings to complete the purpose of rendering data to the interface. It adopts a string template syntax similar to ES6, that is, using backtick `` to enclose the string, and using ${} to mark variables in the string, similar to the following example:

<div>
  <h1 id="title">${title}</h1>
  <p>${content}</p>
</div>

In the template In the engine, we can map variables to HTML fragments by defining functions to render data onto the page.

Advantages of JavaScript function template engine

JavaScript function template engine has the following advantages:

1. Good readability: using the function template engine to generate HTML code is more consistent The structure is similar to HTML, easy to read, and convenient for other developers to perform subsequent maintenance.
2. Strong flexibility: Because JavaScript functions are used to implement it, developers can flexibly define and write functions according to specific business needs.
3. Easy to maintain: When using the function template engine to generate HTML code, we can extract the same HTML fragments and encapsulate them into separate functions to facilitate future maintenance.
4. Lightweight: The JavaScript function template engine is very lightweight, and because it is implemented in JavaScript itself, there is no need to introduce third-party libraries, so it will not put pressure on the page loading speed.

Implementation of JavaScript function template engine

The following is the basic implementation of JavaScript function template engine:

function template(tmpl, data) {
  return tmpl.replace(/${(w+)}/g, function(match, key) {
    return data[key];
  });
}

var data = {
  title: "Hello World",
  content: "This is a demo of JavaScript function template engine"
};

var tmpl = `
  <div>
    <h1 id="title">${title}</h1>
    <p>${content}</p>
  </div>
`;

var html = template(tmpl, data);

document.body.innerHTML = html;

We define the entire HTML fragment as a string, Use ${} to replace the variables that need to be filled dynamically, then use the replace() method of the string in JavaScript to replace the variables in the string, and finally output the result to the page.

It should be noted that in actual applications, we may face more complex scenarios, such as the need to loop rendering data, the need to use conditional judgments, etc. At this time, we can implement more complex functions by adding some logical judgments to the function.

The following is an extended version of the above code example, which supports looping rendering data:

function template(tmpl, data) {
  return tmpl.replace(/<%=(w+)%>/g, function(match, key) {
    return data[key];
  }).replace(/<%for +(w+) +in +(w+)((w+))%>((?!
).|
)+<%endfor%>/g, function(match, key, fn, name) {
    var str = "";
    data[name].forEach(function(item) {
      str += fn(item);
    });
    return str;
  });
}

var data = {
  title: "Hello World",
  content: "This is a demo of JavaScript function template engine",
  list: [{
      name: "item1",
      content: "This is item 1"
    },
    {
      name: "item2",
      content: "This is item 2"
    },
    {
      name: "item3",
      content: "This is item 3"
    }
  ]
};

var tmpl = `
  <div>
    <h1><%=title%></h1>
    <p><%=content%></p>
    <%for item in list(function(item){%>
    <div>
      <h2><%=item.name%></h2>
      <p><%=item.content%></p>
    </div>
    <%})%>
  </div>
`;

var html = template(tmpl, data);

document.body.innerHTML = html;

In this example, we define the syntax of a for loop, which generates a function that The function is applied to each element in the items array and the resulting string is returned.

Because the JavaScript function template engine is so flexible, it can be easily extended to meet specific needs. However, in actual development, it is recommended to use open source JavaScript template engines, such as Handlebars.js, Mustache.js, ejs, etc., which contain a large number of functions and optimizations, are more comprehensive and stable, and also support pre-compilation for better performance. performance.

Summary

The JavaScript function template engine is a very useful tool that can easily generate dynamic HTML and render it on the page. Compared with other template engines, it has the advantages of higher flexibility, lighter size, and simpler implementation. However, in order to improve efficiency and stability in actual production, it is recommended to use a mature open source template engine.

The above is the detailed content of JavaScript function template engine: a powerful tool for dynamically generating HTML. For more information, please follow other related articles on the PHP Chinese website!