学习笔记
art-template 是一个简单，高效的模板引擎，它采用作用域声明的方式来优化模板渲染速度，利用script标签作为模板，调用template方法向页面插入模板 从而达到需要的效果
1.art-template的js文件仅有6kb大小
2.支持模板继承和子模板
二，art-template 语法
以下所有参数都必须从外面传真 传真进来的 在模板引擎里面 不能定义参数，所以大家看的时候可以比拟一个假数据语法介绍玩之后会 介绍数据掺入模板引擎
1.输出
标准语法：{{数据}}
原始语法：<%=数据%>
<!-- 标准语法 -->
<h2>{{value}}</h2>
<h2>{{a ? b : c}}</h2>
<h2>{{a + b}}</h2>
<!-- 原始语法 -->
<h2><%= value %></h2>
<h2><%= a ? b : c %></h2>
<h2><%= a + b %></h2>
原文输出，模板引擎考虑到安全的问题，在数据携带有html标签时候，模板引擎不会解析标签，可是我又不想要标签输出，所以加给原文输出会把标签解析
标准语法：{{@数据}} 标准语法原文输出加上 @
原始语法：<%-数据%> 原始语法原文输出加上 -
<!-- 标准语法 -->
<h2>{{@ value }}</h2>
<!-- 原始语法 -->
<h2><%- value %></h2>
3.条件判断
<!-- 标准语法 -->
{{if 条件}} ... {{/if}}
{{if v1}} ... {{else if v2}} ... {{/if}}
<!-- 原始语法 -->
<% if (value) { %> ... <% } %>
<% if (v1) { %> ... <% } else if (v2) { %> ... <% } %>
4.数据循环
<!-- 标准语法 -->
{{each 数据}}
{{$value}} //$value 代表当前循环的每一项
{{$index}} //$index 代表当前向的索引
{{$index}} //$index 代表当前向的索引
{{/each}}
<!-- 原始语法 -->
<% if (value) { %> ... <% } %>
<% if (v1) { %> ... <% } else if (v2) { %> ... <% } %>
使用子模板将网站公共部分抽离出来到单独的文件中 然后通过 include 调用
标准语法：
{{include '模板地址'}}
原始语法：
<%include('模板地址') %>
1.创建骨架模板
下面的填坑的意思就是 你引入HTML5 骨架模板 但是每个页面的
css 和js 内容 都不一样 所以只需要创建一个坑 等会继承的时候
去填坑
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>HTML骨架模板</title>
{{block 'link'}}{{/block}} //挖坑 挖的是css坑和头部信息坑
</head>
<body>
{{block 'content'}}{{/block}} //挖坑 挖的内容坑
{{block 'script'}}{{/block}} //挖坑 挖的是js文件坑
</body>
</html>
2.继承骨架文件
{{extend '骨架模板地址'}}
{{block 'link'}} 填写css文件和头部文件 {{/block}} //填空
{{block 'content'}} 内容区 {{/block}} //填空
{{block 'script'}} js文件和底部文件 {{/block}} //填空
三，定义模板
这里介绍在JavaScript中的定义模板方法 在javascript 中定义模板分为2步
1.引入相关js 文件
2.创建模板(利用script创建)
3.调用数据在模板使用，在把模板插入页面中
<body>
<ul>
</ul>
<!-- //引入 art-template 模板js文件 -->
<script src="https://unpkg.com/art-template@4.13.2/lib/template-web.js"></script>
<!-- //script标签必须设置成 text/html类型 设置id是为了插入数据的标识 -->
<script type="text/html" id="tpl">
{{each data}}
<li>
name：<span>{{$value.name}}</span><br/>
age: <p>{{$value.age}}</p>
</li>
{{/each}}
</script>
<script>
//定义一条数据 这里简单的定义一个 数组对象
let arr = [{
name: '张三',
age: 18
}, {
name: '李四',
age: 19
}, {
name: '王五',
age: 20
}];
//template是模板引擎的方法
// 参数1： 模板的id 参数2： 传入的数据（尽量对象形式，键值对）
// 返回值是 一个 模板文件
let html = template('tpl', {
data: arr
});
//在把 模板文件 插入数据当中
let uls = document.querySelector('ul');
uls.innerHTML = html;
</script>
</body>
-
name：张三
age:18
-
name：李四
age:19
-
name：王五
age:20
