[Interview question Bank] Template engine

directory

1. A template engine
2. New Function(‘ argument ‘,’ Function body ‘); Create the function body dynamically
3. Template rendering function
4. The build process

The template engine

In order to separate the view from the business logic, the MVP, MVVM, MVC V all use the template engine. Let’s talk about the requirements of a template engine.

1) the demand

1.1) {{}} expressions

This is the result of replacing the values in {{}} with expressions.

1.2) Loop statements

{%arr.forEach(item= > {%}
    <li>{{item}}</li>
{%})%}
Copy the code

generate

<li>aaa</li> 
<li>bbb</li>
Copy the code

1.3) Conditional statements

{% if(isShow) { %} <b>{{ name }}</b> {% } %}
Copy the code

generate

<b>tom</b>
Copy the code

New Function() dynamically creates the Function body

You need a syntax that we don’t usually use new Function() to dynamically create a Function body for example

new Function('arg'.'console.log(arg + 1); ');
// Create an anonymous function
function (arg) {
    console.log(arg + 1);
}

Copy the code

Template rendering function

The function of template rendering can be summarized in two steps:

1. Compile the template as the Generate function
2. Execute render function

For example, the simplest template

<b>{{ name }}</b>
Copy the code

The generated render function

generate(obj){
  let str = ' ';
  with(obj){
  str+=`<b>${name}</b>`}
  return str;
}
Copy the code

Execute generate results

const ret = generate({name : 'tom'}) 
 Tom 
Copy the code

4. Compilation process

We put the compilation process actually through the regular expression matching

1) The first step is interpolation processing

Convert the {{XXX}} expression to the ES6 template string ${XXX}

{{name}} to “${name}”

let str = `<b>{{ name }}</b>`;

let templateStr = str.replace(/\{\{([^}]+)\}\}/g.function () {
    let key = arguments[1].trim();
    return "${" + key + "}";
});
console.log(templateStr); // "<b>${name}</b>"
Copy the code

2) The second step is loop statement, branch statement processing

Supplementary here

Simple template engine

function compile(str) {
    return obj= > str.replace(/ {{(. *?) }}/g.(_, s) = > Function('obj'.`with(obj) {return ${s}; } `)(obj));
}
Copy the code

reference

• A template engine

conclusion

• New Function(‘ argument ‘,’ Function body ‘); Create the function body dynamically