1. 什么是extended-ejs
extended-ejs是一个npm包，它是ejs的一个拓展，是一个使用更为方便的ejs模板引擎。它提供了模板继承、模板局部、模板钩子的功能，让我们可以更加方便快捷地管理模板。
2. 安装与使用
2.1 安装
使用npm进行安装：
npm install extended-ejs
2.2 使用
在Node.js环境下，我们可以使用以下代码使用extended-ejs：
const ejs = require('extended-ejs');
然后，我们就可以在项目中使用extended-ejs了。
2.3 基本语法
extended-ejs的基本语法与旧版ejs的语法基本相同。它可以使用以下变量：
| 变量 | 描述 |
|---|---|
<% %> |
指令标识 |
<%= %> |
输出变量 |
extended-ejs也支持以下的新语法：
| 变量 | 描述 |
|---|---|
<%- %> |
HTML转义输出 |
<%# %> |
注释标识 |
<% include partials/head %> |
局部引入 |
<%%extends base/layout.ejs%%> |
继承模板 |
2.4 实例
一个简单示例，我们用一个头部和一个底部，引入两个partials，未来我们可以串连请求，进行模板的重用：
-- -------------------- ---- ------- --------- ----- ----- ---------- ------ ----- ---------------- ---------- ----- ---------- -- ------- ------------- -- ------- ------ -------- ----- ---- ------ -------------------- ------ -------------------- ------ ---------------------- ----- ------ --------- ------ ------- ----- ------- ------ ------- ------ ------- -------- ---- ----------------- ------------------ --------------- -- ------- --------------- -- --------- ------- -------展开代码
当我们用该模板进行数据渲染时，可以使用以下数据：
const ejs = require('extended-ejs'); const ejsPage = require('./page.ejs'); const data = { title: 'Hello, world!', content: 'This is a paragraph of content.' } console.log(ejs.render(ejsPage, data));
当然，在这个例子中，我们没有用到extended-ejs的新特性。下面我们就来了解一下extended-ejs的模板继承、模板局部、模板钩子。
3. extended-ejs的新特性
3.1 模板继承
模板继承，是将一种模板的属性、样式、脚本等内容继承到其他模板中使用的过程。这一特性可以让我们不用重复更改相同的代码，也可以让我们创建一个基本布局，从而快速地制作出新的模板页面。
模板继承有两个基本的关键字：<%%extends%%>和<%%block%%>。
<%%extends%%>是用来继承模板的，可以用来继承需要的模板文件。<%%block%%>则是用来为继承下来的模板留出空白区域，可以在子模板里替换掉block区域的内容。
以下是继承模板的例子：
layout.ejs
-- -------------------- ---- ------- --------- ----- ----- ---------- ------ ----- ---------------- ---------- ----- ---------- ------- ------ --- ---- -- ------- -------展开代码
index.ejs
<%%extends base/layout.ejs%%> <% block content %> <h1><%= title %></h1> <p>This is some content!</p> <% endblock %>
如上示例中，index.ejs继承了layout.ejs，将title和body作为替换项，插入到layout.ejs中。其中，<%%extends%%>为关键字，紧跟着所要继承的模板名。
接下来，我们可以将这个模板渲染，输出到页面中：
const ejs = require('extended-ejs'); const ejsPage = require('./index.ejs'); const data = { title: 'Hello, world!', content: 'This is a paragraph of content.' } console.log(ejs.render(ejsPage, data));
3.2 模板局部
在一个页面有多个部分时，如果每个部分都是固定、重复的，那么我们显然要进行大量的重复工作。这时，我们就可以使用模板局部。模板局部可以将一个模板引入另一个模板中，从而降低模板的重复度，并且方便对模板进行管理。
我们可以使用以下标记来引入模板局部：
<% include partials/head %>
以上标记中，partials是模块根目录下的一个包含模板局部的文件夹，head是模板局部中的一个文件。
使用模板局部，可以使我们快速在不同的模板中添加重复内容。
3.3 模板钩子
模板钩子是一个能够在渲染过程中进行调用的函数。这个函数可以决定渲染器是否比这个模块提前退出，或者挂钩到渲染过程中的特定元素上。
举个例子，在渲染过程中，你或许想对你的数据的属性进行修改或处理。在这种情况下，你就可以从终结点开始挂钩，渲染器会像一个管道一样，经过你所定义的“钩子”函数，直至终点。
下面是一个使用钩子函数的例子：
-- -------------------- ---- ------- --------- ----- ----- ---------- ------ ----- ---------------- ---------- ----- ---------- ------- ------ --- ---- -- --- ---------------------------- -- ------- -------展开代码
在以上的例子中，在body元素渲染完成之后，我们会调用参数为'after:body'的钩子，从而更改渲染后的结果。
钩子函数主要由以下两个函数调用：
register: 注册一个钩子函数。hook: 执行已经注册的钩子函数。
const ejs = require('ejs'); const page = `<body>\n<h1>Hello, <%= name %>!</h1>\n</body>`; const data = {name: 'world'}; ejs.functions.register('after:body', () => console.log('Render completed.')); console.log(ejs.render(page, data));
这就是模板钩子。如果你需要为你的模板添加更多的功能，模板钩子将帮助你实现这个目标。
4. 总结
extended-ejs是ejs的一个拓展，它提供了模板继承、模板局部、模板钩子的功能，使得使用ejs模板变得更加简单易用。在日常使用中，我们可以轻松管理模板的重复区域，快速创建模板页面。而模板钩子带来的功能则可以让我们更加灵活地处理模板数据，在模板渲染过程中进行修改和处理。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600668e2d9381d61a35409e6
