模板引擎

最新推荐文章于 2024-09-20 21:32:26 发布

MichstaBe-IMUT

最新推荐文章于 2024-09-20 21:32:26 发布

阅读量284

点赞数 1

分类专栏： # Node.js 文章标签： art-template 模板引擎

本文链接：https://blog.csdn.net/Ulrica_Amaris/article/details/108716277

版权

Node.js 专栏收录该内容

11 篇文章 1 订阅

订阅专栏

简介

模板引擎是第三方模块。

让开发者以更加友好的方式拼接字符串，使项目代码更加清晰、更加易于维护。

art-template

介绍

artTemplate 是新一代 javascript 模板引擎

它采用预编译方式让性能有了质的飞跃，并且充分利用 javascript 引擎特性，使得其性能无论在前端还是后端都有极其出色的表现。

调试功能

除了性能优势外，调试功能也值得一提。

模板调试器可以精确定位到引发渲染错误的模板语句，解决了编写模板过程中无法调试的痛苦，让开发变得高效，也避免了因为单个模板出错导致整个应用崩溃的情况发生。

特性

1、性能卓越，执行速度通常是 Mustache 与 tmpl 的 20 多倍
2、支持运行时调试，可精确定位异常模板所在语句
3、对 NodeJS Express 友好支持
4、安全，默认对输出进行转义、在沙箱中运行编译后的代码（Node版本可以安全执行用户上传的模板）
5、支持include语句
6、可在浏览器端实现按路径加载模板
7、支持预编译，可将模板转换成为非常精简的 js 文件
8、模板语句简洁，无需前缀引用数据，有简洁版本与原生语法版本可选
9、支持所有流行的浏览器

使用

1.在命令行工具中使用 npm install art-template 命令进行下载

2.使用const template = require('art-template')引入模板引擎

3.告诉模板引擎要拼接的数据和模板在哪 const html = template(‘模板路径’, 数据);

4.使用模板语法告诉模板引擎，模板与数据应该如何进行拼接
举例：
app.js文件：

const template = require('art-template');

const path =require('path');


const views = path.join(__dirname,'views','index.art');


//template方法是用来拼接字符串的
//1.模板路径  绝对路径
//2.要在模板中显示的数据  对象类型
//返回拼接好的字符串

const html = template(views,{
	name:'张三',

	age:20
});

console.log(html);

index.art文件：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	{{ name }}
	{{ age }}
</body>
</html>

打印结果：
在这里插入图片描述

模板语法

art-template同时支持两种模板语法：
标准语法和原始语法。

标准语法可以让模板更容易读写

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

标准语法： {{ 数据 }}
原始语法：<%=数据 %>

输出语法

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<!-- 标准语法 -->
	<p>{{ name }}</p>
	<p>{{ 1 + 1 }}</p>
	<p>{{ 1 + 1 == 2 ? '相等' : '不相等' }}</p>
	<p>{{ content }}</p>
	<p>{{@ content }}</p>
	<!-- 原始语法 -->
	<p><%= name %></p>
	<p><%= 1 + 2%></p>
	<p><%= 1 + 1 == 2 ? '相等' : '不相等' %></p>
	<p><%= content%></p>
	<p><%- content%></p>
</body>
</html>

在这里插入图片描述

条件判断

<!-- 标准语法 --> 
 {{if 条件}} ... {{/if}}
 {{if v1}} ... {{else if v2}} ... {{/if}}
 <!-- 原始语法 -->
 <% if (value) { %> ... <% } %>
 <% if (v1) { %> ... <% } else if (v2) { %> ... <% } %>

示例：
02.js

const template = require('art-template');
const path = require('path');

const views = path.join(__dirname, 'views', '02.art');

const html = template(views, {
	name: '张三',
	age: 17
})

console.log(html);

02.art

{{if age > 18}}
	年龄大于18
{{else if age < 15 }}
	年龄小于15
{{else}}
	年龄不符合要求
{{/if}}

