Ajax art-template模板引擎

HarkerYX

于 2021-05-11 18:52:44 发布

阅读量198

点赞数

CC 4.0 BY-SA版权

分类专栏：【 Web前端开发】

本文链接：https://blog.csdn.net/yexiangCSDN/article/details/116665257

【 Web前端开发】专栏收录该内容

190 篇文章 ¥199.90 ¥299.90

订阅专栏

本文介绍了如何使用Ajax与art-template模板引擎提高前端UI渲染效率。讲解了模板引擎解决字符串拼接问题，阐述了art-template的高效性能，并详细说明了art-template的安装、基本使用和标准语法，包括变量输出、条件与循环操作、原文输出和过滤器应用。同时，文章探讨了模板引擎的实现原理，涉及正则表达式和字符串操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

我是表哥Harker，表妹我来咯~

之前学习JS的时候，如要插入html，我们都是一个个手动字符串去拼接，但也不是不行，只是相比而言效率比较低，Ajax 提供了 art-template模板引擎能够提高效率，让我们学习吧！

1、渲染UI结构时遇到的问题

var rows = []
$.each(res.data, function (i, item) { // 循环拼接字符串
    rows.push('<li class="list-group-item">'+ item.content +'<span class="badge cmt-date">评论时间：'+ item.time +'</span><span class="badge cmt-person">评论人：'+ item.username +'</span></li>')
})
$('#cmt-list').empty().append(rows.join('')) // 渲染列表的UI结构