1 模板引擎
模板引擎的使用可以在浏览器中直接使用,也可以在在node服务器端直接使用
- 浏览器中直接使用:在浏览器中直接使用需要下载模板的js文件,并将文件导入到html文件中使用.一般在html中发送ajax请求进行局部更新的时候使用
1
2
3
4
5
6<h1>你好, {{name}}, 我今年{{age}}岁</h1>
<ul>
{{each}}
<li>{{$value.hobbies}}</li>
{{/each}}
</ul>
1
2
3
4
5// 将特定模板与特定数据进行拼接
const html = template('tpl',{
name: '张三',
age: 20
});- node服务器端使用:服务器端使用模板引擎,通过npm install art-template命令直接安装便可使用,在服务器端使用时,通过require()导入模板即可直接使用template方法
1
2
3
4
5
6
7
8
9
10
11
12const template = require('art-template');
const path = require('path');
// 获取绝对路径
const views = path.join(__dirname, 'views', '02.art');
// 获取特定模板与特定数据进行拼接
const html = template(views, {
name: '张三',
age: 20,
content: '<h1>我是无标题</h1>'
});
// 输出返回的html模板
console.log(html);1.1 Ajax项目中存在的问题
- 浏览器中直接使用:在浏览器中直接使用需要下载模板的js文件,并将文件导入到html文件中使用.一般在html中发送ajax请求进行局部更新的时候使用
数据和HTML字符串拼接导致代码混乱,拼接容易出错,增加修改难度。
业务逻辑和用户界面混合,代码不易维护。(js代码和html代码混合拼接)
1 | for (var i = 0; i < result.length; i++) { |
1.2 使用模板引擎的作用
- 使用模板引擎提供的模板语法可以使数据和HTML字符串拼接的更加美观,代码易于维护。
- 模板引擎能够使用户界面的数据拼接和JavaScript业务逻辑分离,增加程序的可扩展性。
- 使用模板引擎可以提高开发效率。
1.3 浏览器中模板渲染完整步骤
- 在art-template官网下载浏览器端使用的art-template的js文件
- 在html页面中引入template-web.js模板文件,此时可以在html页面就会存在template()方法
- template(参数1,参数2):将模板和数据进行绑定
- 参数1:html页面中模板的id名称(字符串),用于表示绑定的模板
- 参数2:传入对象,对象中设置的键值对可以在模板中直接使用
- 返回值是拼接好的字符串
- template(参数1,参数2):将模板和数据进行绑定
- html页面中的模板是放置在script标签中的,type类型为text/html可以保持代码的高亮性,为了标识不同的模板给模板添加id
- 数据绑定之后在模板中修改模板内容的显示
- 将绑定后的模板的返回值添加到html页面中的指定位置
1
2
3
4
5
6
7<script src="./js/template-web.js"></script>
<script type="text/html" id="tpl">
</script>
注意:script标签中默认的type为text/javascript
2 模板语法
模板语法的作用是告诉模板引擎数据和模板要如何进行拼接。
2.1 输出
将数据显示在模板中。
1 | <h2>{{value}}</h2> |
2.2 原文输出
如果数据中携带HTML标签,默认情况下,模板引擎不会解析标签,会将其转义后原文输出。
1 | <h2>{{@ value }}</h2> |
2.3 条件判断
1 | {{if 条件}} ... {{/if}} |
1 | {{if 条件}} |
2.4 循环
1 | {{each target}} |
2.5 导入模板变量
- 导入模板变量方式分为两种
- 定义的函数是全局函数,可以$import导入模板变量
1
$imports.变量名称
1
{{$imports.dateFormat(date)}}
- 定义函数不是全局变量(全局变量下也可以直接使用),通用
1
template.defaults.imports.变量名 = 变量值;
1
2
3
4// 将方法导入到模板中
template.defaults.imports.dateFormat = dateFormat;
//模板中使用
{{dateFormat(date)}}
- 定义的函数是全局函数,可以$import导入模板变量
- eg
1
<div>$imports.dataFormat(time)</div>
1 | template.defaults.imports.变量名 = 变量值; |
1 | function dateFormat(未格式化的原始时间){ |
1 | // 定义函数(是在全局作用域下) |
本文作者:
SparkParis
本文链接: https://sparkparis.github.io/2020/04/27/Ajax%E7%AC%94%E8%AE%B04/
版权声明: 本作品采用 知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议 进行许可。转载请注明出处!
本文链接: https://sparkparis.github.io/2020/04/27/Ajax%E7%AC%94%E8%AE%B04/
版权声明: 本作品采用 知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议 进行许可。转载请注明出处!