模版引擎--art-template

模版引擎–art-template

1. 引入 art-template

<script src="https://unpkg.com/art-template@4.13.2/lib/template-web.js"></script>

2. 准备好模板

<script id="tpl-students" type="text/html">
{{each students}}
<li>{{$value.name}}{{$value.age}}{{$value.sex}}<li>
{{/each}}
</script>

3. 获取模板

const list = document.getElementById('list')
list.innerHTML = template('tpl-students', {
	// 'students': students
	students
});

art-template 的语法

1. 输出

<div id="content"></div>
<script src="https://unpkg.com/art-template@4.13.2/lib/template-web.js"></script>
<script id="tpl-1" type="text/html">
{{value}}<br>
{{data}}<br>
{{data.key}}<br>
{{data['key']}}<br>
{{a + b}}<br>
{{$data}}<br>
{{$data.value}}
</script>
<script>
const content = document.getElementById('content');
content.innerHTML = template('tpl-1', {
	value: 1,
	data: {
		key: 2
	},
	a: 3,
	b: 4
});
</script>

原文输出语句不会对 HTML 内容进行转义处理

<div id="content"></div>
<script src="https://unpkg.com/art-template@4.13.2/lib/template-web.js"></script>
<script id="tpl-1" type="text/html">
{{@text}}
</script>
<script>
const content = document.getElementById('content');
content.innerHTML = template('tpl-1', {
	text: '<strong>重点内容</strong>'
});
</script>

参数要放在对象中，即使没有参数，也要传空对象

<script>
content.innerHTML = template('tpl-1', {});
</script>

2. 条件

<div id="content"></div>
<script id="tpl-2" type="text/html">
{{if sex==='male'}}
男
{{else if sex==='female'}}
女
{{else}}
其他
{{/if}}
</script>
<script>
const content = document.getElementById('content');
content.innerHTML = template('tpl-2', {
	sex: 'male'
});
</script>

3. 循环

<ul id="list"></ul>
<script id="tpl-3" type="text/html">
{{each students}}
<li>{{$value.username}}{{$value.age}}{{$value.sex}}{{$index}}</li>
{{/each}}
</script>
<script>
const students = [
	{
		username: '张三',
		age: 18,
		sex: 'male'
	},
	{
		username: '李四',
		age: 17,
		sex: 'female'
	},
	{
		username: '王武',
		age: 15,
		sex: 'male'
	}
];
const list = document.getElementById('list');
list.innerHTML = template('tpl-3', {
	students
});
</script>

能用标准写法就用标准语法，如果逻辑复杂标准语法不能实现，再用原始语法

4. 子模板

<div id="content"></div>
<script id="tpl-4" type="text/html">
{{include 'tpl-4-header'}}
<p>首页</p>
{{include 'tpl-4-footer'}}
</script>
<script id="tpl-4-header" type="text/html">
	<header>我是公共头部</header>
</script>
<script id="tpl-4-footer" type="text/html">
	<footer>我是公共的底部</footer>
</script>
<script>
const content = document.getElementById('content');
content.innerHTML = template('tpl-4', {});
</script>

向子模板中传参
向子模板中传参应采用原始语法

<!-- 父模板 -->
<script id="tpl-4-2-index" type="text/html">
<% include('tpl-4-2-header', { page: '首页' }) %>
<p>首页</p>
<% include('tpl-4-2-footer', { page: '首页' }) %>
</script>
<script id="tpl-4-2-header" type="text/html">
<header>我是{{page}}的公共头部</header>
</script>
<script id="tpl-4-2-footer" type="text/html">
<footer>我是{{page}}的公共底部</footer>
</script>

在 Webpack 中使用 art-template

1. 安装 art-template 的相关包

npm install --save-dev art-template-loader
npm install art-template

2. 配置

...
module: {
	rules: [
		{
			test: /\.art$/,
			loader: 'art-template-loader'
		}
	]
}
...

3. 模板中引入子模板，与在script中直接引入不同，这里的引入用的是 文件路径

...
<% include('./common/header.art', {header: '我是首页的头部'}) %>

<% include('./common/footer.art', {footer: '我是首页的底部'}) %>
...

4. js 中引入 art 模板
   引入后可以直接将模板输出

import render from './index.art';
console.log(render({page: '首页'}));