short for | : | Embedded JavaScript |
是什么 ? | : | a simple templating language that lets you generate HTML markup with plain JavaScript. |
开发语言 | : | JavaScript |
官方主页 | : | https://ejs.co |
源码仓库 | : | https://github.com/mde/ejs |
EJS
相比jade最大的特点就是对HTML的破坏非常小,前端开发人员很容易上手,对初学者非常友好; 而jade更像是另外一种语言, 对初学者有很大的成本,但是一旦学会就可以节省大量的编码时间,编码效率高。
包管理器 | 安装命令 |
---|---|
npm | npm install ejs --save |
yarn | yarn add ejs |
EJS API
提供了用于渲染EJS模板
的方法
包管理器 | 安装命令 |
---|---|
npm | npm install ejs-cli -g |
yarn | yarn global add ejs-cli |
EJS cli
是使用EJS API
开发的命令行工具。
express支持EJS
模板引擎。
EJS PlayGround是一个在线体验EJS模板的语法的网站。
在Web
开发中,模板
的作用是实现数据与视图分离, 也就是HTML结构与数据分离。
数据与试图分离有什么好处呢?
这里可以执行JavaScript
代码。
需要注意的是:<%
和%>
必须处于同一行,如果有多行JavaScript
代码,那么每一行都要有这组标记。
示例:
<% rows.forEach(function(item){ %>
<li style="width: 200px; max-height: 150px; overflow: hidden">
<a href="/discover/<%= item.id %>">
<img src="<%= item.thumbnail %>" class="img-responsive img-rounded" style="width: 100%">
</a>
<div>
<%= item.title %>
</div>
</li>
<% }) %>
include
指令后面是一个文件路径,可以是相对路径,相对于当前文件。
示例:
<% include xx.txt %>
include
指令后面还可以是绝对路径,假设有baseDir
变量传过来。
示例:
<%- include(baseDir + '/views/header.ejs') %>
原样输出。没有经过任何编码。
示例:
var restaurant = '<%- JSON.stringify(restaurant) %>';
restaurant = JSON.parse(restaurant);
经过escape
转义编码的。
示例:
<%= baseDir %>