nodejs之模板引擎（渲染模板）

最新推荐文章于 2024-05-15 01:42:28 发布

Yvonne.Y

最新推荐文章于 2024-05-15 01:42:28 发布

阅读量2.9k

点赞数 1

分类专栏： node.js 文章标签： node.js javascript 模板渲染 art-template

本文链接：https://blog.csdn.net/PILIpilipala/article/details/109101575

版权

node.js 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

模板引擎

模板引擎简介

art-template是一个简单且超快速的模板引擎，可通过范围内预先声明的技术优化模板渲染速度，从而实现接近JavaScript极限的运行时性能。同时，它同时支持NodeJS和浏览器。
特征

性能接近JavaScript渲染限制
调试友好。语法错误或运行时错误将准确定位在模板的哪一行。支持在模板文件中设置断点
支持Express，Koa，Webpack
支持模板继承和子模板
浏览器版本只有6KB

语法模板

art-template同时支持两种模板语法。标准语法使模板更易于读写。

{{if user}} < h2 > {{user.name}} </ h2 > {{/ if}}

而原始语法具有强大的逻辑处理能力。

< ％ if（用户）{％> < h2 > < ％= user.name％> </ h2 > < ％ }％>

核心方法

根据模板名称渲染模板：
template（filename，data）
filename值可以是：一个art文件的路径地址
__dirname+’***.art’
path.join(__dirname,‘文件夹’,’***.art’)
将模板的源代码编译为函数:
template.compile（source，options）

将模板的源代码编译为函数，并立即调用它:
template.render（source，data，options）

不管哪种方法，首先要通过npm联网下载这个模板，安装语句是：npm install art-template --save--dev
下载之后会自动安装一个文件夹，需要用的时候直接引入模板即可：
在这里插入图片描述

template（filename，data）

filename：是需要渲染的文件名
data：是需要渲染的数据
需要渲染的文件可以是==.tpl文件或.art==文件

const template = require('art-template');
const http = require('http')
var html = template(__dirname+'/mytpl.art',{
    user:{
        name:'pikaqiu'
    }
})
console.log(html);

.art文件内容：

{{if user}}
    <h2>{{user.name}}</h2>
{{/if }}

输出结果是：
在这里插入图片描述

template.compile（source，options）

source：要加载的模板

let tpl = '<ul>{{each list as value}}<li>{{value}}</li>{{/each}}</ul>';
let render = template.compile(tpl);//编译解析
let ret = render({
    list:['red','black','yellow']
//用模板引擎 中提供的方法 实现数据填充
})
console.log(ret);

此处，返回的render是一个函数。
each是模板引擎提供的循环，循环一个list数组(集合)。
在这里插入图片描述

template.render（source，data，options）

source：要渲染的模板
data：要显示的数据

//第一种模板
let tpl = '<ul>{{each list as value}}<li>{{value}}</li>{{/each}}</ul>';
let ret = template.render(tpl,{
        list:['red','black','yellow']
    })
console.log(ret);

//第二种模板
let tpl = '<ul>{{each list}}<li>{{$index}}-----{{$value}}</li>{{/each}}</ul>';
let ret = template.render(tpl,{
    list:['apple','orange','banana']
});
console.log(ret);

这里的each是模板引擎提供的循环，循环一个list数组
as value相当于起了一个别名，叫value，等于 $value

$index是索引

$value是值

在这里插入图片描述

案例—渲染查询出来的成绩

let html = template(__dirname +'/score.art',{
    chinese:120,
    math:130,
    english:140
})
console.log(html)

score.art文件存放模板

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <ul>
        <li>语文：{{chinese}}</li>
        <li>数学：{{math}}</li>
        <li>英语：{{english}}</li>

    </ul>
</body>
</html>

结果如下：
在这里插入图片描述

Yvonne.Y

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
1
评论
nodejs之模板引擎（渲染模板）

模板引擎模板引擎简介语法模板核心方法template（filename，data）template.compile（source，options）template.render（source，data，options）案例---渲染查询出来的成绩模板引擎简介art-template是一个简单且超快速的模板引擎，可通过范围内预先声明的技术优化模板渲染速度，从而实现接近JavaScript极限的运行时性能。同时，它同时支持NodeJS和浏览器。特征性能接近JavaScript渲染限制调试友好。语法错
复制链接

扫一扫

专栏目录