EJS快速回忆

平时只写前端代码，很少去写ejs这种模板语言，可能隔几个月接触一下全栈项目，EJS的语法又忘了大半，索性自己写一篇博客记录一下，省得老是花时间回顾。

目的

EJS的目的就是让我们最舒服的方式去写模板，也就是遵循写html的方式去写就行了，但是里面会有一些逻辑操作，变量等等没办法用html的方式来写，所以EJS就是帮我们处理了一些类似的问题。

使用

安装

$ npm install ejs

引入

var ejs = require('ejs')

//ES6写法
import ejs        from 'ejs';

使用

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

我们的最终目的就是得到一段插入数据之后的html，ejs就是没有放入数据的模板页面。

速查

基础实例

<% if (user) { %>
  <h2><%= user.name %></h2>
<% } %>

渲染函数

var template = ejs.compile(str, options);
template(data);
// => 输出绘制后的 HTML 字符串

ejs.render(str, data, options);
// => 输出绘制后的 HTML 字符串

ejs.renderFile(filename, data, options, function(err, str){
    // str => 输出绘制后的 HTML 字符串
});

其实完成的事是一样的，compile返回一个渲染函数，render直接返回html字符串，renderFile则是通过读取文件渲染模板。
当然这里面的options有多种配置：

cache 缓存编译后的函数，需要提供 filename
filename 被 cache 参数用做键值，同时也用于 include 语句
context 函数执行时的上下文环境
compileDebug 当为 false 时不编译调试语句
client 返回独立的编译后的函数
delimiter 放在角括号中的字符，用于标记标签的开与闭
debug 将生成的函数体输出
_with 是否使用 with() {} 结构。如果为 false，所有局部数据将存储在 locals 对象上。
localsName 如果不使用 with ，localsName 将作为存储局部变量的对象的名称。默认名称是 locals
rmWhitespace 删除所有可安全删除的空白字符，包括开始与结尾处的空格。对于所有标签来说，它提供了一个更安全版本的 -%> (在一行的中间并不会剔除标签后面的换行符)。
escape 为 <%= 结构设置对应的转义（escape）函数。它被用于输出结果以及在生成的客户端函数中通过 .toString() 输出。(默认转义 XML)。

模板中引入模板(include)

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

本文大部分内容来自官方文档。

目的

使用

安装

引入

使用

速查

基础实例

标签

渲染函数

模板中引入模板(include)

猜你喜欢