简单实现ejs模板引擎
1. 起因
部门最近的一次分享中，有人提出来要实现一个ejs模板引擎，突然发现之前似乎从来都没有考虑过这个问题，一直都是直接拿过来用的。那就动手实现一下吧。本文主要介绍ejs的简单使用，并非全部实现，其中涉及到options配置的部分直接省略了。如有不对请指出，最后欢迎点赞 + 收藏。
2. 基本语法实现
定义render函数，接收html字符串，和data参数。
const render = (ejs = '', data = https://www.it610.com/article/{}) => {}事例模板字符串如下:
可以使用正则将
name。这里借助ES6的模板字符串。将name用${}包裹起来。props中第2个值就是匹配到的变量。直接props[1]替换。[
'',
' name ',
16,
'\n\n\n'
]const render = (ejs = '', data = https://www.it610.com/article/{}) => {
const html = ejs.replace(//g, (...props) => {
return '${' + props[1] + '}';
// return data[props[1].trim()];
});
}3. Function函数 这里得到的
html是一个模板字符串。可以通过Function将字符串编程可执行的函数。当然这里也可以使用eval，随你。
${ name }
${ age }
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 = https://www.it610.com/article/{}) => {
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 = https://www.it610.com/article/{
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 = https://www.it610.com/article/{}) => {
// 优化一下代码，直接用$1替代props[1];
// const html = ejs.replace(//g, (...props) => {
//return '${' + props[1] + '}';
// });
const html = ejs.replace(//gi, '${$1}');
return getHtml(html, data);
}这样就可以打印出真是的
html了。
yindong
18
5. ejs语句 这里扩展一下
ejs，加上一个arr.join语句。const data = https://www.it610.com/article/{
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 = https://www.it610.com/article/{}) => {
const html = html = ejs.replace(//gi, '${$1}');
return getHtml(html, data);
}const result = render(html, data);
console.log(result);
可以发现
ejs也是可以正常编译的。因为模板字符串支持arr.join语法，输出：
yindong
18
1--2--3--4
如果
ejs中包含forEach语句，就比较复杂了。此时render函数就无法正常解析。这里分两步来处理。仔细观察可以发现，使用变量值得方式存在
=号，而语句是没有=号的。可以对ejs字符串进行第一步处理，将/gi, '${$1}');
console.log(html);
}
${ name }
${ age }${ item }第二步比较绕一点，可以将上面的字符串处理成多个字符串拼接。简单举例，将
a加上arr.forEach的结果再加上c转换为，str存储a，再拼接arr.forEach每项结果，再拼接c。这样就可以获得正确的字符串了。// 原始字符串
retrun `
aitemc
`
// 拼接后的
let str;
str = `a`;
arr.forEach((item) => {
str += item;
});
str += c;
return str;
在第一步的结果上使用
//g正则匹配出const render = (ejs = '', data = https://www.it610.com/article/{}) => {
// 第一步
let html = ejs.replace(//gi, '${$1}');
// 第二步
html = html.replace(//g, (...props) => {
return '`\r\n' + props[1] + '\r\n str += `';
});
console.log(html);
}替换后得到的字符串长成这个样子。
${ name }
${ age }
`
arr.forEach((item) => {
str += `
${ item }
`
})
str += `
添加换行会更容易看一些。可以发现，第一部分是缺少首部\`的字符串，第二部分是用
str存储了forEach循环内容的完整js部分，并且可执行。第三部分是缺少尾部\`的字符串。// 第一部分
${ name }
${ age }
`// 第二部分
arr.forEach((item) => {
str += `
${ item }
`
})// 第三部分
str += `
处理一下将字符串补齐，在第一部分添加let str = \`，这样就是一个完整的字串了，第二部分不需要处理，会再第一部分基础上拼接上第二部分的执行结果，第三部分需要在结尾出拼接\`; return str; 也就是补齐尾部的模板字符串，并且通过
return返回str完整字符串。// 第一部分
let str = `
${ name }
${ age }
`// 第二部分
arr.forEach((item) => {
str += `
${ item }
`
})// 第三部分
str += `
`;
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 = https://www.it610.com/article/{
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 = https://www.it610.com/article/{}) => {
// 替换所有变量
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);
输出结果
yindong
1812346. 标签转义
/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, "'
");
} 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);
}/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);
}输出样式
yindong
181234<
div>
escapeHTML<
/div>
【简单实现ejs模板引擎】至此一个简单的
ejs模板解释器就写完了。推荐阅读
- 关于QueryWrapper|关于QueryWrapper,实现MybatisPlus多表关联查询方式
- MybatisPlus使用queryWrapper如何实现复杂查询
- python学习之|python学习之 实现QQ自动发送消息
- 科学养胃，别被忽悠，其实真的很简单
- 孩子不是实现父母欲望的工具——林哈夫
- opencv|opencv C++模板匹配的简单实现
- Node.js中readline模块实现终端输入
- java中如何实现重建二叉树
- 松软可口易消化，无需烤箱超简单，新手麻麻也能轻松成功~
- 人脸识别|【人脸识别系列】| 实现自动化妆