Nunjucks

Posted rivend

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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名。

 

模板引擎最常见的输出就是输出网页,也就是html文本。当然,也可以输出任意格式的文本,比如Text,XML,Markdown等等。

有同学要问了:既然javascript的模板字符串可以实现模板功能,那为什么我们还需要另外的模板引擎?

因为JavaScript的模板字符串必须写在JavaScript代码中,要想写出新浪首页这样复杂的页面,是非常困难的。

输出HTML有几个特别重要的问题需要考虑:

 

转义

对特殊字符要转义,避免受到XSS攻击。比如,如果变量name的值不是小明,而是小明<script>...</script>,模板引擎输出的HTML到了浏览器,就会自动执行恶意JavaScript代码。

以上是关于Nunjucks的主要内容,如果未能解决你的问题,请参考以下文章

nunjucks如何使用?

前端模板Nunjucks简介

nunjucks模板设计一个页面

nunjucks.js模板渲染

将流式语法更改为 nunjucks - 这是正确的吗?

检查 Nunjucks 中的字符串是不是为空?