- A+
所属分类：Web前端
这里只引入一种模板引擎的介绍,更多方法可以查询文档
art-Template 模板引擎介绍
简介：
- artTemplate 是新一代 javascript 模板引擎，它采用预编译方式让性能有了质的飞跃，并且充分利用 javascript 引擎特性，使得其性能无论在前端还是后端都有极其出色的表现。
特性：
- 拥有接近 JavaScript 渲染极限的的性能
- 调试友好：语法、运行时错误日志精确到模板所在行；支持在模板文件上打断点（Webpack Loader）
- 支持 Express、Koa、Webpack
- 支持模板继承与子模板
- 浏览器版本仅 6KB 大小
模板：
- art-template 同时支持两种模板语法。标准语法可以让模板更容易读写；原始语法具有强大的逻辑处理能力。
模板引擎的使用：
1.首先需要引入插件：
- 可以在官网（http://aui.github.io/art-template/zh-cn/）去下载‘template-web.js’
- 引入方式：
<script src="./template-web.js"></script>
2.语法:
- 输出:
- 标准语法
{{value}} {{data.key}} {{data['key']}} {{a ? b : c}} {{a || b}} {{a + b}} - 原始语法 <%= value %> <%= data.key %> <%= data['key'] %> <%= a ? b : c %> <%= a || b %> <%= a + b %> - 条件：
- 标准语法
{{if value}} ... {{/if}} {{if v1}} ... {{else if v2}} ... {{/if}} - 原始语法 <% if (value) { %> ... <% } %> <% if (v1) { %> ... <% } else if (v2) { %> ... <% } %> - 循环：
- 标准语法
{{each target}} {{$index}} {{$value}} {{/each}} - 原始语法 <% for(var i = 0; i < target.length; i++){ %> <%= i %> <%= target[i] %> <% } %> - 注：另有其他语法可以查看官网（http://aui.github.io/art-template/zh-cn/）文档
核心方法:
template(filename, content): 根据模板名渲染模板。返回动态生成的页面结构
案例：使用模板引擎简写语法渲染首页
<html lang="en"> <head> <meta charset="UTF-8"> <title>Hero - Admin</title> <link rel="stylesheet" href="./css/bootstrap.css"> <style> .hero-list img { width: 50px; height: 50px; display: block } .hero-list td { height: 50px; line-height: 50px; } </style> </head> <body> <header> <div class="page-header container"> <h1>王者荣耀 <small>英雄管理器</small></h1> </div> </header> <div class="container hero-list"> <table class="table table-hover"> <thead> <tr> <th>编号</th> <th>名称</th> <th>性别</th> <th>头像</th> <th>操作</th> </tr> </thead> <tbody id="tbody"> <tr> <td>1</td> <td>jack</td> <td>男</td> <td><img src="http://127.0.0.1:3002/images/1.jpg" alt="模板引擎"></td> <td><a href="#">查看</a> <a href="javascript:;">修改</a> <a href="javascript:;">删除</a></td> </tr> </tbody> </table> </div> <!-- 下面创建页面动态结构所需要的模板 --> <!--type属性就是规范了里面的代码以何种语法进行解析 ，script默认的type为text/javascript,script有默认的type,如果设置类型为text/template，那么浏览器知道这不是js,也不会按js语法进行解析， 同时它还知道这是一个模板结构，所以会按模板结构的语法处理 --> <script type="text/template" id='listTemp'> {{each data as value index}} <tr> <td>{{i+1}}</td> <td>{{value.name}}</td> <td>{{value.gender}}</td> <td><img src="http://127.0.0.1:3002/images/{{value.img}}"></td> <td><a href="#">查看</a> <a href="javascript:;">修改</a> <a href="javascript:;">删除</a></td> </tr> {{/each}} </script> <!-- 引入jq --> <script src="./js/jquery.min.js"></script> <!-- 引入模板引擎 --> <script src="./js/template-web.js"></script> <script> $(function () { // 页面一加载就发起ajax请求 $.ajax({ type: 'get', url: 'http://127.0.0.1:3002/getalldata', dataType: 'json', success: function (result) { console.log(result) if (result.code == 200) { // 调用模板引擎，生成动态结构 var html = template('listTemp', result) // 将动态结构填充到页面指定结构 $('#tbody').html(html) } } }) }) </script> </body> </html> 
