【artTemplate】artTemplate模板引擎入门（一）：简洁语法的使用

系统管理员 2022-05-22 04:27 249阅读 0赞

artTemplate 是新一代 javascript 模板引擎，它采用预编译方式让性能有了质的飞跃，并且充分利用 javascript 引擎特性，使得其性能无论在前端还是后端都有极其出色的表现。  
可以使用

#### arttemplate.js 简洁语法版 ####

#### arttemplate-native.js 原生语法版（支持js语法） ####

本篇先介绍 **简洁语法** 版的基本使用

##### 1.下载并引入js文件 #####

##### 2.定义一段HTML代码作为接收模板的盒子 #####

<div id="box"></div>

##### 3.定义一个渲染模板 #####

//注意 <script>的type属性可以随意设置，除了 type="text/javascript"，目的是为了不让他像普通js代码一样被编译 <script type="text/html" id="abc"> <h1>{ { title}}</h1> <ul> { { each arr as value key }} <li>{ { value}}</li> { { /each}} </ul> <ol> { { each json as value key}} <li> { { value}} </li> { { /each}} </ol> </script>

##### 4.将数据和模板关联 #####

arttemplate模板内置一个叫做template()方法，接收两个参数，使用方式：**template(“模板id”, 要渲染的数据);**，它的返回值可以简单的认为是一段html代码，

结果如图  
![这里写图片描述][70]

--------------------

### 遍历json数据 ###

###### 1.html代码相同，不做赘述 ######

###### 2.定义模板 ######

##### 3.关联数据和模板 #####

--------------------

### 模板内包含模板 include() ###

##### 1.html代码相同，不做赘述 #####

##### 2.定义模板1和模板2 #####

//模板1 <script type="text/html" id="tpl1"> { { title}} { { include "tpl2" }} </script> //模板2 <script type="text/html" id="tpl2"> <ul> { { each json as value key }} <li>{ { key}}--->{ { value }}</li> { { /each}} </ul> </script>

##### 3.渲染模板&关联数据 #####

#### 简介语法 简单用法演示完毕 ####

[70]: /images/20220522/06313638e6a8426aab53b2ff2f93369f.png