时间：2023-06-06 15:33:01 | 来源：网站运营
时间：2023-06-06 15:33:01 来源：网站运营
高效的嵌入式JavaScript模板引擎-EJS：本文首发在我的个人博客中：“E” 代表什么？可以表示 “可嵌入（Embedded）”，也可以是“高效（Effective）”、“优雅（Elegant）”或者是“简单（Easy）”。EJS 是一套简单的模板语言，帮你利用普通的 JavaScript 代码生成 HTML 页面。EJS 没有如何组织内容的教条；也没有再造一套迭代和控制流语法；有的只是普通的 JavaScript 代码而已。因为最近我使用的
在线咨询
Hexo博客框架使用到了EJS，所以如果想要实现一些自定义的功能，就需要了解一下EJS。Hexo的文章在这里：Vue驱动的静态网站生成器，叫做VuePress，特色是可以在Markdown中使用Vue组件，又可以使用Vue来开发自定义主题，考虑什么时候研究一下。npm install ejs<script src="ejs.js"></script>EJS搭建项目，所以我这里就选择直接引入。html文件样式如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>测试ejs</title></head><body><!-- ejs渲染的容器 --><div id="app"></div><!-- 引入ejs --><script src="./ejs.min.js"></script><script> /* 书写ejs */ let people = ['geddy', 'neil', 'alex'], html = ejs.render('<%= people.join(", "); %>', {people: people}); /* 将写好的ejs进行渲染 */ document.getElementById('app').innerHTML = html;</script></body></html>跟Vue、React一样，需要一个容器，好让EJS渲染到html上面。EJS，ejs.renderFile和include无法正常工作。express的后端。package.json文件，创建方法为通过CMD运行：npm init然后一路回车，就可以看到文件夹中多出了一个文件package.json。ejs和express。npm install ejs express nodemon -D然后在package.json同级目录下创建index.js。const express = require('express');const ejs = require('ejs');const app = express();/* 路由 */app.get('/', (req, res) => { let people = ['geddy', 'neil', 'alex'], html = ejs.render('<%= people.join(", "); %>', {people: people}); res.send(html);});/* 监听端口 */app.listen(8080, function () { console.log('开启服务成功！');});最后使用nodemon index.js运行。localhost:8080就可以看到渲染后的界面了。express搭建的后端环境上运行。let template = ejs.compile(str, options);template(data); // => 输出渲染后的 HTML 字符串str：需要解析的字符串模板data：数据option：配置选项/* 书写ejs */let html = ejs.compile('<%=123 %>')();/* 将写好的ejs进行渲染 */res.send(html);HTMLejs.render(str, data, options); // => 输出渲染后的 HTML 字符串str：需要解析的字符串模板data：数据option：配置选项/* 书写ejs */let people = ['geddy', 'neil', 'alex'], html = ejs.render('<%= people.join(", "); %>', {people: people});/* 将写好的ejs进行渲染 */res.send(html);HTMLejs.renderFile(filename, data, options, function(err, str){ // str => 输出渲染后的 HTML 字符串});str：需要解析的字符串模板data：数据option：配置选项let people = ['geddy', 'neil', 'alex'], html = ejs.renderFile('./test.ejs', (err, str) => { res.send(str); });options可以选择的参数如下：cache 缓存编译后的函数，需要指定 filename。filename 被 cache 参数用做键值，同时也用于 include 语句。context 函数执行时的上下文环境。compileDebug 当值为 false 时不编译调试语句。client 返回独立的编译后的函数。delimiter 放在角括号中的字符，用于标记标签的开与闭。debug 将生成的函数体输出。_with 是否使用 with() {} 结构。如果值为 false，所有局部数据将存储在 locals 对象上。localsName 如果不使用 with ，localsName 将作为存储局部变量的对象的名称。默认名称是 locals。rmWhitespace 删除所有可安全删除的空白字符，包括开始与结尾处的空格。对于所有标签来说，它提供了一个更安全版本的 -%> 标签（在一行的中间并不会剔除标签后面的换行符)。escape 为 <%= 结构设置对应的转义（escape）函数。它被用于输出结果以及在生成的客户端函数中通过 .toString() 输出。(默认转义 XML)。outputFunctionName 设置为代表函数名的字符串（例如 'echo' 或 'print'）时，将输出脚本标签之间应该输出的内容。async 当值为 true 时，EJS 将使用异步函数进行渲染。（依赖于 JS 运行环境对 async/await 是否支持）。<% ‘脚本’ 标签，用于流程控制，无输出。<%_ 删除其前面的空格符<%= 输出数据到模板（输出是转义 HTML 标签）<%- 输出非转义的数据到模板<%# 注释标签，不执行、不输出内容<%% 输出字符串 ‘<%’%> 一般结束标签-%> 删除紧随其后的换行符_%> 将结束标签后面的空格符删除include 指令将相对于模板路径中的模板片段包含进来。(需要提供 ‘filename‘ 参数。)fs所以只有在Node环境中才能生效，也就是说需要搭建一个Node后端服务器。let people = ['geddy', 'neil', 'alex'], html = ejs.render(`<%- include('test.ejs') %>`, {filename: 'test.ejs'});let ejs = require('ejs'), users = ['geddy', 'neil', 'alex'];// 单个模板文件ejs.render('<?= users.join(" | "); ?>', {users: users}, {delimiter: '?'});// => 'geddy | neil | alex'// 全局ejs.delimiter = '$';ejs.render('<$= users.join(" | "); $>', {users: users});// => 'geddy | neil | alex'lru-cache 库可以很容易地加入 LRU 缓存：let ejs = require('ejs'), LRU = require('lru-cache');ejs.cache = LRU(100); // 具有 100 条内容限制的 LRU 缓存如果要清除 EJS 缓存，调用 ejs.clearCache 即可。如果你正在使用的是 LRU 缓存并且需要设置不同的限额，则只需要将 ejs.cache 重置为 一个新的 LRU 实例即可。fs.readFileSync，如果你想要的自定义它, 设置ejs.fileLoader 即可。let ejs = require('ejs');let myFileLoader = function (filePath) { return 'myFileLoader: ' + fs.readFileSync(filePath);};ejs.fileLoader = myFileLoad;使用此功能，您可以在读取模板之前对其进行预处理。<%- include('header'); -%><h1> Title</h1><p> My page</p><%- include('footer'); -%>EJS上手还是非常简单的，但是有些高级用法就比较难了，因为EJS对于我来说不算很实用，所以就不过多的进行研究了，如果有用到，再研究也不迟。Nodejs搭建的后端中可能会用到EJS，但是前端项目一般不会使用EJS。EJS最方便的地方就是在于将项目给别人使用的时候，人家不用过多的去了解你的代码，直接修改配置文件就可以达到自己想要的效果。比如说Hexo中的配置都集中在_config.yml这个文件中，你根本不需要去一行一行的浏览源代码，就可以实现修改，达到你想要的效果。关键词：模板,引擎
