This article mainly introduces how to automatically prompt the instance code by entering the email address in JavaScript. If you need it, you can refer to the comments you want to share with you about source code parsing of artTemplate. However, after one year, I couldn't find the template engine, so I had to try it myself after analyzing the template engine principles.
The template engine I wrote was shared with you. I remember that I compared several template engines.
The js template engine mentioned here uses the native javascript syntax, so it is similar to the native template engine of php.
What is the role of the front-end template engine?
1. it makes front-end development easier. You do not need to use the + operator to splice strings to generate a dom structure, but only need one element (the html template in it ), or a variable (storing the template) or a template file
2. Easy to maintain and reduce coupling. If your dom structure changes, you do not need to change the logic code. Instead, you only need to change the corresponding template (file)
3. It can be cached. If your template is a file similar to. tpl, you can load it in a browser and save it. Speaking of the. tpl file, you can not only cache it, but also use the module loader.
If you use. tpl as a module, you can load files as needed. Isn't it easier to save bandwidth and speed up the page?
4. etc.
How does the front-end template engine work?
The principle is simple: Object (data) + template (containing variables)-> string (html)
How is the front-end template engine implemented?
Parse the template, convert the Template into a function based on the lexical structure, call the function, pass the object (data), and output the string (html)
(Of course, you should also look at the code)
Like this:
The Code is as follows:
Var tpl = 'I am <% = name %>, <% = age => years old'; // <% = xxx> % lexical, marked as a variable
Var obj = {
Name: 'lovesueee ',
Age: 24
};
Var fn = Engine. compile (tpl); // compile it into a function
Var str = fn (obj); // render the string
Example:
The Code is as follows:
Ice demo