ejs
Posted 开心的小程序员
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了ejs相关的知识，希望对你有一定的参考价值。
服务端ssr渲染，原理是模版引擎+渲染数据，处理完成后返回给客户端。
node中有个第三方库ejs，可以处理模版引擎的渲染。
模版引擎：
<!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渲染：
let ejs = require(‘ejs‘); let fs = require(‘fs‘); let path = require(‘path‘); let data = {arr: [1,2,3]}; // 编码格式必须有 let templateStr = fs.readFileSync(path.resolve(__dirname, ‘./index.html‘), ‘utf-8‘); let str = ejs.render(templateStr,data); console.log(str);
模拟ejs.render方法：
let ejs = require(‘ejs‘); let fs = require(‘fs‘); let path = require(‘path‘); let data = {arr: [1,2,3]}; // 编码格式必须有 let templateStr = fs.readFileSync(path.resolve(__dirname, ‘./index.html‘), ‘utf-8‘); // let str = ejs.render(templateStr,data); // 模拟实现ejs的render方法 function render(str, data) { str = str.replace(/<%=([sS]*?)%>/g, function() { return ‘${‘ + arguments[1] + ‘}‘; }) // 拼接成一个使用with传递数据的模版字符串 let head = ‘let str; with(obj){str=`‘; // 使用非贪婪匹配 let content = str.replace(/<%([sS]*?)%>/g, (match, group) => { // 拼接字符串时注意;的添加 return ‘`;‘ + group + ‘;str+=`‘; }); let tail = ‘`}; return str;‘; console.log(head + content + tail); // obj为形参 let fn = new Function(‘obj‘, head + content + tail); return fn(data); } let str = render(templateStr, data); console.log(str);
以上是关于ejs的主要内容，如果未能解决你的问题，请参考以下文章