ejs学习

最新推荐文章于 2025-09-08 22:40:31 发布

转载最新推荐文章于 2025-09-08 22:40:31 发布 · 77 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://juejin.im/post/5a824525f265da4e9a495c0a

文章标签：

#json #javascript #ViewUI

本文介绍EJS模板库的基本用法，包括安装、渲染过程及常见配置选项等，适合初学者快速掌握如何从JSON数据生成HTML字符串。

EJS是一个JavaScript模板库，用来从JSON数据中生成HTML字符串。

安装

 $ npm install ejs复制代码

基本用法

 //template.ejs:<% if(comic) { %>    <h2><%=comic.name%></h2><% } %>//test.js:var comic = {name: 'one  piece'};// 渲染文件模板,// comic.ejs 包含 header.ejs footer.ejs, // 若include了文件 必须指定 filename参数 , 参数为文件路径，// 文件所在目录为查找include资源的目录  path.diranme(specialFilepath) var html = ejs.render( fs.readFileSync('comic.ejs', 'utf8'), {'comic': comic}, {filename: __dirname+'\\abc.js'});console.log(html);复制代码

方法

ejs.compile() ejs.render()

 var template = ejs.compile(str, options); //=> functiontemplate(data); //=> htmlejs.render(str, data, options); //=>html//or 把str data options都放在一个object中传入ejs.render(allOptions);复制代码

options参数
cache 缓存编译后的函数(ejs.compile(..) ,需要 filename参数作为缓存的keyfilename 用于缓存的key，和includecontext 函数的执行上下文compileDebug 输出compile的信息来跟踪调试client 返回编译后的函数delimiter <% .. %> 指这里的%debug 输出ejs.compile()得到函数的函数体strict ejs.compile()返回的函数是否执行在严格模式_with 是否使用 with(){..} 来访问本地变量localsName 保存本地变量的对象名，默认为localsrmWhitespace 移除多余空格

include(文件包含)被包含文件的路径可以是：绝对路径或相对路径,还可以传入data

 <ul>    <% users.forEach(function(user){ %>        <%- include('user/show', {user: user}) %>    <%});%></ul>复制代码

include是在运行时被执行的，所以可以支持路径为变量, 如：

     <% somePath='some/path' %>    ...    <%- include(somePath) %>复制代码

自定义模板定界符

 var ejs = require('ejs');var users = ['lufy', 'zoro', 'nami'];//渲染字符串模板时，指定分隔符//<%= ... %> 输出变量 输出表达式的结果var ret1 = ejs.render('<?=users.join(" | "); ?> ', {users: users}, {delimiter: '?'});console.log(ret1);  //=>lufy | zoro | nami// 全局指定分隔符ejs.delimiter = '$';var ret2 = ejs.render('<$= users.join(" | "); $>', {users: users});console.log(ret2);复制代码

页面布局ejs没有显式的支持布局功能，但是可以通过 include 页头页脚的方式，实现基本的布局。

 //comic.ejs:<%- include('header'); %><h1>hot comic now: </h1><% if(comic) { %>    <h2><%= comic.name %></h2><% } %><%- include('footer')  %>//test.js:var html = ejs.render( fs.readFileSync('comic.ejs', 'utf8'), {'comic': comic}, {filename: __dirname+'\\abc.js'});复制代码