欢迎光临
我的个人博客网站

模板引擎

这里只引入一种模板引擎的介绍,更多方法可以查询文档

art-Template 模板引擎介绍
简介:

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

特性:

  • 拥有接近 JavaScript 渲染极限的的性能
  • 调试友好:语法、运行时错误日志精确到模板所在行;支持在模板文件上打断点(Webpack Loader)
  • 支持 Express、Koa、Webpack
  • 支持模板继承与子模板
  • 浏览器版本仅 6KB 大小

模板:

  • art-template 同时支持两种模板语法。标准语法可以让模板更容易读写;原始语法具有强大的逻辑处理能力。

模板引擎的使用:
1.首先需要引入插件:

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] %>             <% } %> 

核心方法:
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"></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> 
赞(0) 打赏
未经允许不得转载:张拓的天空 » 模板引擎
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

专业的IT技术经验分享 更专业 更方便

联系我们本站主机

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