art-template模板引擎

news2025/4/5 3:00:12

1、模板引擎的基本概念

1.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结构

上述代码是通过字符串拼接的形式,来渲染UI结构。

如果UI结构比较复杂,则拼接字符串的时候需要格外注意引号之前的嵌套。且一旦需求发生变化,修改起来也非常麻烦

1.2、什么是模板引擎

        模板引擎,顾名思义,它可以根据程序员指定的模板结构数据,自动生成一个完整的HTML页面。

1.3、模板引擎的好处 

  • 减少了字符串的拼接操作
  • 使代码结构更清晰
  • 使代码更易于阅读与维护

2、art-template简介

art-template 是一个简约、超快的模板引擎。中文官网首页为 art-template

 

3、art-template的安装

        在浏览器中访问 安装 - art-template 页面,找到下载链接后,鼠标右键,选择“链接另存为”,将 art-template 下载到本地,然后,通过 <script> 标签加载到网页上进行使用。

 

4、art-template模板引擎的基本使用

(1)使用传统方式渲染UI结构

<!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>
  <script src="./lib/jquery.js"></script>
</head>

<body>
  <div id="title"></div>
  <div>姓名:<span id="name"></span></div>
  <div>年龄:<span id="age"></span></div>
  <div>会员:<span id="isVIP"></span></div>
  <div>注册时间:<span id="regTime"></span></div>
  <div>爱好:
    <ul id="hobby">
      <li>爱好1</li>
      <li>爱好2</li>
    </ul>
  </div>

  <script>
    var data = {
      title: '<h3>用户信息</h3>',
      name: 'zs',
      age: 20,
      isVIP: true,
      regTime: new Date(),
      hobby: ['吃饭', '睡觉', '打豆豆']
    }


    $(function () {
      $('#name').html(data.name)
      $('#title').html(data.title)
      $('#age').html(data.age)
      $('#isVIP').html(data.isVIP)
      $('#regTime').html(data.regTime)

      var rows = []
      $.each(data.hobby, function (i, item) {
        rows.push('<li>' + item + '</li>')
      })
      $('#hobby').html(rows.join(''))
    })
  </script>
</body>

</html>

(2) art-template的使用步骤

  1. 导入 art-template
  2. 定义数据
  3. 定义模板
  4. 调用 template 函数
  5. 渲染HTML结构
<!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>
    <!-- 1. 导入模板引擎 -->
    <!-- 在 window 全局,多一个函数,叫做 template('模板的Id', 需要渲染的数据对象) -->
    <script src="./lib/template-web.js"></script>
    <script src="./lib/jquery.js"></script>
</head>

<body>

    <div id="container"></div>

    <!-- 3. 定义模板 -->
    <!-- 3.1 模板的 HTML 结构,必须定义到 script 中 -->
    <script type="text/html" id="tpl-user">
        <h1>{{name}} ------ {{age}}</h1>
        {{@ test}}

        <div>
            {{if flag === 0}}
            flag的值是0
            {{else if flag === 1}}
            flag的值是1
            {{/if}}
        </div>

        <ul>
            {{each hobby}}
            <li>索引是:{{$index}},循环项是:{{$value}}</li>
            {{/each}}
        </ul>

        <h3>{{regTime | dateFormat}}</h3>
    </script>

    <script>
        // 定义处理时间的过滤器
        template.defaults.imports.dateFormat = function (date) {
            var y = date.getFullYear()
            var m = date.getMonth() + 1
            var d = date.getDate()

            return y + '-' + m + '-' + d
        }


        // 2. 定义需要渲染的数据
        var data = {
            name: 'zs',
            age: 20,
            test: '<h3>测试原文输出</h3>',
            flag: 1,
            hobby: ['吃饭', '睡觉', '写代码'],
            regTime: new Date()
        }

        // 4. 调用 template 函数
        var htmlStr = template('tpl-user', data)
        console.log(htmlStr)
        // 5. 渲染HTML结构
        $('#container').html(htmlStr)
    </script>
