Nunjucks
Nunjucks是什么东东？其实它是一个模板引擎。
那什么是模板引擎？
模板引擎就是基于模板配合数据构造出字符串输出的一个组件。比如下面的函数就是一个模板引擎：
function examResult (data) {
return `${data.name}同学一年级期末考试语文${data.chinese}分，数学${data.math}分，位于年级第${data.ranking}名。`
}
如果我们输入数据如下：
examResult({
name: '小明',
chinese: 78,
math: 87,
ranking: 999
});
该模板引擎把模板字符串里面对应的变量替换以后，就可以得到以下输出：
小明同学一年级期末考试语文78分，数学87分，位于年级第999名。
function examResult (data) {
return `${data.name}同学一年级期末考试语文${data.chinese}分，数学${data.math}分，位于年级第${data.ranking}名。`
}
ret = examResult({
name: '小明',
chinese: 78,
math: 87,
ranking: 999
});
console.log(ret)
模板引擎最常见的输出就是输出网页，也就是HTML文本。当然，也可以输出任意格式的文本，比如Text，XML，Markdown等等。
有同学要问了：既然JavaScript的模板字符串可以实现模板功能，那为什么我们还需要另外的模板引擎？
因为JavaScript的模板字符串必须写在JavaScript代码中，要想写出新浪首页这样复杂的页面，是非常困难的。
输出HTML有几个特别重要的问题需要考虑：
转义
对特殊字符要转义，避免受到XSS攻击。比如，如果变量name的值不是小明，而是小明<script>...</script>，模板引擎输出的HTML到了浏览器，就会自动执行恶意JavaScript代码。
格式化
对不同类型的变量要格式化，比如，货币需要变成12,345.00这样的格式，日期需要变成2016-01-01这样的格式。
简单逻辑
模板还需要能执行一些简单逻辑，比如，要按条件输出内容，需要if实现如下输出：
{{ name }}同学，
{% if score >= 90 %}
成绩优秀，应该奖励
{% elif score >=60 %}
成绩良好，继续努力
{% else %}
不及格，建议回家打屁股
{% endif %}
所以，我们需要一个功能强大的模板引擎，来完成页面输出的功能。
Nunjucks
我们选择Nunjucks作为模板引擎。Nunjucks是Mozilla开发的一个纯JavaScript编写的模板引擎，
既可以用在Node环境下，又可以运行在浏览器端。但是，主要还是运行在Node环境下，因为浏览器端有更好的模板解决方案，例如MVVM框架。
如果你使用过Python的模板引擎jinja2，那么使用Nunjucks就非常简单，两者的语法几乎是一模一样的，因为Nunjucks就是用JavaScript重新实现了jinjia2。
从上面的例子我们可以看到，虽然模板引擎内部可能非常复杂，但是使用一个模板引擎是非常简单的，因为本质上我们只需要构造这样一个函数：
function render(view, model) {
// TODO:...
}
其中，view是模板的名称（又称为视图），因为可能存在多个模板，需要选择其中一个。model就是数据，在JavaScript中，它就是一个简单的Object。render函数返回一个字符串，就是模板的输出。
下面我们来使用Nunjucks这个模板引擎来编写几个HTML模板，并且用实际数据来渲染模板并获得最终的HTML输出。
我们创建一个use-nunjucks的VS Code工程结构如下：
use-nunjucks/
|
+- .vscode/
| |
| +- launch.json <-- VSCode 配置文件
|
+- views/
| |
| +- hello.html <-- HTML模板文件
|
+- app.js <-- 入口js
|
+- package.json <-- 项目描述文件
|
+- node_modules/ <-- npm安装的所有依赖包
其中，模板文件存放在views目录中。
我们先在package.json中添加nunjucks的依赖：
"nunjucks": "2.4.2"
注意，模板引擎是可以独立使用的，并不需要依赖koa。用npm install安装所有依赖包。
紧接着，我们要编写使用Nunjucks的函数render。怎么写？方法是查看Nunjucks的官方文档，仔细阅读后，在app.js中编写代码如下：
const nunjucks = require('nunjucks');
function createEnv(path, opts) {
// 我们用autoescape = opts.autoescape && true这样的代码给每个参数加上默认值
var
autoescape = opts.autoescape === undefined ? true : opts.autoescape,
noCache = opts.noCache || false,
watch = opts.watch || false,
throwOnUndefined = opts.throwOnUndefined || false,
env = new nunjucks.Environment(
// new nunjucks.FileSystemLoader('views')创建一个文件系统加载器 从views目录读取模板。
new nunjucks.FileSystemLoader('views', {
noCache: noCache,
watch: watch,
}), {
autoescape: autoescape,
throwOnUndefined: throwOnUndefined
});
if (opts.filters) {
for (var f in opts.filters) {
env.addFilter(f, opts.filters[f]);
}
}
return env;
}
// 变量env就表示Nunjucks模板引擎对象，它有一个render(view, model)方法，正好传入view和model两个参数，并返回字符串。
var env = createEnv('views', {
watch: true,
filters: {
hex: function (n) {
return '0x' + n.toString(16);
}
}
});
变量env就表示Nunjucks模板引擎对象，它有一个render(view, model)方法，正好传入view和model两个参数，并返回字符串。
创建env需要的参数可以查看文档获知。我们用autoescape = opts.autoescape && true这样的代码给每个参数加上默认值，最后使用new nunjucks.FileSystemLoader('views')创建一个文件系统加载器，从views目录读取模板。
我们编写一个hello.html模板文件，放到views目录下，内容如下：
<h1>Hello {{ name }}</h1>
然后，我们就可以用下面的代码来渲染这个模板：
var s = env.render('hello.html', { name: '小明' });
console.log(s);
获得输出如下：
<h1>Hello 小明</h1>
咋一看，这和使用JavaScript模板字符串没啥区别嘛。不过，试试：
var s = env.render('hello.html', { name: '<script>alert("小明")</script>' });
console.log(s);
获得输出如下：
<h1>Hello <script>alert("小明")</script></h1>
这样就避免了输出恶意脚本。
此外，可以使用Nunjucks提供的功能强大的tag，编写条件判断、循环等功能，例如：
<!-- 循环输出名字 -->
<body>
<h3>Fruits List</h3>
{% for f in fruits %}
<p>{{ f }}</p>
{% endfor %}
</body>
Nunjucks模板引擎最强大的功能在于模板的继承。仔细观察各种网站可以发现，网站的结构实际上是类似的，头部、尾部都是固定格式，只有中间页面部分内容不同。如果每个模板都重复头尾，一旦要修改头部或尾部，那就需要改动所有模板。
更好的方式是使用继承。先定义一个基本的网页框架base.html：
<html><body>
{% block header %} <h3>Unnamed</h3> {% endblock %}
{% block body %} <div>No body</div> {% endblock %}
{% block footer %} <div>copyright</div> {% endblock %}
</body>
base.html 定义了三个可编辑的块，分别命名为 header、body 和 footer 。子模板可以有选择地对块进行重新定义：
{% extends 'base.html' %}
{% block header %}<h1>{{ header }}</h1>{% endblock %}
{% block body %}<p>{{ body }}</p>{% endblock %}
然后，我们对子模板进行渲染：
console.log(env.render('extend.html', {
header: 'Hello',
body: 'bla bla bla...'
}));
输出HTML如下：
<html><body>
<h1>Hello</h1>
<p>bla bla bla...</p>
<div>copyright</div> <-- footer没有重定义，所以仍使用父模板的内容
</body>
Nunjucks的更多相关文章
- nunjucks.js模板渲染
直接用 script 引入文件: <script src="nunjucks.js"></script> 是使用 render 来直接渲染文件,这种方式支持 ...
- Koa与Node.js开发实战（3）——Nunjucks模板在Koa中的应用（视频演示）
技术架构: 在Koa中应用Nunjucks,需要先把Nunjucks集成为符合Koa规格的中间件(Middleware),从本质上来讲,集成后的中间件的作用是给上下文对象绑定一个render(vi ...
- Nunjucks：Mozilla 开发的 JavaScript 模板引擎
Nunjucks 中文网站:https://nunjucks.bootcss.com/
- iKcamp｜基于Koa2搭建Node.js实战（含视频）☞ 视图Nunjucks
视频地址:https://www.cctalk.com/v/15114923888328 视图 Nunjucks 彩虹是上帝和人类立的约,上帝不会再用洪水灭人. 客户端和服务端之间相互通信,传递的数据 ...
- 前端模板Nunjucks简介
参考资料: https://mozilla.github.io/nunjucks/ https://mozilla.github.io/nunjucks/templating.html https:/ ...
- nunjucks如何使用？
基本的使用 const nunjucks = require('nunjucks') // nunjucks.configure({ autoescape: true }); // const res ...
- nunjucks模板设计一个页面
使用nunjucks代替原来的ejs,因为这个更强大,是node中主流的模板引擎 nunjucks官网 配置使用 nunjucks 模板引擎 nunjucks 模板引擎没有对模板文件名的后缀名做特定限 ...
- 2015年最佳的12个 CSS 开发工具推荐
CSS所能做的就是改变网页的布局.排版和调整字间距等,但编写 CSS 并不是一项容易的任务,当你接触新的 CSS3 属性及其各自的浏览器前缀的时候,你会发现很伤脑经.值得庆幸的是一些优秀的开发人员提供 ...
- 在 2016 年学 JavaScript 是一种什么样的体验？
转 译者:方应杭 嘿,我最近接到一个 Web 项目,不过老实说,我这两年没怎么接触 Web 编程,听说 Web 技术已经发生了一些变化.听说你是这里对新技术最了解的 Web 开发工程师? 准确地说,我 ...
- github上最全的资源教程-前端涉及的所有知识体系
前面分享了前端入门资源汇总,今天分享下前端所有的知识体系. 个人站长对个人综合素质要求还是比较高的,要想打造多拉斯自媒体网站,不花点心血是很难成功的,学习前端是必不可少的一个环节, 当然你不一定要成为 ...
随机推荐
- SQL中常用的字符串REPLACE函数和LEN函数详解！
首发微信公众号:SQL数据库运维 原文链接:https://mp.weixin.qq.com/s?__biz=MzI1NTQyNzg3MQ==&mid=2247485212&idx=1 ...
- Java面试题：线程池内“闹情绪”的线程，怎么办？
在Java中,线程池中工作线程出现异常的时候,默认会把异常往外抛,同时这个工作线程会因为异常而销毁,我们需要自己去处理对应的异常,异常处理的方法有几种: 在传递的任务中去处理异常,对于每个提交到线程池 ...
- C 语言编程 — 基本语法
目录 文章目录 目录 前文列表 C 语言 C 语言的版本 C 语言的特点 C 语言的优点 C 语言的缺点 搭建编程环境 基本语法 前文列表 <程序编译流程与 GCC 编译器> C 语言 C ...
- 微信开发者工具拉取gitlab远程代码报Pull failed原因分析：
可能出现的原因: 本地主机上没有安装node node下载地址: 1 https://nodejs.org/zh-cn/download/ 没有保存gitlab的用户名和密码
- 什么是LLM大模型训练，详解Transformer结构模型
本文分享自华为云社区<LLM 大模型学习必知必会系列(四):LLM训练理论篇以及Transformer结构模型详解>,作者:汀丶. 1.模型/训练/推理知识介绍 深度学习领域所谓的&quo ...
- python实现取得成员所在的多个位置
注:本代码主要是为了实现多个集合之间求并集时的辅助代码,简单的举个例子来说明代码的功能. 约定:例如{11: [2, 3]}表示数据11在集合2和集合3中都存在. 现有以下数据: d0 = {38: ...
- (四)基于multiprocessing.dummy线程池爬取梨视频的视频信息
功能:爬取梨视频科技栏最热的几个视频. 1. 找到视频对应的通用标签 可以看出关于视频的信息都存放在li标签中 2. 拿到视频的名称以及对应的url 3.进入Video的url,找到视频信息的地址 ...
- JavaScript模块化笔记
JavaScript模块化笔记 一个模块就是一堆被封装到一个文件当中的代码,并使用export暴露部分代码给其他的文件.模块专注于一小部分功能并与应用的其他部分松耦合,这是因为模块间没有全局变量或共享 ...
- 项目管理--PMBOK 读书笔记（12）【项目采购管理】
1.采购计划三要素 1)采购管理计划:预审合格的卖方,供方选择标准: 2)采购 SOW:采购工作说明书应详细描述拟采购的产品.服务或成果: 3)采购文件 2.合同类型 1)总价合同:范围清楚, ...
- [DP] DP优化总结
写在前面 $ DP $,是每个信息学竞赛选手所必会的算法,而 $ DP $ 中状态的转移又显得尤为关键.本文主要从状态的设计和转移入手,利用各种方法对朴素 $ DP $ 的时间复杂度和空间复杂度进行优 ...