EJS
1.1、EJS简介
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更像是另外一种语言, 对初学者有很大的成本,但是一旦学会就可以节省大量的编码时间,编码效率高。

1.2、通过包管理器安装EJS API
包管理器安装命令
npmnpm install ejs --save
yarnyarn add ejs

EJS API提供了用于渲染EJS模板的方法

1.3、通过包管理器安装EJS cli
包管理器安装命令
npmnpm install ejs-cli -g
yarnyarn global add ejs-cli

EJS cli是使用EJS API开发的命令行工具。

1.4、在express中使用ejs

express支持EJS模板引擎。

1.5、EJS PlayGround

EJS PlayGround是一个在线体验EJS模板的语法的网站。

1.6、EJS模板的语法

Web开发中,模板的作用是实现数据与视图分离, 也就是HTML结构与数据分离。

数据与试图分离有什么好处呢?

  • 后端开发人员可以专注业务的编写,而不需要关心页面结构;前端开发人员只需要专注编写页面结构即可。人人各司其职,更加专业化。
  • 后端只提供数据,而不关心数据如何展示,这样能实现大前端,前端的实现就可以多样化,有多种选择。
  • 页面的渲染既可以放在客户端,也可以放在服务端,还可以放在中间层,总之,灵活性大大增强。
1.6.1、<% js %>

这里可以执行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>
<% }) %>
1.6.2、<% include filePath %>

include指令后面是一个文件路径,可以是相对路径,相对于当前文件。

示例:

<% include xx.txt %>

include指令后面还可以是绝对路径,假设有baseDir变量传过来。

示例:

<%- include(baseDir + '/views/header.ejs') %>
1.6.3、<%- variable %>

原样输出。没有经过任何编码。

示例:

var restaurant = '<%- JSON.stringify(restaurant) %>';
restaurant = JSON.parse(restaurant);
1.6.4、<%= variable %>

经过escape转义编码的。

示例:

<%= baseDir %>