下划线的学习频道 | 下划线的学习频道

前端模板引擎是一种将数据和模板结合起来生成 HTML 页面的工具。它可以将数据和模板分离，使得前端开发人员可以专注于页面的设计和交互，而不必担心数据的处理和渲染。

前端模板引擎可以分为两类：客户端模板引擎和服务器端模板引擎。

客户端模板引擎客户端模板引擎是在浏览器端运行的模板引擎，它使用 JavaScript 代码来生成 HTML 页面。客户端模板引擎通常使用 Mustache、Handlebars、Underscore 等模板引擎库。

优点：

可以在客户端动态生成 HTML 页面，减轻服务器的负担。
可以在浏览器端缓存模板，提高页面加载速度。
可以在客户端实现动态数据绑定，使得页面可以实时更新。缺点：
由于是在浏览器端运行，所以对于大规模数据的处理可能会影响页面性能。
由于需要将模板和数据都传输到客户端，所以可能会增加网络传输的负担。

服务器端模板引擎服务器端模板引擎是在服务器端运行的模板引擎，它使用服务器端的编程语言来生成 HTML 页面。服务器端模板引擎通常使用 PHP、Java、Python 等编程语言的模板引擎库。

优点：

可以在服务器端动态生成 HTML 页面，减轻客户端的负担。
可以在服务器端缓存模板，提高页面加载速度。
可以在服务器端实现动态数据绑定，使得页面可以实时更新。缺点：
由于是在服务器端运行，所以对于大规模数据的处理可能会影响服务器性能。
由于需要将已经生成的 HTML 页面传输到客户端，所以可能会增加网络传输的负担。

前端常见使用的

模板引擎	描述
Pug	受 Haml 启发的模板引擎，曾用名 Jade。
Haml.js	Haml 模板引擎的实现。
EJS	允许在 HTML 模板中嵌入 JavaScript 代码的模板引擎。
hbs	Handlebars.js 的适配器，是 Mustache.js 模板引擎的扩展。
Squirrelly	快速的模板引擎，支持部分模板、帮助程序、自定义标签、过滤器和缓存。不敏感于空格，适用于任何语言。
Eta	轻量级的嵌入式 JS 模板引擎，支持自定义分隔符、异步、空格控制、部分模板、缓存和插件。
combyne.js	一个希望按照您的期望工作的模板引擎。
Nunjucks	受 jinja/twig 启发的模板引擎。
marko	快速且轻量级的基于 HTML 的模板引擎，将模板编译为 CommonJS 模块，支持流式传输、异步渲染和自定义标签。
whiskers	小巧快速的模板引擎，使用 Mustache 语法。
Blade	受 Jade 和 Haml 启发的 HTML 模板编译器。
Haml-Coffee	允许编写内联 CoffeeScript 的 Haml 模板。
express-hbs	适用于 Express 3 的 Handlebars，支持布局、部分模板和块。
express-handlebars	适用于 Express 的 Handlebars 视图引擎，易于使用。
express-views-dom	适用于 Express 的 DOM 视图引擎。
rivets-server	允许在服务器上呈现 Rivets.js 模板的模板引擎。
LiquidJS	简单、表达性强且安全的模板引擎。
express-tl	适用于 Express 的模板文字引擎实现。
Twing	适用于 Node.js 的一流 Twig 引擎。
Sprightly	极其轻量级的 JS 模板引擎（只有 45 行代码），包含您想在模板引擎中看到的所有基本功能。
html-express-js	一个小型的模板引擎，用于使用本机 JavaScript 提供静态或动态 HTML 页面。

在express 中使用模板

这里以ejs 为例使用模板，在使用模板前需要按照模板的包 npm i ejs --save

const express = require('express')
const path = require('path')
const app = express()

// 设置模板引擎
app.set('view engine', 'ejs')

//  设置模板文件存放位置   模板文件: 具有模板语法内容的文件
app.set('views', path.resolve(__dirname, './views'))

app.get('/index', (req, res) => {
	// 渲染模板 index view/index.ejs
	res.render('index', { name: 'zs', age: 20 })
})

//监听端口, 启动服务
app.listen(3000, () => {
	console.log('服务已经启动, 端口 3000 正在监听中....')
})

views/index.ejs

html

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Document</title>
	</head>
	<body>
		<p><%=name%></p>
		<p><%=age%></p>
	</body>
</html>

非包含的第三方模板

处理 express 可以兼容的一些模板，如果使用第三方模板配置如下

shell

npm install --save art-template
npm install --save express-art-template

const express = require('express')
const path = require('path')
const app = express()

// 用于在express中使用art-template模板引擎
const artTemplate = require('express-art-template')

// 设置模板引擎art-template 解析模板文件后缀名为html
app.engine('html', artTemplate)

//  设置模板文件存放位置   模板文件: 具有模板语法内容的文件
app.set('views', path.resolve(__dirname, './views'))

app.get('/index', (req, res) => {
	// 渲染模板 index view/index.ejs
	res.render('index.html', {
		title: 'Art Template Demo',
		message: 'Hello, Art Template!',
	})
})

//监听端口, 启动服务
app.listen(3000, () => {
	console.log('服务已经启动, 端口 3000 正在监听中....')
})

省略后缀写法

...
// 省略模板文件后缀名 	res.render('index'
app.set('view engine', 'html')

app.get('/index', (req, res) => {
	// 渲染模板 index view/index.ejs
	res.render('index', {
		title: 'Art Template Demo',
		message: 'Hello, Art Template!',
	})
})
...

express模板引擎

前端常见使用的 ​

在express 中使用模板 ​

非包含的第三方模板 ​

前端常见使用的

在express 中使用模板

非包含的第三方模板