前后端交互 —— ajax 之模板引擎03art-template

最新推荐文章于 2022-04-12 11:04:35 发布

xumengxia—xu

最新推荐文章于 2022-04-12 11:04:35 发布

阅读量170

点赞数

分类专栏：前后端交互-Ajax+ http 文章标签： ajax jquery javascript

本文链接：https://blog.csdn.net/qq_56514785/article/details/120430392

版权

前后端交互-Ajax+ http 专栏收录该内容

8 篇文章 1 订阅

订阅专栏

1.模板引擎的基本概念 art-template

渲染UI结构时遇到的问题
通过字符串拼接的形式，来渲染UI结构。
如果UI结构比较复杂，则拼接字符串的时候需要格外注意引号之前的嵌套。且一旦需求发生变化，修改起来也非常麻烦。


模板引擎的好处
减少了字符串的拼接操作
使代码结构更清晰
使代码更易于阅读与维护

art-template的使用步骤
在 {{ }} 语法中，可以进行变量的输出、对象属性的输出、三元表达式输出、逻辑或输出、加减乘除等表达式输出
标准语法 – 原文输出 {{@ value }} 包含了 HTML 标签结构，则需要使用原文输出语法，才能保证 HTML 标签被正常渲染。 

标准语法 – 条件输出
如果要实现条件输出，则可以在 {{ }} 中使用 if … else if … /if 的方式，进行按需输出
如果要实现条件输出，则可以在 {{ }} 中使用 if … else if … /if 的方式，进行按需输出

标准语法 – 循环输出
如果要实现循环输出，则可以在 {{ }} 内，通过 each 语法循环数组，当前循环的索引使用 $index 进行访问，当前的循环项使用 $value 进行访问。
{{each arr}}
    {{$index}} {{$value}}
{{/each}}

标准语法 – 过滤器 将value当做参数传递给后面这个函数filterName
{{value | filterName}}
过滤器语法类似管道操作符，它的上一个输出作为下一个输入。
定义过滤器的基本语法如下：
template.defaults.imports.filterName = function(value){/*return处理的结果*/}

2.正则与字符串操作exec() 函数用于检索字符串中的正则表达式的匹配

如果字符串中有匹配的值，则返回该匹配值，否则返回 null
var str = 'hello'
var pattern = /o/
// 输出的结果["o", index: 4, input: "hello", groups: undefined]
console.log(pattern.exec(str)) 


分组
正则表达式中 ( ) 包起来的内容表示一个分组，可以通过分组来提取自己想要的内容，示例代码如下：
 var str = '<div>我是{{name}}</div>'
 var pattern = /{{([a-zA-Z]+)}}/

 var patternResult = pattern.exec(str)
 console.log(patternResult)
 // 得到 name 相关的分组信息
 // ["{{name}}", "name", index: 7, input: "<div>我是{{name}}</div>", groups: undefined]



字符串的replace函数
replace() 函数用于在字符串中用一些字符替换另一些字符，语法格式如下：
var result = '123456'.replace('123', 'abc') // 得到的 result 的值为字符串 'abc456'

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <!-- 1. 导入模板引擎 -->
  <!-- 在 window 全局，多一个函数，叫做 template('模板的Id', 需要渲染的数据对象) -->
  <script src="./lib/template-web.js"></script>
  <script src="./lib/jquery.js"></script>
</head>

<body>

  <div id="container"></div>

  <!-- 3. 定义模板 -->
  <!-- 3.1 模板的 HTML 结构，必须定义到 script 中 修改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 函数
    var htmlStr = template('tpl-user', data)
    console.log(htmlStr)
    // 5. 渲染HTML结构
    $('#container').html(htmlStr)
  </script>
</body>

</html>

xumengxia—xu

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前后端交互 —— ajax 之模板引擎03art-template

1.模板引擎的基本概念art-template渲染UI结构时遇到的问题通过字符串拼接的形式，来渲染UI结构。如果UI结构比较复杂，则拼接字符串的时候需要格外注意引号之前的嵌套。且一旦需求发生变化，修改起来也非常麻烦。模板引擎的好处减少了字符串的拼接操作使代码结构更清晰使代码更易于阅读与维护art-template的使用步骤在 {{ }} 语法中，可以进行变量的输出、对象属性的输出、三元表达式输出、逻辑或输出、加减乘除等表达式输出标准语法 – 原文输出 {{@ value }}.
复制链接

扫一扫