第四节：高性能 JavaScript 模板引擎 之 art-template

官网地址：http://aui.github.io/art-template/docs/syntax.html

艺术模板 - 高性能 JavaScript 模板引擎。

<script src="https://cdn.bootcdn.net/ajax/libs/art-template/4.13.2/lib/template-web.js"></script>

使用art模板时，需要使用id值进行绑定。

参数1：id值。参数2：对象数据。

template('id值', {数据});

<div class="box"> </div>

<script type="text/html" id="box">
	<h1>
    	{{uName}} - {{age}}
    </h1>
</script>

<script>
    // 设置当前 id 为 box 的数据
	var html = template('box', {uName: '张三', age: 17});
    // 打印在内容区
    document.querySelector('.box').innerHTML = html;
</script>

<!--结果：张三 - 17 -->

art-template 循环语法

each 遍历对象数组

<div class="box"></div>

<!-- 遍历 data 对象中的 list，index是下标，value是每一项的值 -->
<script type="text/html" id="list">
	{{each list}}
		<h2>{{$index}} - {{$value}}</h2>
	{{/each}}
</script>

<script>
    // 准备的数据
    var data = {
        list: ['张三', '李四'],
    }
    // 遍历 data 对象
    var html = template('list', data);
    document.querySelector('.box').innerHTML = html;
</script>

<!--结果：
	0 - 张三
	1 - 李四
-->

注意事项

1. 固定语法: type，设置id值
<script type="text/html" id="list"></script>

2. 语法
template('id值', 数据);

3. 遍历语法
  是数组的话，index是数组中的下标，value是数组中的每一项
  是对象的话，index对象的每一项，value可以点出属性
{{each}}
	{{$iindex}} {{$value}}
{{/each}}

art 渲染列表

渲染列表（接口有问题）

<tbody></tbody>

<script type="text/html" id="item">
	{{each}}
		<tr>
			<td>欢迎大家</td>
			<td>
				<button>评论人：{{$value.username}}</button>
  				<button>评论时间：{{$.value.time}}</button>
    		</td>
    	</tr>
	{{/each}}
</script>

<script>
    $.ajax({
        type: 'post',
        url: 'http://www/liulongbin.top:3006/api/addcmt',
        data: {
            username: 'uName',
            content: 'content',
        },
        succrss: function (res) {
            renderList();
        }
    });

    function renderList () {
        $.ajax({
            type: 'get',
            url: 'http://www/liulongbin.top:3006/api/cmtlist',
            success: function (res) {
                if (res.status == 200) {
                    var html = template('item', res.data);
                    document.querySelector('tbody').innerHTML = html;
                }
            }
        })
    }
</script>

案例：二进制文件上传

需求：上传文件进度条。

bootstrap官网：https://v3.bootcss.com

<link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.0.0-beta3/css/bootstrap.min.css" rel="stylesheet">

<input type="file" id="file">
<div class="progress">
    <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"
         style="width: 60%;">
        60%
    </div>
</div>
<div class="box"></div>

<script>
    // 1. 获取页面元素
    var file = document.getElementById('file');
    var bar = document.querySelector('.progress-bar');
    var box = document.querySelector('.box');
    // 2.添加change事件
    file.addEventListener('change', function () {
        // 原生js发送ajax请求
        var formData = new FormData();
        formData.append('attrName', this.files[0]);

        var xhr = new XMLHttpRequest();
        xhr.upload.onprogress = function (ev) {
            // 进度条 = 已上传 / 总量 * 100%
            var r = (ev.loaded / ev.total) * 100 + '%';
            // 进度条百分比
            bar.style.width = r;
            bar.innerHTML = r;
        }

        xhr.open('post', 'localhost:3000/upload');
        xhr.send(formData);

        xhr.onload = function () {
            
            if (xhr.status == 200) {
                var path = JSON.parse(xhr.responseText).path;
                var img = document.createElement('img');
                img.src = path;
                img.onload = function () {
                    box.appendChild(img);
                }
            }
            
        }
    })
</script>