<% if (age > 18) { %>
	年龄大于18
<% } else if (age < 15) { %>
	年龄小于15
<% } else { %>
	年龄不符合要求
<% } %>

在这里插入图片描述

循环

标准语法：{{each 数据}} {{/each}}

原始语法：<% for() { %> <% } %>

<!-- 标准语法 -->
 {{each target}}
     {{$index}} {{$value}}
 {{/each}}
  <!-- 原始语法 -->
 <% for(var i = 0; i < target.length; i++){ %>
     <%= i %> <%= target[i] %>
 <% } %>

示例：
03.js

const template = require('art-template');
const path = require('path');

const views = path.join(__dirname, 'views', '03.art');

const html = template(views, {
	users: [{
		name: '张三',
		age: 20,
		sex: '男'
	},{
		name: '李四',
		age: 30,
		sex: '男'
	},{
		name: '玛丽',
		age: 15,
		sex: '女'
	}]
});

console.log(html);

03.art

<ul>
	{{each users}}
		<li>
			{{$value.name}}
			{{$value.age}}
			{{$value.sex}}
		</li>
	{{/each}}
</ul>

<ul>
	<% for (var i = 0; i < users.length; i++) { %>
		<li>
			<%=users[i].name %>
			<%=users[i].age %>
			<%=users[i].sex %>
		</li>
	<% } %>
</ul>

在这里插入图片描述

子模版

使用子模板可以将网站公共区块(头部、底部)抽离到单独的文件中。

标准语法：{{include ‘模板’}}
原始语法：<%include(‘模板’) %>

 <!-- 标准语法 -->
 {{include './header.art'}}
  <!-- 原始语法 -->
 <% include('./header.art') %>

示例：
04.js

const template = require('art-template');
const path = require('path');

const views = path.join(__dirname, 'views', '04.art');

const html = template(views, {
	msg: '我是首页'
});

console.log(html);

04.art

{{ include './common/header.art' }}

<% include('./common/header.art') %>

<div> {{ msg }} </div>

{{ include './common/footer.art' }}

<% include('./common/footer.art') %>

header.art

我是头部

foot.art

我是底部

在这里插入图片描述

模板继承

使用模板继承可以将网站HTML骨架抽离到单独的文件中，其他页面模板可以继承骨架文件。
在这里插入图片描述

示例：
05.js

const template = require('art-template');
const path = require('path');

const views = path.join(__dirname, 'views', '05.art');

const html = template(views, {
	msg: '首页模板'
});

console.log(html);

05.art

{{extend './common/layout.art'}}

{{block 'content'}}
<p>{{ msg }}</p>
{{/block}}

{{block 'link'}}
<link rel="stylesheet" type="text/css" href="./main.css">
{{/block}}

layout.art

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	{{block 'link'}} {{/block}}
</head>
<body>
	{{block 'content'}} {{/block}}
</body>
</html>

在这里插入图片描述
block：填坑
HTML骨架模板，后续的页面有不同的css，js修饰，这就需要在骨架模板中挖坑，后续根据自己的需求填坑，比如：

{{block 'link'}} {{/block}}
{{block 'content'}} {{/block}}

这就是实现挖坑

{{block 'content'}}
<p>{{ msg }}</p>
{{/block}}

{{block 'link'}}
<link rel="stylesheet" type="text/css" href="./main.css">
{{/block}}

这是填坑。

模板配置

1.向模板中导入变量 template.defaults.imports.变量名 = 变量值;

2.设置模板根目录 template.defaults.root = 模板目录

3.设置模板默认后缀 template.defaults.extname = ‘.art’
示例：
06.js

const template = require('art-template');
const path = require('path');
const dateFormat = require('dateformat');

// 设置模板的根目录
template.defaults.root = path.join(__dirname, 'views');

// 导入模板变量
template.defaults.imports.dateFormat = dateFormat;

// 配置模板的默认后缀
template.defaults.extname = '.html';

const html = template('06.art', {
	time: new Date()
});

console.log(template('07', {}));
console.log(html);