Shulou(Shulou.com)06/01 Report--

This article introduces the knowledge of "how to write an EJS template engine with JavaScript". In the operation of actual cases, many people will encounter such a dilemma, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

1. cause

In a recent sharing by the department, someone proposed to implement an ejs template engine, and suddenly found that this issue had never been considered before and had been used directly. Then let's make it happen. This article mainly introduces the simple use of ejs, not all the implementation, in which the part related to options configuration is directly omitted. If there is anything wrong, please point out, finally welcome to like + collection.

two。 Basic syntax implementation

Define the render function, which receives html strings, and data parameters.

Const render = (ejs ='', data = {}) = > {}

The case template string is as follows:

You can use regularities to match, leaving only the name. Here with the help of the template string of ES6. Wrap the name in ${}.

The second value in props is the matching variable. Replace directly with props [1].

[', 'name', 16,'\ n\ n\ n'] const render = (ejs ='', data = {}) = > {const html = ejs.replace (/ / g, (... props) = > {return'${'+ props [1] +'}'; / / return data [props [1] .trim ()];});} 3. Function function

The html you get here is a template string. You can use Function to program strings into executable functions. Of course, you can also use eval here, as you like.

${name} ${age}

Function is a constructor that returns a real function when instantiated. The last argument to the constructor is the string of the function body, and the preceding arguments are all formal arguments. For example, the formal parameter name is passed in here, and the function body prints a sentence through console.log.

Const func = new Function ('name',' console.log ("I am a function built through Function, my name is:" + name)'); / / execute the function, passing in the parameter func ('yindong'); / / I am a function built through Function, my name is: yindong

Using the ability of Function, you can return the html template string. Write return for function numeric string, and return an assembled template string,

Const getHtml = (html, data) = > {const func = new Function ('data', `return\ `${html}\`; `); return func (data); / / return eval (` ((data) = > {return\ `${html}\`;}) (data) `)} const render = (ejs ='', data = {}) = > {const html = ejs.replace (/ / g, (... props) = > {return'${'+ props [1] +'}'') }); return getHtml (html, data);} 4 with

Here the props [1] in the render function is actually the variable name, that is, name and age, which can be replaced with data [props [1] .trim ()], but there will be some problems with this writing, so you can't take advantage of the features of the with code block.

The with statement is used to extend the scope chain of a statement. In other words, variables used in with statements are looked for in with first, and then look up if you can't find them.

For example, an age number and a data object are defined here, and the data contains a name string. The name output in the code block of the with package will first be looked for in the data, and if the age does not exist in the data, it will look up. Of course, this feature is also a reason why with is not recommended, because it is not sure whether the variable that appears in the with statement is in data.

Const age = 18 age Const data = {name: 'yindong'} with (data) {console.log (name); console.log (age);}

Here we use with to modify the getHtml function. The function body is wrapped in with, and data is the parameter data passed in, so that all variables used in the with body are looked up from data.

Const getHtml = (html, data) = > {const func = new Function ('data', `with (data) {return\ `${html}\`;} `); return func (data); / / return eval (` ((data) = > {with (data) {return\ `${html}\`;}) (data) `)} const render = (ejs ='', data = {}) = > {/ / optimize the code and directly replace props [1] with $1 / / const html = ejs.replace (/ / g, (... props) = > {/ / return'${'+ props [1] +'}'; / /}); const html = ejs.replace (/ / gi,'${$1}'); return getHtml (html, data);}

So you can print out the real html.

Yindong 185. Ejs statement

Here we extend ejs with an arr.join statement.

Const data = {name: "yindong", age: 18, arr: [1,2,3,4]} const html = fs.readFileSync ('. / html.ejs', 'utf-8'); const getHtml = (html, data) = > {const func = new Function (' data', `with (data) {return\ `${html}\`;} `); return func (data) } const render = (ejs ='', data = {}) = > {const html = html = ejs.replace (/ / gi,'${$1}'); return getHtml (html, data);} const result = render (html, data); console.log (result)

You can find that ejs can also be compiled normally. Because the template string supports arr.join syntax, the output:

Yindong 18 1 / 2 / 3 / 4 / 2 / 2 / 3 / 4

If the ejs contains a forEach statement, it is more complicated. At this point, the render function cannot be parsed properly.

{% >

There are two steps to deal with it. If you look closely, you can see that there is a = sign in the way it is worth using a variable, while there is no = sign in a statement. You can take the first step of processing the ejs string, putting {const html = ejs.replace (/ / gi,'${$1}'); console.log (html);} ${name} ${age} {% > ${item}

The second step is to compare the above string into multiple string concatenation. For a simple example, convert the result of a plus arr.forEach plus c into str to store a, then splice each result of arr.forEach, and then concatenate c. This way you can get the correct string.

/ / original string retrun `a {% > item c` / / stitched let str;str = `a`; arr.forEach ((item) = > {str + = item;}); str + = creturn str

Use / / g regular matching on the results of the first step to match the middle content, which is the second step.

Const render = (ejs ='', data = {}) = > {/ / the first step let html = ejs.replace (/ / gi,'${$1}'); / / the second step html = html.replace (/ / g, (... props) = > {return'\ r\ n' + props [1] +'\ r\ n str + = `;}); console.log (html);}

The replaced string looks like this.

${name} ${age} `arr.forEach ((item) = > {str + = `${item}`}) str + = `

Adding line breaks makes it easier to read. As you can see, the first part is a string that lacks the first `, and the second part stores the complete js part of the content of the forEach loop in str and is executable. The third part is the string that lacks the trailing `.

${name} ${age} `/ / part II arr.forEach ((item) = > {str + =` ${item} `}) / / part III str + =`

To complete the string, add let str = `in the first part, so that the second part does not need to be processed, and the execution result of the second part will be stitched on the basis of the first part. The third part needs to be stitched out at the end. Return str; is the template string at the end, and the complete string str is returned through return.

/ / part 1 let str = `${name} ${age}` / / part 2 arr.forEach ((item) = > {str + = `${item}`}) / / part 3 str + = ``; return str

This part of the logic can be added to the getHtml function. First, define the string that str uses to store the first part in with, and the tail returns the str string through return.

Const getHtml = (html, data) = > {const func = new Function ('data', `with (data) {let str =\ `${html}\`; return str;} `); return func (data);}

This makes it possible to execute the ejs statement.

Const data = {name: "yindong", age: 18, arr: [1,2,3,4], html: 'html', escape:' escape'} const html = fs.readFileSync ('. / html.ejs', 'utf-8'); const getHtml = (html, data) = > {const func = new Function (' data', `with (data) {var str =\ `${html}\`; return str;} `); return func (data) } const render = (ejs ='', data = {}) = > {/ / replace all variables let html = ejs.replace (/ / gi,'${$1}'); / / concatenate the string html = html.replace (/ / g, (... props) = > {return'\ r\ n'+ props [1] +'\ r\ n str + = `;}); return getHtml (html, data) } const result = render (html, data); console.log (result)

Output result:

Yindong

eighteen

one

two

three

four

6. Label escape

{if (typeof str = 'string') {return str.replace (/ & / g, "&"). Replace (/ / g, ">"). Replace (/ / g, "). Replace (/" / g, ""). Replace (/' / g, "& # 39;);} else {return str;}}

Use the escapeHTML function to process variables when replacing them. The spaces are removed here through\ s*. To avoid naming conflicts, escapeHTML is transformed into a self-executing function with an argument of $1 variable name.

Const render = (ejs ='', data = {}) = > {/ / replace the transfer variable / / let html = ejs.replace (/ / gi,'${escapeHTML ($1)}') Let html = ejs.replace (/ / gi, `\ ${(str) = > {if (typeof str = 'string') {return str.replace (/ & / g, "&"). Replace (/ / g, ">"). Replace (/ / g, "). Replace (/" / g, ""). Replace (/' / g, "& # 39;") } else {return str;}) ($1)} `); / / concatenate the string html = html.replace (/ / g, (... props) = > {return'`\ r\ n'+ props [1] +'\ r\ n str + = `;}); return getHtml (html, data);}

The getHtml function remains unchanged.

Const getHtml = (html, data) = > {const func = new Function ('data', `with (data) {var str =\ `${html}\`; return str;} `); return func (data);}

{/ / replace the escape variable let html = ejs.replace (/ / gi,'${escapeHTML ($1)}'); / / replace the remaining variables html = html.replace (/ / gi,'${$1}'); / / concatenate the string html = html.replace (/ / g, (... props) = > {return'\ r\ n' + props [1] +'\ r\ n str + = `' }); return getHtml (html, data, escapeHTML);}

Output style:

Yindong

eighteen

one

two

three

four

EscapeHTML

This completes a simple ejs template interpreter.

This is the end of the content of "how to write an EJS template engine with JavaScript". Thank you for reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

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.