模板引擎的实现原理(前端模板引擎有哪些)
日常的学习笔记，包括 ES6、Promise、Node.js、Webpack、http 原理、Vue全家桶，后续可能还会继续更新 Typescript、Vue3 和 常见的面试题 等等。
模板引擎
首先我们要先清楚，什么是 模板引擎 ？
模板引擎的诞生是为了将显示与数据分离。
模板技术多种多样，但其本质是将模板文件和数据通过模板引擎生成最终的HTML代码。
这里我们以最常见的模板引擎 EJS 举例说明。
EJS的使用
本篇文章我们不讲使用，主要是为了手写实现 EJS 的原理。
参考官网 EJS|嵌入式JavaScript模板引擎
首先我们先对EJS进行安装。
// 利用 NPM 安装 $ npm install ejs 复制代码
在目录中，我们可以创建一个 template.html 的html文件。
<body> <%=name%> <%=age%> </body> 复制代码
添加两个标签用来做渲染。
再创建一个 ejs.js 的文件。
const ejs = require('ejs'); // 导入ejs (async function () { let r = await ejs.renderFile('./template.html',{name:'momo',age:26}) // 使用renderFile进行渲染 console.log(r); // 打印出结果 })(); 复制代码打印后发现，name 和 age 已经被渲染在了视图*（字符串）*上。
通过上述的打印结果，我们便可以尝试手写实现 ejs类。
EJS的实现原理
首先，先根据需要的参数内容，实现一个类*（函数）*，里面包含一个 readerFile 方法
let ejs = { readerFile(filename,options){} } 复制代码我们先来实现一套简单的 renderFile 方法。
简单实现
先做一套最简单的实现，熟悉一下原理和逻辑。
来看一下完整代码。
const fs = require("fs"); const util = require("util"); const read = util.promisify(fs.readFile); let ejs = { async renderFile(filename, options) { let content = await read(filename, "utf-8"); content = content.replace(/<%=(.+?)%>/g, function () { return options[arguments[1]]; }); return content; }, }; 复制代码因为 readerFile 需要对文件进行读写，所以我们还需要封装一个可以进行读写的 read 方法。
根据我之前文章中的写法，我们可以利用 promisify 对读写方法进行封装。
const fs = require('fs'); const util = require('util'); const read = util.promisify(fs.readFile); 复制代码这样我们就得到了一个可以进行异步读写的 read 函数。
随后我们将 read 函数放到我们上面的 readerFile 方法中，我们现在就得到了一个可以读取html模板的方法。
let ejs = { async renderFile(filename, options) { let content = await read(filename,'utf-8') console.log(content); // 可以直接打印出html文件模板 } }; 复制代码随后我们就可以对方法进行进一步处理了。
下一步我们就需要对 <%= ... %> 进行替换处理了。
参考文献 正则表达式 | 菜鸟教程
使用 正则表达式 对匹配的内容进行替换处理即可。
let ejs = { async renderFile(filename, options) { let content = await read(filename,'utf-8') // 正则匹配内容，替换并输出结果 content = content.replace(/<%=(.+?)%>/g, function () { return options[arguments[1]] }) return content; } }; 复制代码这样我们就实现了一套最简单的 ejs.renderFile 方法。
伪原创工具 SEO网站优化 https://www.237it.com/
作者：渔翁莫小尚
链接：https://juejin.cn/post/7036019275231920158