</body>

</html>

5、art-template标准语法

5.1、什么是标准语法

        art-template 提供了 {{ }} 这种语法格式,在 {{ }} 内可以进行变量输出,或循环数组等操作,这种 {{ }} 语法在 art-template 中被称为标准语法。

5.2、标准语法 - 输出

(1){{value}}

(2){{obj.key}}

(3){{obj['key']}}

(4){{a ? b : c}}

(5){{a || b}}

(6){{a + b}}

        在 {{ }} 语法中,可以进行变量的输出、对象属性的输出、三元表达式输出、逻辑或输出、加减乘除等表达式输出。

5.3、标准语法 原文输出

{{@ value }}

        如果要输出的 value 值中,包含了 HTML 标签结构,则需要使用原文输出语法,才能保证 HTML 标签被正常渲染。

5.4、标准语法 条件输出

如果要实现条件输出,则可以在 {{ }} 中使用 ifelse if /if 的方式,进行按需输出。

{{if value}} 按需输出的内容 {{/if}}

{{if v1}} 按需输出的内容 {{else if v2}} 按需输出的内容 {{/if}}

5.5、标准语法 循环输出

        如果要实现循环输出,则可以在 {{ }} 内,通过 each 语法循环数组,当前循环的索引使用 $index 进行访问,当前的循环项使用 $value 进行访问。

{{each arr}}

    {{$index}} {{$value}}

{{/each}}

5.6、标准语法 过滤器

过滤器的本质,就是一个 function 处理函数。 

{{value | filterName}}

过滤器语法类似管道操作符,它的上一个输出作为下一个输入。

定义过滤器的基本语法如下:

template.defaults.imports.filterName = function(value){/*return处理的结果*/}

5.7、案例

<!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>
    <!-- 1. 导入模板引擎 -->
    <!-- 在 window 全局,多一个函数,叫做 template('模板的Id', 需要渲染的数据对象) -->
    <script src="./lib/template-web.js"></script>
    <script src="./lib/jquery.js"></script>
</head>

<body>

    <div id="container"></div>

    <!-- 3. 定义模板 -->
    <!-- 3.1 模板的 HTML 结构,必须定义到 script 中 -->
    <script type="text/html" id="tpl-user">
        <h1>{{name}} ------ {{age}}</h1>
        {{@ test}}

        <div>
            {{if flag === 0}}
            flag的值是0
            {{else if flag === 1}}
            flag的值是1
            {{/if}}
        </div>

        <ul>
            {{each hobby}}
            <li>索引是:{{$index}},循环项是:{{$value}}</li>
            {{/each}}
        </ul>

        <h3>{{regTime | dateFormat}}</h3>
    </script>

    <script>
        // 定义处理时间的过滤器
        template.defaults.imports.dateFormat = function (date) {
            var y = date.getFullYear()
            var m = date.getMonth() + 1
            var d = date.getDate()

            return y + '-' + m + '-' + d
        }


        // 2. 定义需要渲染的数据
        var data = {
            name: 'zs',
            age: 20,
            test: '<h3>测试原文输出</h3>',
            flag: 1,
            hobby: ['吃饭', '睡觉', '写代码'],
            regTime: new Date()
        }

        // 4. 调用 template 函数
        var htmlStr = template('tpl-user', data)
        console.log(htmlStr)
        // 5. 渲染HTML结构
        $('#container').html(htmlStr)
    </script>
</body>

</html>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/136170.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

C++ 使用Socket实现主机间的UDP/TCP通信

前言 完整代码放到github上了&#xff1a;cppSocketDemo 服务器端的代码做了跨平台&#xff08;POSIX和WINDOWS&#xff09;&#xff0c;基于POSIX平台&#xff08;Linux、Mac OS X、PlayStation等&#xff09;使用sys/socket.h库&#xff0c;windows平台使用winsock2.h库。 客…

