AJAX——模板引擎

最新推荐文章于 2025-01-12 00:00:00 发布

原创最新推荐文章于 2025-01-12 00:00:00 发布 · 456 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#大数据

前端学习专栏收录该内容

4 篇文章

订阅专栏

"本文介绍了如何使用art-template模板引擎来生成HTML页面。首先，需要导入模板引擎，然后定义数据和模板，接着调用template函数进行渲染。在模板语法中，包括了变量输出、条件判断、循环遍历以及过滤器的使用。例如，{{value}

1模板引擎

http://aui.github.io/art-template/zh-cn/index.html

可以根据指定的模板和结构生成完整的HTML页面

2.使用步骤

（1）导入art-template

（2）定义数据

（3）定义模板

（4）调用template函数

（5）渲染HTML页面结构

3.语法标准

{{value}}
{{obj.key}}
{{obj['key']}}
{{a?b:c}}
{{a||b}}
{{a+b}}

4.原文输出

{{@value}}

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

5.条件输出

如果要实现条件输出，则在{{}}中使用if...else../if的方式，进行按需输出

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

{{if V1}}
按需输出的内容V1
{{else if V2}}
按需输出的内容V2
{{/if}}

6.循环输出

在{{}}内通过each语循环数组，当前循环的索引使用$index进行访问，当前的循环项用$value进行访问

{{each arr}}
{{$index}}{{$value}}
{{/each}}

7.过滤器

{{value|filterName}}

定义过滤器的基本语法：

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

注意过滤器一定有return

<div>注册时间{{regTime|fataFormat}}</div>
templates.defaults.exports.dataFormat=function(date){
var y=date.getFullYear();
var m=data.getMonth()+1;
var d=date.getDay();
return y+'-'+m+'-'+d;
}

 <div id="container"></div>
  <!-- 1.导入模板引擎
在window全局就会产生一个函数template('模板id','需要渲染的数据') -->
  <!-- 3.定义模板
  3.1模板的HTML结构必须定义到script中 -->
  <!-- 3.2指定type为text/html -->
<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函数template('模板id', '要渲染的数据')
    var htmlStr = template('tpl-user', data)
    console.log(htmlStr)
    // 5 渲染html页面
    $('#container').html(htmlStr)
  </script>

8.正则表达式

exec()函数用于检查字符串中正则表达式的匹配项，如果字符串中有匹配的值就返回该匹配值，否则返回null

  <script>
    var str = 'hrollxs';
    var pattern = /o/;
    var result = pattern.exec(str);
    console.log(result);
  </script>

8.1 分组，正则表达式中用()包围起来的表示分组

  <script>
    var str = '<div>我是{{name}}</div>'
    var pattern = /{{([a-zA-Z]+)}}/
    var result = pattern.exec(str)
    console.log(result)
  </script>

8.2 字符串的replace操作

replace()函数在字符串中用于用一部分字符串替代另一部分字符串

  <script>
    var str = '<div>我是{{name}}</div>'
    var pattern = /{{([a-zA-Zz]+)}}/
    var patternResult = pattern.exec(str)
    console.log(patternResult)
    str = str.replace(patternResult[0].replace(patternResult[1]))
    console.log(str)
  </script>