EJS的个人总结

什么是模板引擎?

用于Web开发的模板引擎是为了使用用户界面与业务数据(内容)分离而产生的,使用模板语法编写的模板代码通常放在具有特的格式的文档中,经过模板引擎编译之后就会生成一个标准的HTML文档。

目前市面上比较流行的模板引擎有以下几种:

EJS -- 国内站点:https://ejs.bootcss.com/,官方站点:http://ejs.co

Pug -- 官方站点:https://pugjs.org/

Mustache -- 官方站点:http://mustache.github.io/

jade -- 官方站点:http://jade-lang.com/

为什么要学习EJS?

EJS是一套简单的模板语言,帮我们利用普通的JavaScript代码生成HTML页面。EJS没有复杂的语法规则,也没有再造一套迭代和控制语法,有的只是普通的JavaScript代码而已。

在浏览器环境中使用

下载浏览器版本的EJS,然后是如HTML页面即可。

下载地址:https://github.com/mde/ejs/releases/latest

在Node环境中使用

使用npm将EJS安装到当前项目中

npm install ejs --save-prod

将使用的EJS模板语法写模板带和一些要展示到页面的数据作为参数传递给EJS提供的编译方法,最后输出HTML。

const ejs = require('ejs');

// 要展示到页面中数据

const colors = ['red', 'green', 'blue'];

// 使用 EJS 语法编写的模板

const template = `

    <% colors.forEach((value, index) => { %>

  • <%= value %>
  • <% }) %>

`

// HTML代码 = EJS模板 + 数据

const html = ejs.render(template, {colors});

EJS模板标签

<% 脚本标签,用于书写流程控制语句(条件语句,循环语句),不输出任何内容。不能嵌套 HTML 代码,如需嵌套 HTML 代码,需要把流程控制语句断开

const ejs = require('ejs');

// 要展示到页面中数据

const colors = ['red', 'green', 'blue'];

// 使用 EJS 语法编写的模板

const template = `

    <% colors.forEach((value, index) => { %>

  • <%= value %>
  • <% }) %>

`

// <% %> 标签用于书写流程控制语句(条件语句,循环语句),不能嵌套 HTML 代码,如需嵌套 HTML 代码,需要把流程控制语句断开,如上所示:

const html = ejs.render(template, {colors});

console.log(html)

<%= 将数据输出到模板(如果输出的数据是HTML,则会被转义)

const ejs = require('ejs');

// 要展示到页面中数据

const value1 = 'Hello EJS';

const value2 = 'Hello EJS';

// value2 的值在编译后会被转义成如下形式:

//

<a href="">Hello EJS</a>

// 使用 EJS 语法编写的模板

const template = `

<%= value %>

`;

// HTML代码 = EJS模板 + 数据

const html = ejs.render(template, {value: value2});

console.log(html)

<%- 将数据输出到模板(数据不会被转义)

const ejs = require('ejs');

// 要展示到页面中数据

const value1 = 'Hello EJS';

const value2 = 'Hello EJS';

// value2 的值在编译时不会被转义:

//

Hello EJS

// 使用 EJS 语法编写的模板

const template = `

<%- value %>

`;

// HTML代码 = EJS模板 + 数据

const html = ejs.render(template, {value: value2});

console.log(html)

<%# EJS模板提供的注释方式,不会被作为模板内容编译输出

const ejs = require('ejs');

// 要展示到页面中数据

const colors = ['red', 'green', 'blue'];

// 使用 EJS 语法编写的模板

const template = `

<%# EJS 模板提供的注释方法,不会被作为模板内容编译输出 %>

    <% colors.forEach((value, index) => { %>

  • <%= value %>
  • <% }) %>

`

const html = ejs.render(template, {colors});

console.log(html)

JS 代码执行之后会留下一些不必要的空格和换行

<%_ 可以帮我们删除代码前面多余的空白

_%> 可以帮我们删除代码后面多余的空白

const ejs = require('ejs');

// 要展示到页面中数据

const greeting = 'Hello EJS';

// 使用 EJS 语法编写的模板

const template = `

Beginning <%_ var greeting = 'Hello' + 'World' %>ending

Beginning<% var greeting = 'Hello' + 'World' %> ending

Beginning <%_ var greeting = 'Hello' + 'World' _%> ending

`

// JS 代码执行之后会留下一些不必要的空格和换行

// <%_ 可以帮我们删除代码前面多余的空白

// _%> 可以帮我们删除代码后面多余的空白

const html = ejs.render(template, {greeting});

console.log(html)