利用art-template模板引擎，处理响应数据渲染

最新推荐文章于 2023-03-17 13:56:16 发布

xiaopihong0325

最新推荐文章于 2023-03-17 13:56:16 发布

阅读量1k

点赞数

分类专栏： ajax 文章标签： javascript ajax

本文链接：https://blog.csdn.net/weixin_45849779/article/details/107716223

版权

ajax 专栏收录该内容

9 篇文章 2 订阅

订阅专栏

利用art-template模板引擎，处理响应数据渲染

1.什么是处理响应数据渲染
2.模板引擎的使用步骤
3.如何准备一个模板
4.art-template的介绍
5.使用art-template将数据渲染到页面案例
6.art-template下载地址

1.什么是处理响应数据渲染

就是服务端响应数量庞大，我们用原生的DOM操作一个个渲染到文档相当麻烦，这时候我们就会用数据渲染的模板引擎，只要我们给它数据和模板，就能快速渲染到文档中，省下许多DOM操作的代码。

2.模板引擎的使用步骤

选择一个模板引擎
下载模板引擎JS文件
引入到页面中
准备一个模板
准备一个数据
通过模板引擎的JS提供的一个函数将模板和数据整合得到渲染结果HTML
将渲染结果的HTML 设置到默认元素的 innerHTML 中

3.如何准备一个模板

模板准备有两种方式：

1.在JS变量中写模板，不推荐（原因：如果将模板写到JS中，维护不方便，不能换行，没有颜色区分）。

2.使用script标签写模板，推荐（script标签内容不会显示在界面）。
最重要的是：
如果script标签 type 不等于 text/javascript 的话，内部的内容不会作为 JavaScript 执行，所以使用模板引擎我们的script标签的type会写text/x-art-template，x代表自定义，art-template的是我们使用的模板名称。

4.art-template的介绍

art-template 是一个简约、超快的模板引擎。

5.使用art-template将数据渲染到页面案例

注意：这些数据都是我从本地服务端请求的数据

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <!-- 引入art-template -->
    <script src="./template-web.js"></script>
</head>

<body>
    <table id="demo" border="1" cellpadding='10' cellspacing='0'></table>
    <!-- 准备一个模板 -->
    <script type="text/x-art-template" id="tmpl">
        {{each comments}}
        <!-- each 内部 $value 拿到的是当前被遍历的那个元素 -->
        <tr>
          <td>{{$value.author}}</td>
          <td>{{$value.content}}</td>
          <td>{{$value.created}}</td>
        </tr>
        {{/each}}
    </script>
    <script>
        var xhr = new XMLHttpRequest();
        xhr.open('GET', '15test.php');
        xhr.send();
        xhr.onreadystatechange = function () {
            if (this.readyState !== 4) return;
            var res = JSON.parse(this.responseText);
            // 模板所需数据
            var context = {
                comments: res.data
            };
            // 借助模板引擎的API 渲染数据
            var html = template('tmpl', context);
            document.getElementById('demo').innerHTML = html;
        };
    </script>
</body>

</html>

再配上一张数据渲染之后的图片：
在这里插入图片描述

6.art-template下载地址

art-template下载地址

xiaopihong0325

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
利用art-template模板引擎，处理响应数据渲染

利用art-template模板引擎，处理响应数据渲染1.什么是处理响应数据渲染2.模板引擎的使用步骤3.如何准备一个模板4.art-template的介绍5.使用art-template将数据渲染到页面案例6.art-template下载地址1.什么是处理响应数据渲染就是服务端响应数量庞大，我们用原生的DOM操作一个个渲染到文档相当麻烦，这时候我们就会用数据渲染的模板引擎，只要我们给它数据和模板，就能快速渲染到文档中，省下许多DOM操作的代码。2.模板引擎的使用步骤选择一个模板引擎下载模板引擎
复制链接

扫一扫