STM32配置LED模块化

文章目录前言一、LED的模块化二、GPIO初始化详细解析三、LED代码封装总结前言 本篇文章将带大家深入了解GPIO的配置&#xff0c;并带大家实现LED模块化编程。 一、LED的模块化 什么叫模块化编程&#xff1f;我的理解就是每一个模块都分别写成对应的.c和.h文件&#xff0c;有…

S32K144—从0到1一个MBD模型的诞生

一个MBD模型的诞生&#xff0c;分为以下几步&#xff1a; 1、连接好硬件S32K144 EVB 2、选择一个合适的工作空间&#xff0c;新建一个simulink模型&#xff0c;保存 3、在模型中拖入模块&#xff1a; MBD_S32K1xx_Config_Information Digital_Input_ISR Periodic_Interrupt…

C++ 设计模式

设计模式序创建型模式工厂方法模式抽象工厂模式单例模式建造者模式&#xff08;生成器模式&#xff09;原型模式结构型模式适配器模式装饰器代理模式外观模式桥接模式组合模式&#xff08;部分--整体模式&#xff09;享元模式行为型模式策略模式模板模式观察者模式迭代器模式责…

对抗js前端加密的万能方法

1、前言 现在越来越多的网站采用全报文加密&#xff0c;测试的时候需要逆向提取加密算法以及密钥&#xff0c;过程十分繁琐和复杂。本文提供一种更为简单快捷的方法来解决此问题。 原理大致如下&#xff1a;使用浏览器的Override Hook加密前的数据&#xff0c;配置代理地址发…

[Linux]Linux编译器-gcc/g++

&#x1f941;作者&#xff1a; 华丞臧. &#x1f4d5;​​​​专栏&#xff1a;【LINUX】 各位读者老爷如果觉得博主写的不错&#xff0c;请诸位多多支持(点赞收藏关注)。如果有错误的地方&#xff0c;欢迎在评论区指出。 推荐一款刷题网站 &#x1f449; LeetCode刷题网站 文…

SpringBoot+Redis(官方案例)

在线文档项目结构 1.源码克隆&#xff1a;git clone https://github.com/spring-guides/gs-messaging-redis.git 2.包含两个项目initial和complete&#xff0c;initial可以根据文档练习完善&#xff0c;complete是完整项目 3.功能描述&#xff1a;构建应用程序&#xff0c;使用…

【谷粒商城基础篇】商品服务:商品维护

谷粒商城笔记合集 分布式基础篇分布式高级篇高可用集群篇简介&环境搭建项目简介与分布式概念&#xff08;第一、二章&#xff09;基础环境搭建&#xff08;第三章&#xff09;整合SpringCloud整合SpringCloud、SpringCloud alibaba&#xff08;第四、五章&#xff09;前端知…

xxx.lua入门编程

lua入门级编程,openresty的前置技能lua入门级编程,openresty的前置技能 看上图 lua示例&#xff1a; 入门示例 print("hello world!") local arr {"java","mysql","oracle"}; local map {usernamezhangsan,password123}; local fu…

Debezium 同步 PostgreSQL 数据到 RocketMQ 中

1.RocketMQ Connect概览 RocketMQ Connect是RocketMQ数据集成重要组件&#xff0c;可将各种系统中的数据通过高效&#xff0c;可靠&#xff0c;流的方式&#xff0c;流入流出到RocketMQ&#xff0c;它是独立于RocketMQ的一个单独的分布式&#xff0c;可扩展&#xff0c;可容错系…

字节二面:Redis 的大 Key 对持久化有什么影响?

Redis 的持久化方式有两种&#xff1a;AOF 日志和 RDB 快照。 所以接下来&#xff0c;针对这两种持久化方式具体分析分析。 大 Key 对 AOF 日志的影响 先说说 AOF 日志三种写回磁盘的策略 Redis 提供了 3 种 AOF 日志写回硬盘的策略&#xff0c;分别是&#xff1a; Always&am…

