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

　　

<script src="ejs.js"></script>
<script>
  var people = ['geddy', 'neil', 'alex'],
      html = ejs.render('<%= people.join(", "); %>', {people: people});
</script>

在Node环境中使用

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

npm install ejs --save-prod

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

const ejs = require('ejs');

// 要展示到页面中数据
const colors = ['red', 'green', 'blue'];

// 使用 EJS 语法编写的模板
const template = `
    <ul>

        <% colors.forEach((value, index) => { %>
            <li><%= value %></li>
        <% }) %>
    </ul>
`

// HTML代码 = EJS模板 + 数据
const html = ejs.render(template, {colors});

EJS模板标签

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

const ejs = require('ejs');
// 要展示到页面中数据
const colors = ['red', 'green', 'blue'];
// 使用 EJS 语法编写的模板
const template = `
    <ul>
        <% colors.forEach((value, index) => { %>
            <li><%= value %></li>
        <% }) %>
    </ul>
`
// <% %> 标签用于书写流程控制语句（条件语句，循环语句），不能嵌套 HTML 代码，如需嵌套 HTML 代码，需要把流程控制语句断开，如上所示：
const html = ejs.render(template, {colors});
console.log(html)

• <%= 将数据输出到模板（如果输出的数据是HTML，则会被转义）

const ejs = require('ejs');
// 要展示到页面中数据
const value1 = 'Hello EJS';
const value2 = '<a href="">Hello EJS</a>';
// value2 的值在编译后会被转义成如下形式：
// <h1>&lt;a href=""&gt;Hello EJS&lt;/a&gt;</h1>
// 使用 EJS 语法编写的模板
const template = `<h1><%= value %></h1>`;
// HTML代码 = EJS模板 + 数据
const html = ejs.render(template, {value: value2});
console.log(html)

• <%- 将数据输出到模板（数据不会被转义）

const ejs = require('ejs');
// 要展示到页面中数据
const value1 = 'Hello EJS';
const value2 = '<a href="">Hello EJS</a>';
// value2 的值在编译时不会被转义：
// <h1><a href="">Hello EJS</a></h1>
// 使用 EJS 语法编写的模板
const template = `<h1><%- value %></h1>`;
// 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 模板中的 HTML 注释，会被作为模板内容编译输出 -->
    <%# EJS 模板提供的注释方法，不会被作为模板内容编译输出 %>
    <ul>
        <% colors.forEach((value, index) => { %>
            <li><%= value %></li>
        <% }) %>
    </ul>
`
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)