artTemplate模版引擎的使用

时间:2022-01-08 05:32:11

artTemplate:

template.js 一款 JavaScript 模板引擎,简单,好用。提供一套模板语法,用户可以写一个模板区块,每次根据传入的数据,生成对应数据产生的HTML片段,渲染不同的效果。

1、特性

(1)、性能卓越,拥有接近 JavaScript 渲染极限的的性能, 执行速度通常是 Mustache 的 20 多倍(性能测试)

(2)、调试友好:语法、运行时错误日志精确到模板所在行;支持在模板文件上打断点(Webpack Loader)

(3)、对 NodeJS Express 、Koa、Webpack友好支持

(4)、支持模板继承与子模板

(5)、支持include语句

(6)、可在浏览器端实现按路径加载模板(详情)

(7)、支持预编译,可将模板转换成为非常精简的 js 文件

(8)、模板语句简洁,无需前缀引用数据,有简洁版本与原生语法版本可选

(9)、支持所有流行的浏览器

2、语法

原生语法: ①引入插件文件:

<script src="template-native.js"> </script>

② 逻辑表达式:<% %> 输出表达式:<%= content %>---输出是字符串 里面可以写js代码、变量、判断...

简洁语法:

(1)、使用

引用简洁语法的引擎版本,例如: <script src="dist/template.js"></script>

(2)、表达式

{{ }} 符号包裹起来的语句则为模板的逻辑表达式。

(3)、输出表达式

对内容编码输出: {{content}} 不编码输出: {{#content}} 编码可以防止数据中含有 HTML 字符串,避免引起 XSS 攻击。

(4)、条件表达式

{{if admin}}

·<p> admin </p>

{{else if code > 0}}

· <p>master</p>

{{else}}

· <p>error!</p>

{{/if}}

(5)、遍历表达式

无论数组或者对象都可以用 each 进行遍历。

{{each list as value index}}
  <li>{{index}} - {{value.user}}</li>
{{/each}}

可以被简写为:

 {{each list}}
<li> {{$index}} - {{$value.user}} </li>
{{/each}}

(6)、模板包含表达式

用于嵌入子模板。

{{include 'template_name'}}

子模板默认共享当前数据,亦可以指定数据:{{include 'template_name' news_list}}

3、使用:

<!DOCTYPE html>
<html>
  <head>
      <meta charset="UTF-8">
      <title></title>
      <script type="text/javascript" src="js/template.js" ></script>
  </head>
   
  <body>
 
      <div id="container"></div>
       
       
      // 模版
      <script type="text/html" id="div">
          <h1>{{name}}</h1>
          <ul>
              {{each lang}}
              <li>语言:{{$value.title}} 定义:{{$value.add}}</li>
              {{/each}}
          </ul>
      </script>
       
       
    // 数据
      <script type="text/javascript">
          var data = {
              name:"前端语言",
              lang:[{
                  title:"html",
                  add:"超文本标记语言"
              },{
                  title:"css",
                  add:"层叠样式表"
              },{
                  title:"javaScript",
                  add:"添加动态特效"
              }]
          }
          var html = template('div',data);
          document.getElementById("container").innerHTML = html;
      </script>
  </body>
</html>

注意:在模板中,只能使用json对象,而不能使用json数组,因为art-template里只能获取json对象里的属性。