1. 起因
部门最近的一次分享中，有人提出来要实现一个ejs模板引擎，忽然发现之前仿佛素来都没有思考过这个问题，始终都是间接拿过去用的。那就入手实现一下吧。本文次要介绍ejs的简略应用，并非全副实现，其中波及到options配置的局部间接省略了。如有不对请指出，最初欢送点赞 + 珍藏。
2. 根本语法实现
定义render函数，接管html字符串，和data参数。
const render = (ejs = '', data = {}) => {}事例模板字符串如下:
<body> <div><%= name %></div> <div><%= age %></div></body>能够应用正则将<%= name %>匹配进去，只保留name。这里借助ES6的模板字符串。将name用${}包裹起来。
props中第2个值就是匹配到的变量。间接props[1]替换。
[ '<%= name %>', ' name ', 16, '<body>\n <div><%= name %></div>\n <div><%= age %></div>\n</body>']const render = (ejs = '', data = {}) => { const html = ejs.replace(/<%=(.*?)%>/g, (...props) => { return '${' + props[1] + '}'; // return data[props[1].trim()]; });}3. Function函数
这里失去的html是一个模板字符串。能够通过Function将字符串编程可执行的函数。当然这里也能够应用eval，随你。
<body> <div>${ name }</div> <div>${ age }</div></body>Function是一个构造函数，实例化后返回一个真正的函数，构造函数的最初一个参数是函数体的字符串，后面的参数都为形式参数。比方这里传入形参name，函数体通过console.log打印一句话。
const func = new Function('name', 'console.log("我是通过Function构建的函数，我叫：" + name)');// 执行函数，传入参数func('yindong'); // 我是通过Function构建的函数，我叫：yindong利用Function的能力能够将html模板字符串执行返回。函数字符串编写return，返回一个拼装好的模板字符串、
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
这里render函数中props[1]的实际上是变量名称，也就是name和age，能够替换成data[props[1].trim()]，不过这样写会有一些问题，偷个懒利用with代码块的个性。
with语句用于扩大一个语句的作用域链。换句人话来说就是在with语句中应用的变量都会先在with中寻找，找不到才会向上寻找。
比方这里定义一个age数字和data对象，data中蕴含一个name字符串。with包裹的代码块中输入的name会先在data中寻找，age在data中并不存在，则会向上寻找。当然这个个性也是一个with不举荐应用的起因，因为不确定with语句中呈现的变量是否是data中。
const age = 18;const data = { name: 'yindong'}with(data) { console.log(name); console.log(age);}这里应用with革新一下getHtml函数。函数体用with包裹起来，data就是传入的参数data，这样with体中的所有应用的变量都从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 = {}) => { // 优化一下代码，间接用$1代替props[1]; // const html = ejs.replace(/<%=(.*?)%>/g, (...props) => { // return '${' + props[1] + '}'; // }); const html = ejs.replace(/<%=(.*?)%>/gi, '${$1}'); return getHtml(html, data);}这样就能够打印出真是的html了。
<body> <div>yindong</div> <div>18</div></body>5. ejs语句
这里扩大一下ejs，加上一个arr.join语句。
<body> <div><%= name %></div> <div><%= age %></div> <div><%= arr.join('--') %></div></body>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);能够发现ejs也是能够失常编译的。因为模板字符串反对arr.join语法，输入：
<body> <div>yindong</div> <div>18</div> <div>1--2--3--4</div></body>如果ejs中蕴含forEach语句，就比较复杂了。此时render函数就无奈失常解析。
<body> <div><%= name %></div> <div><%= age %></div> <% arr.forEach((item) => {%> <div><%= item %></div> <%})%></body>这里分两步来解决。仔细观察能够发现，应用变量值得形式存在=号，而语句是没有=号的。能够对ejs字符串进行第一步解决，将<%=变量替换成对应的变量，也就是本来的render函数代码不变。
const render = (ejs = '', data = {}) => { const html = ejs.replace(/<%=(.*?)%>/gi, '${$1}'); console.log(html);}<body> <div>${ name }</div> <div>${ age }</div> <% arr.forEach((item) => {%> <div>${ item }</div> <%})%></body>第二步比拟绕一点，能够将下面的字符串解决成多个字符串拼接。简略举例，将a加上arr.forEach的后果再加上c转换为，str存储a，再拼接arr.forEach每项后果，再拼接c。这样就能够取得正确的字符串了。
// 原始字符串retrun ` a <% arr.forEach((item) => {%> item <%})%> c`// 拼接后的let str;str = `a`;arr.forEach((item) => { str += item;});str += c;return str;在第一步的后果上应用/<%(.*?)%>/g正则匹配出<%%>两头的内容，也就是第二步。
const render = (ejs = '', data = {}) => { // 第一步 let html = ejs.replace(/<%=(.*?)%>/gi, '${$1}'); // 第二步 html = html.replace(/<%(.*?)%>/g, (...props) => { return '`\r\n' + props[1] + '\r\n str += `'; }); console.log(html);}替换后失去的字符串长成这个样子。
<body> <div>${ name }</div> <div>${ age }</div> ` arr.forEach((item) => { str += ` <div>${ item }</div> `}) str += `</body>增加换行会更容易看一些。能够发现，第一局部是短少首部\`的字符串，第二局部是用str存储了forEach循环内容的残缺js局部，并且可执行。第三局部是短少尾部\`的字符串。
// 第一局部<body> <div>${ name }</div> <div>${ age }</div> `// 第二局部 arr.forEach((item) => { str += ` <div>${ item }</div> `})// 第三局部 str += `</body>解决一下将字符串补齐，在第一局部增加let str = \`，这样就是一个残缺的字串了，第二局部不须要解决，会再第一局部根底上拼接上第二局部的执行后果，第三局部须要在结尾出拼接\`; return str; 也就是补齐尾部的模板字符串，并且通过return返回str残缺字符串。
// 第一局部let str = `<body> <div>${ name }</div> <div>${ age }</div> `// 第二局部 arr.forEach((item) => { str += ` <div>${ item }</div> `})// 第三局部 str += `</body>`;return str;这部分逻辑能够在getHtml函数中增加，首先在with中定义str用于存储第一局部的字符串，尾部通过return返回str字符串。
const getHtml = (html, data) => { const func = new Function('data', ` with(data) { let str = \`${html}\`; return str; }`); return func(data);}这样就能够实现执行ejs语句了。
const data = { name: "yindong", age: 18, arr: [1, 2, 3, 4], html: '<div>html</div>', escape: '<div>escape</div>'}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 = {}) => { // 替换所有变量 let html = ejs.replace(/<%=(.*?)%>/gi, '${$1}'); // 拼接字符串 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);输入后果
<body> <div>yindong</div> <div>18</div> <div>1</div> <div>2</div> <div>3</div> <div>4</div></body>6. 标签本义
<%=会对传入的html进行本义，这里编写一个escapeHTML本义函数。
const escapeHTML = (str) => { if (typeof str === 'string') { return str.replace(/&/g, "&").replace(/</g, "<").replace(/>/g, ">").replace(/ /g, " ").replace(/"/g, """).replace(/'/g, "'"); } else { return str; }}变量替换的时候应用escapeHTML函数解决变量。这里通过\s*去掉空格。为了防止命名抵触，这里将escapeHTML革新成自执行函数，函数参数为$1变量名。
const render = (ejs = '', data = {}) => { // 替换转移变量 // let html = ejs.replace(/<%=\s*(.*?)\s*%>/gi, '${escapeHTML($1)}'); let html = ejs.replace(/<%=\s*(.*?)\s*%>/gi, `\${ ((str) => { if (typeof str === 'string') { return str.replace(/&/g, "&").replace(/</g, "<").replace(/>/g, ">").replace(/ /g, " ").replace(/"/g, """).replace(/'/g, "'"); } else { return str; } })($1) }`); // 拼接字符串 html = html.replace(/<%(.*?)%>/g, (...props) => { return '`\r\n' + props[1] + '\r\n str += `'; }); return getHtml(html, data);}getHtml函数不变。
const getHtml = (html, data) => { const func = new Function('data', `with(data) { var str = \`${html}\`; return str; }`); return func(data);}<%-会保留本来格局输入，只须要再加一条不应用escapeHTML函数解决的就能够了。
const render = (ejs = '', data = {}) => { // 替换本义变量 let html = ejs.replace(/<%=\s*(.*?)\s*%>/gi, '${escapeHTML($1)}'); // 替换其余变量 html = html.replace(/<%-(.*?)%>/gi, '${$1}'); // 拼接字符串 html = html.replace(/<%(.*?)%>/g, (...props) => { return '`\r\n' + props[1] + '\r\n str += `'; }); return getHtml(html, data, escapeHTML);}输入款式
<body> <div>yindong</div> <div>18</div> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div><div>escapeHTML</div></div></body>至此一个简略的ejs模板解释器就写完了。