Git(四) - Git 分支操作

​​​​​​​ 一、什么是分支 在版本控制过程中&#xff0c;同时推进多个任务&#xff0c;为每个任务&#xff0c;我们就可以创建每个任务的单独分支。使用分支意味着程序员可以把自己的工作从开发主线上分离开来&#xff0c;开发自己分支的时候&#xff0c;不会影响主线分支…

前端面试常考 | js原型与原型链

文章目录一. 什么是原型?二. 什么是原型链?一. 什么是原型? 在js中所有的引用类型都有一个__proto__(隐式原型)属性&#xff0c;属性值是一个普通的对象。 而在js中的引用类型包括&#xff1a;Object&#xff0c;Array&#xff0c;Date&#xff0c;Function 而所有函数都有…

基于K8s的DevOps平台实践(二)

文章目录1. 流水线入门&#x1f351; 流水线基础语法&#x1f351; 脚本示例&#x1f351; 脚本解释&#x1f351; Blue Ocean2. Jenkinsfile实践&#x1f351; 演示一&#x1f351; 演示二&#x1f351; 演示三&#x1f351; 演示四&#x1f351; 总结3. 多分支流水线实践&…

BEV视觉3D感知算法梳理

1. 基于BEV空间的自动驾驶感知任务 最近&#xff0c;基于BEV空间下的感知任务已经涌现出了众多优秀算法&#xff0c;并在多个自动驾驶公开数据集&#xff08;KITTI&#xff0c;Waymo&#xff0c;nuScenes&#xff09;上取得了非常不错的成绩。根据自动驾驶汽车上安装的传感器类…

【从零开始学习深度学习】37. 深度循环神经网络与双向循环神经网络简介

目录1. 深度循环神经网络2. 双向循环神经网络总结1. 深度循环神经网络 之前介绍的循环神经网络只有一个单向的隐藏层&#xff0c;在深度学习应用里&#xff0c;我们通常会用到含有多个隐藏层的循环神经网络&#xff0c;也称作深度循环神经网络。下图演示了一个有LLL个隐藏层的…

数字化时代,全方位解读商业智能BI

商业智能BI是一种通用的数据类技术解决方案&#xff0c;不会因为行业BI没有进行针对性开发而出现不适配、无法使用的情况。同时&#xff0c;也正因为商业智能BI核心是数据&#xff0c;只要企业有数据沉淀&#xff0c;不管是哪些行业BI商业智能都能发挥出作用。 不过考虑到不同…

文件IO操作开发笔记(一):使用Qt的QFile对磁盘文件存储进行性能测试以及测试工具

文为原创文章&#xff0c;转载请注明原文出处 本文章博客地址&#xff1a;https://hpzwl.blog.csdn.net/article/details/128438303 红胖子(红模仿)的博文大全&#xff1a;开发技术集合&#xff08;包含Qt实用技术、树莓派、三维、OpenCV、OpenGL、ffmpeg、OSG、单片机、软硬结…

portraiture2023智能磨皮修饰滤镜插件中文版

在人像后期修图的时候免不了需要进行磨皮处理&#xff0c;很多人在挑选磨皮软件的时候都不知道该如何选择&#xff0c;今天的文章就来带大家看看磨皮软件哪个好&#xff0c;能磨皮的修图软件和插件!借助磨皮软件即使是新手也能做出高级的人像图片&#xff0c;下面挑选了几款好用…

Java 并发编程知识总结【五】

6. 线程中断与 LockSupport 6.1 线程中断机制 大厂&#xff08;蚂蚁金服&#xff09;面试题&#xff1a; 什么是中断&#xff1f; 首先&#xff0c;一个线程不应该由其他线程来强制中断或停止&#xff0c;而是应该由线程自己自行停止。所以&#xff0c;Thread.stop, Thread.…