实现一个简易版的ejs
2019-10-24 本文已影响0人
成熟稳重的李先生
ejs是一个模板引擎，可能对于很多人来说，好像都没有用到。但像vue中的插值表达式，就是基于ejs这样的模板引擎来实现的。包括现在较为火热的ssr(服务端渲染)，服务端通过模板引擎，直接将数据结合模板渲染成html返回给前端。那么接下来我们就来实现一个ejs
前置知识-- ejs官方文档
// 1.html 这是模板
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<%arr.forEach(a => {%>
<li><%=a%></li>
<%})%>
</body>
</html>
/*
* ejs的使用方法是将模板和数据传入，然后生成html文件
*/
// test.js
let fs = require("fs");
let path = require("path");
let ejs = require("ejs");
let tempStr = fs.readFileSync(path.resolve(__dirname,"1.html")); //拿到上边的模板
let obj = { arr: [1, 2, 3, 4, 5, 6] }; // 这是需要的数据
console.log(ejs.render(tempStr, obj)); // 使用方式
1571846072399.png
可以看到，ejs将二者糅合，生成了我们需要的结果。那么接下来，我们来自己完成一个简易的ejs
// \r\n是回车换行
function render(str, obj){ // 传入模板和数据
let head = "let str;\r\nwith(data){\r\n" //核心就是字符串拼接，这里用with是为了限制作用域
head += "str = `";
str = str.replace(/<%=([\s\S]*?)%>/g, (...[,$1]) => { //先将取值的js操作转化
return "${"+$1+"}"; // 这里替换成${param}的形式是为了使用es6的模板字符串
})
let body = str.replace(/<%([\s\S]*?)%>/g, (...[,$1]) => {
return "`\r\n" + $1 + "\r\nstr+=`"
})
let tail = "`\r\n}\r\nreturn str;"
let fn = new Function("data", head+body+tail);
return fn(obj);
}
done！
