Shulou(Shulou.com)05/31 Report--

This article mainly explains "case Analysis of javascript template engine". Interested friends may wish to have a look. The method introduced in this paper is simple, fast and practical. Next let the editor to take you to learn "javascript template engine case analysis" bar!

JavaScript template engine is a method to separate the html structure from the content contained in it, which is generated in order to separate the user interface from business data, and can generate a standard html document; template engine is something that can be used to simplify string stitching operations when dynamic pages are rendered.

The operating environment of this tutorial: windows10 system, javascript1.8.5 version, Dell G3 computer.

What is the javascript template engine?

The template engine (in this case, the template engine for Web development) is generated to separate the user interface from the business data (content). It can generate documents in a specific format, and the template engine for the website will generate a standard HTML document.

The template engine is something that simplifies the splicing of strings when dynamic pages are rendered.

The JavaScript template is a way to separate the HTML structure from the content it contains. Templating systems usually introduce some new syntax, but they are usually very easy to use, especially if we have used templating systems elsewhere (such as Twig in PHP). It is interesting to note that token substitutions are usually represented by double curly braces ({{...}}), and Mustache and Handlebars are derived from their curly braces (hint: look sideways to see the similarity).

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

111222333

The data in the list is an array of data= obtained dynamically ['111', 22', 222, 33']. So we write 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 a html. As long as they change the data source, they will be able to output different page codes. For example, we can write like this:

For (var I = 0; I < this.list.length; iTunes +) {this.list [I]}

When you change the this.list data, you can get different results. But this kind of code, it is impossible to distinguish where is the logical code, where is the html itself code. So we added some tags that we use here to wrap the logic code.

We can add this code to the script tag, modify type to text/html or other formats, and get the text content through dom when we need to use it. If js can understand this code, you can update the template content by changing the data source. We can capture all the logical code through regular matching and then analyze it. Here, I take advantage of the way that js can new Function to execute the code, add the parts outside the logical code into a string, and output the final string result after execution: var etj = function (str, data) {

Var reg = / ^ /, reg2 = / ^ (. *?)

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.