1.1 模板引擎
- 模板引擎是第三方模块。
- 让开发者以更加友好的方式拼接字符串, 使项目代码更加清晰、更加易于维护。
1.1 art-template模板引擎
art-template是一个简约、超快的模板引擎
它采用作用域声明的技术来优化模板渲染速度，从而获得接近JavaScript极限的运行性能，并且支持NodeJS和浏览器。
- 在命令行中使用
npm i art-template命令进行下载 - 使用
const template = require('art-template')引入模板引擎 - 告诉模板引擎要拼接的数据和模板在哪
const html = template('模板路径', 数据) - 返回值就是拼接好的字符串
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)
html代码：
<div>
{{ name }}
{{ age }}
</div>
1.2 模板语法
- art-template同时支持两种模板语法：标准语法和原始语法
- 标准语法可以让模板更加容易读写，原始语法具有强大的逻辑处理能力
标准语法：{{ 数据 }}
原始语法：<%=数据 %>
1.3 原文输出
如果数据中携带HTML标签, 默认模板引擎不会解析标签, 会将其转义后输出.
- 标准语法: {{@ 数据 }}
- 原始语法: <%- 数据 %>>
const template = require('art-template')
const path = require('path')
const views = path.join(__dirname, 'views', 'index.art')
const html = template(views, {
name: '卫庄',
age: 20,
content: '<h1>我是标题</h1>'
})
console.log(html)
<div>
// 标准语法
<p>{{ name }}</p>
<p>{{ 1 + 1 == 2 ? 'y' : 'n' }}</p>
<p>{{@ content }}</p>
// 原始语法
<p><%= name %></p>
<p><%= 1 + 2 %></p>
<p><%- 1 + 1 == 2 ? 'y' : 'n' %></p>
</div>
条件判断
在模板中可以根据条件来决定宣誓哪块HTML代码
// 标准语法
{{ if 条件 }} … {{ /if }}
{{ if v1 }}… {{ else if v2 }}… {{/if}}
// 原始语法
<% if (value) { %> … <% } %>
<% if (v1) { %> … <% } else if (v2) { %> … <% } %>
const template = require('art-template')
const path = require('path')
const views = path.join(__dirname, 'views', 'index.art')
const html = template(views, {
name: 'zhangsan',
age: 17
})
console.log(html)
// 标准语法
{{ if age > 18}}
年龄大于18
{{ else if age < 15 }}
年龄小于15
{{ else }}
年龄不符合要求
{{ /if }}
// 原始语法
<% if (age > 18) { %> 年龄大于18
<% } else if(age < 15) { %>
年龄小于15
<% } else {%>
年龄不符合要求
<% } %>
循环
- 标准语法: {{each 数据}} {{ /each }}
- 原始语法: <% for() { %> <%}%>
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)
<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 './common/header.art'}}
<% include('./common/header.art') %>
<div>{{ msg }}</div>
{{ include './common/footer.art' }}
<% include('./common/footer.art') %>
模板继承
使用模板继承可以将网站HTML骨架抽离到单独的文件中, 其他页面模板可以继承骨架文件
- html骨架代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
{{ block 'link' }} {{ /block }}
</head>
<body>
{{ block 'content' }} {{ /block }}
</body>
</html>
- html继承代码
{{ extend './common/layout.html' }}
{{ block 'content' }}
<p>{{ msg }}</p>
{{ /block }}
- js代码
const template = require('art-template')
const path = require('path')
const views = path.join(__dirname, 'views', '05.html')
const html = template(views, {
msg: '首页模板'
})
console.log(html)
模板配置
- 向模板中导入变量
template.defaults.imports.变量名= 变量值; - 设置模板根目录
template.defaults.root = 模板目录 - 设置模板默认后缀
template.defaults.extname = '.html
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', {
time: new Date()
})
console.log(html)