基于JavaScript写一款EJS模板引擎
目录
- 1. 起因
- 2. 基本语法实现
- 3. Function函数
- 4 with
- 5. ejs语句
- 6. 标签转义
1. 起因
部门最近的一次分享中，有人提出来要实现一个ejs模板引擎，突然发现之前似乎从来都没有考虑过这个问题，一直都是直接拿过来用的。那就动手实现一下吧。本文主要介绍ejs的简单使用，并非全部实现，其中涉及到options配置的部分直接省略了。如有不对请指出，最后欢迎点赞 + 收藏。
2. 基本语法实现
定义render函数，接收html字符串，和data参数。
const render = (ejs = '', data = {}) => {
}
事例模板字符串如下:
<body> <div><%= name %></div> <div><%= age %></div> </body>
可以使用正则将<%= name %>匹配出来，只保留name。这里借助ES6的模板字符串。将name用${}包裹起来。
props中第2个值就是匹配到的变量。直接props[1]替换。
[ '<%= name %>', ' name ', 16, '<body>\n <div><%= name %></div>\n <div><%= age %></div>\n</body>' ]
const render = (ejs = '', data = {}) => {
const html = ejs.replace(/<%=(.*?)%>/g, (...props) => {
return '${' + props[1] + '}';
// return data[props[1].trim()];
});
}
3. Function函数
这里得到的html是一个模板字符串。可以通过Function将字符串编程可执行的函数。当然这里也可以使用eval，随你。
<body>
<div>${ name }</div>
<div>${ age }</div>
</body>
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 = {}) => {
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 = {
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 = {}) => {
// 优化一下代码，直接用$1替代props[1];
// const html = ejs.replace(/<%=(.*?)%>/g, (...props) => {
// return '${' + props[1] + '}';
// });
const html = ejs.replace(/<%=(.*?)%>/gi, '${$1}');
return getHtml(html, data);
}
这样就可以打印出真是的html了。
<body> <div>yindong</div> <div>18</div> </body>
5. ejs语句
这里扩展一下ejs，加上一个arr.join语句。
<body>
<div><%= name %></div>
<div><%= age %></div>
<div><%= arr.join('--') %></div>
</body>
const data = {
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 = {}) => {
const html = html = ejs.replace(/<%=(.*?)%>/gi, '${$1}');
return getHtml(html, data);
}
const result = render(html, data);
console.log(result);
可以发现ejs也是可以正常编译的。因为模板字符串支持arr.join语法，输出：
<body> <div>yindong</div> <div>18</div> <div>1--2--3--4</div> </body>
如果ejs中包含forEach语句，就比较复杂了。此时render函数就无法正常解析。
<body>
<div><%= name %></div>
<div><%= age %></div>
<% arr.forEach((item) => {%>
<div><%= item %></div>
<%})%>
</body>
这里分两步来处理。仔细观察可以发现，使用变量值得方式存在=号，而语句是没有=号的。可以对ejs字符串进行第一步处理，将<%=变量替换成对应的变量，也就是原本的render函数代码不变。
const render = (ejs = '', data = {}) => {
const html = ejs.replace(/<%=(.*?)%>/gi, '${$1}');
console.log(html);
}
<body>
<div>${ name }</div>
<div>${ age }</div>
<% arr.forEach((item) => {%>
<div>${ item }</div>
<%})%>
</body>
第二步比较绕一点，可以将上面的字符串处理成多个字符串拼接。简单举例，将a加上arr.forEach的结果再加上c转换为，str存储a，再拼接arr.forEach每项结果，再拼接c。这样就可以获得正确的字符串了。
// 原始字符串
retrun `
a
<% arr.forEach((item) => {%>
item
<%})%>
c
`
// 拼接后的
let str;
str = `a`;
arr.forEach((item) => {
str += item;
});
str += c;
return str;
在第一步的结果上使用/<%(.*?)%>/g正则匹配出<%%>中间的内容，也就是第二步。
const render = (ejs = '', data = {}) => {
// 第一步
let html = ejs.replace(/<%=(.*?)%>/gi, '${$1}');
// 第二步
html = html.replace(/<%(.*?)%>/g, (...props) => {
return '`\r\n' + props[1] + '\r\n str += `';
});
console.log(html);
}
替换后得到的字符串长成这个样子。
<body>
<div>${ name }</div>
<div>${ age }</div>
`
arr.forEach((item) => {
str += `
<div>${ item }</div>
`
})
str += `
</body>
添加换行会更容易看一些。可以发现，第一部分是缺少首部`的字符串，第二部分是用str存储了forEach循环内容的完整js部分，并且可执行。第三部分是缺少尾部`的字符串。
<body>
<div>${ name }</div>
<div>${ age }</div>
`
// 第二部分
arr.forEach((item) => {
str += `
<div>${ item }</div>
`
})
// 第三部分
str += `
</body>
处理一下将字符串补齐，在第一部分添加let str = `，这样就是一个完整的字串了，第二部分不需要处理，会再第一部分基础上拼接上第二部分的执行结果，第三部分需要在结尾出拼接`; return str; 也就是补齐尾部的模板字符串，并且通过return返回str完整字符串。
// 第一部分
let str = `<body>
<div>${ name }</div>
<div>${ age }</div>
`
// 第二部分
arr.forEach((item) => {
str += `
<div>${ item }</div>
`
})
// 第三部分
str += `
</body>
`;
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 = {
name: "yindong",
age: 18,
arr: [1, 2, 3, 4],
html: '<div>html</div>',
escape: '<div>escape</div>'
}
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 = {}) => {
// 替换所有变量
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);
输出结果:
<body>
<div>yindong</div>
<div>18</div><div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</body>
6. 标签转义
<%=会对传入的html进行转义，这里编写一个escapeHTML转义函数。
const escapeHTML = (str) => {
if (typeof str === 'string') {
return str.replace(/&/g, "&").replace(/</g, "<").replace(/>/g, ">").replace(/ /g, " ").replace(/"/g, """).replace(/'/g, "'");
} else {
return str;
}
}
变量替换的时候使用escapeHTML函数处理变量。这里通过\s*去掉空格。为了避免命名冲突，这里将escapeHTML改造成自执行函数，函数参数为$1变量名。
const render = (ejs = '', data = {}) => {
// 替换转移变量
// let html = ejs.replace(/<%=\s*(.*?)\s*%>/gi, '${escapeHTML($1)}');
let html = ejs.replace(/<%=\s*(.*?)\s*%>/gi, `\${
((str) => {
if (typeof str === 'string') {
return str.replace(/&/g, "&").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);
}
<%-会保留原本格式输出，只需要再加一条不使用escapeHTML函数处理的就可以了。
const render = (ejs = '', data = {}) => {
// 替换转义变量
let html = ejs.replace(/<%=\s*(.*?)\s*%>/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);
}
输出样式:
<body>
<div>yindong</div>
<div>18</div><div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div><div>escapeHTML</div></div>
</body>
至此一个简单的ejs模板解释器就写完了。
到此这篇关于基于JavaScript写一款EJS模板引擎的文章就介绍到这了,更多相关写一款EJS模板引擎内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！
相关推荐
-
详解在express站点中使用ejs模板引擎
使用 vs创建的express站点,默认使用的是jade模板引擎,但是我不太喜欢这种方式,因为我觉得html本身的语义特性是我喜欢的,另外html本身也足够简洁,使用html自身做为模板语言更符合我的喜好,所以我选择ejs. 1.安装 在网站根目录启动控制台,输入 npm install ejs 程序包会安装到node_modules目录下. 2 修改APP.JS 修改app.js 将view engine修改为ejs.(并将模板的后缀修改为.html) app.set('views',path
-
node.js 使用ejs模板引擎时后缀换成.html
这是一个小技巧,看着.ejs的后缀总觉得不爽,使用如下方法,可以将模板文件的后缀换成我们习惯的.html. 1.在app.js的头上定义ejs: 复制代码 代码如下: var ejs = require('ejs'); 2.注册html模板引擎: 复制代码 代码如下: app.engine('html',ejs.__express); 3.将模板引擎换成html: 复制代码 代码如下: app.set('view engine', 'html'); 4.修改模板文件的后缀为.html. 好了,任
-
详解nodejs模板引擎制作
关于模板,我倒是用过了不少.最开始要数Java的JSP了,然后接触了PHP的smarty,再就是Python的jinja2, Django内置模板,现在刚开始看Nodejs,也发现了不少类似的模板引擎,ejs, jade等等吧. 模板带来的最直接的好处就是加速开发,前后端分离.除此之外,对于字符串的格式化同样是个比较好的应用.习惯了python中 string = "hello {}".format("郭璞") # hello 郭璞 string = "h
-
基于JavaScript写一款EJS模板引擎
目录 1. 起因 2. 基本语法实现 3. Function函数 4 with 5. ejs语句 6. 标签转义 1. 起因 部门最近的一次分享中,有人提出来要实现一个ejs模板引擎,突然发现之前似乎从来都没有考虑过这个问题,一直都是直接拿过来用的.那就动手实现一下吧.本文主要介绍ejs的简单使用,并非全部实现,其中涉及到options配置的部分直接省略了.如有不对请指出,最后欢迎点赞 + 收藏. 2. 基本语法实现 定义render函数,接收html字符串,和data参数. const ren
-
基于JavaScript打造一款桌面级便签系统
先看下效果: 载体就是一个网页,用html,css和JavaScript实现一个简单的便签系统. 动画效果用的是animation.css库,缓存用的localStorage. 除非手动清空便签,否则便签会一直保留,非常方便. 鼠标右键可以点开菜单. 代码: <!doctype html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset
-
Node.js的路由、EJS模板引擎、GET和POST请求讲解
1.路由 官方解释: 路由(Routing)是由一个 URI(或者叫路径)和一个特定的 HTTP 方法(GET.POST 等)组成的,涉及到应用如何响应客户端对某个网站节点的访问. 非官方解释 : 路由指的就是针对不同请求的 URL,处理不同的业务逻辑. Get 请求路由示例图 2.初识 EJS 模块引擎 我们学的 EJS 是后台模板,可以把我们数据库和文件读取的数据显示到 Html页面上面.它是一个第三方模块,需要通过 npm 安装 https://www.npmjs.com/package/
-
Node.js的Web模板引擎ejs的入门使用教程
Node 开源模板的选择很多,但推荐像我这样的老人去用 EJS,有 Classic ASP/PHP/JSP 的经验用起 EJS 来的确可以很自然,也就是说,你能够在 <%...%> 块中安排 JavaScript 代码,利用最传统的方式 <%=输出变量%>(另外 <%-输出变量是不会对 & 等符号进行转义的).安装 EJS 命令如下: npm install ejs JS 调用 JS 调用的方法主要有两个: ejs.compile(str, options); //
-
JavaScript模板引擎Template.js使用详解
template.js 一款 JavaScript 模板引擎,简单,好用.提供一套模板语法,用户可以写一个模板区块,每次根据传入的数据,生成对应数据产生的HTML片段,渲染不同的效果.https://github.com/aui/artTemplate 1.特性 (1).性能卓越,执行速度通常是 Mustache 与 tmpl 的 20 多倍(性能测试)(2).支持运行时调试,可精确定位异常模板所在语句(演示) (3).对 NodeJS Express 友好支持(4).安全,默认对输出进行转义.
-
常用的JavaScript模板引擎介绍
最近工作内容慢慢接近我的理想化(web前端),所以关注比较多的是前端性能!后台同事介绍使用ajax模板引擎,提高渲染速度! 下面介绍几款 JavaScript 模板引擎 1. Mustache 基于javascript 实现的模板引擎,类似于 Microsoft's jQuery template plugin,但更简单易用! 2. doT.js doT.js 包含为浏览器和Node.js 准备的 JavaScript 模板引擎. 3. jSmart jSmart 是著名的 PHP 模板引擎 S
-
基于Node.js模板引擎教程-jade速学与实战1
环境准备: 全局安装jade: npm install jade -g 初始化项目package.json: npm init --yes 安装完成之后,可以使用 jade --help 查看jade的命令行用法 一.在项目目录下新建index.jade文件 inde.jade代码: doctype html html head meta(charset='utf-8') title body h3 欢迎学习jade 1,标签按照html的缩进格式写 2,标签的属性可以采用圆括号 3,如果标签有
-
laytpl 精致巧妙的JavaScript模板引擎
laytpl是一款颠覆性的JavaScript模板引擎,它用巧妙的实现方式,将自身的体积变得小巧玲珑,不仅性能接近极致,并且还具备传统前端引擎的几乎所有功能.所有的变身魔法都由不到1KB的代码创造,这仿佛是一场革命,又或者不是,但毋庸置疑的是,laytpl的确在用最轻量的方式呈现给世人.如果你从未接触这方面的应用,没关系,下面的讲述将会让你迫不及待地选择laytpl,从此更好地把握页面的数据渲染,走上人生巅峰! laytpl优势 •性能卓绝,执行速度比号称性能王的artTemplate.doT还