模板引擎的实现原理(前端模板引擎有哪些)
日常的学习笔记,包括 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