文章详情

登录

短信预约-IT技能 免费直播动态提醒

选择考试省份

  • 北京
  • 上海
  • 天津
  • 重庆
  • 河北
  • 山东
  • 辽宁
  • 黑龙江
  • 吉林
  • 甘肃
  • 青海
  • 河南
  • 江苏
  • 湖北
  • 湖南
  • 江西
  • 浙江
  • 广东
  • 云南
  • 福建
  • 海南
  • 山西
  • 四川
  • 陕西
  • 贵州
  • 安徽
  • 广西
  • 内蒙
  • 西藏
  • 新疆
  • 宁夏
  • 兵团

请输入下面的图形验证码

提交验证

短信预约提醒成功

基于JavaScript写一款EJS模板引擎

2024-04-02 19:55

关注

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, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/ /g, "&nbsp;").replace(/"/g, "&#34;").replace(/'/g, "&#39;");
    } 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, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/ /g, "&nbsp;").replace(/"/g, "&#34;").replace(/'/g, "&#39;");
            } 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>&lt;div&gt;escapeHTML&lt;/div&gt;</div>
</body>

至此一个简单的ejs模板解释器就写完了。

到此这篇关于基于JavaScript写一款EJS模板引擎的文章就介绍到这了,更多相关写一款EJS模板引擎内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网！

阅读原文内容投诉

免责声明：

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题

  • 2024年上半年信息系统项目管理师第二批次真题及答案解析（完整版）

    难度     807人已做
    查看

  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     351人已做
    查看

  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     314人已做
    查看

  • 2024年上半年软考高项第一、二批次真题考点汇总（完整版）

    难度     433人已做
    查看

  • 2024年上半年系统架构设计师考试综合知识真题

    难度     221人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机

基于JavaScript写一款EJS模板引擎

前端开发2024-04-02

怎么用JavaScript写一款EJS模板引擎

前端开发2023-06-29

javascript中怎么实现一个基于DOM的模板引擎

前端开发2024-04-02

怎么用javascript写一个页面模板引擎

前端开发2024-04-02

如何基于SSM集成Freemarker模板引擎

前端开发2023-06-28

基于SSM 集成 Freemarker模板引擎的方法

前端开发2024-04-02

怎么用JavaScript实现一个模板引擎

前端开发2024-04-02

基于Node.js模板引擎jade的示例分析

前端开发2024-04-02

SpringBoot+Thymeleaf基于HTML5现代模板引擎的示例分析

前端开发2023-05-31

基于Node.js模板引擎教程-jade速学与实战1

前端开发2022-06-04

一个基于flask的web应用诞生 使用模板引擎和表单插件（2）

前端开发2022-06-04
位置：首页-资讯-前端开发
咦！没有更多了？去看看其它编程学习网 内容吧
首页课程
资料下载问答资讯