模板引擎art-template

最新推荐文章于 2023-08-09 11:02:46 发布

清辞-

最新推荐文章于 2023-08-09 11:02:46 发布

阅读量341

点赞数 3

分类专栏：拓展知识文章标签：前端

本文链接：https://blog.csdn.net/hccccccccccccc/article/details/118976339

版权

拓展知识专栏收录该内容

6 篇文章 0 订阅

订阅专栏

1什么是模板引擎

art-template (aui.github.io) 大部分都在原链接中，在此我只指出几条主要的内容

art-template 是一个简约、超快的模板引擎。

它采用作用域预声明的技术来优化模板渲染速度，从而获得接近 JavaScript 极限的运行性能，并且同时支持 NodeJS 和浏览器。

2模板引擎的实现原理

function template(id, data) {
  var str = document.getElementById(id).innerHTML
  var pattern = /{{\s*([a-zA-Z]+)\s*}}/

  var pattResult = null
  while (pattResult = pattern.exec(str)) {
    str = str.replace(pattResult[0], data[pattResult[1]])
  }

  return str
}

3模板引擎的使用方法

art-template提供了{{}}这种语法格式，在其中可以进行变量输出或者循环数组，这种语法称之为标准语法。

<!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 中 -->
    <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>

对照上述代码进行细致讲解

调用template函数，传入一个对象和一个script标签的id，此时会自动进行匹配，把对象里面的每个属性与text/html这个script里面的内容进行匹配。

其中可以包含变量的输出，对象属性的输出，三元表达式的输出，逻辑的输出，加减乘法的输出。就比如name,age,flag都是可以直接输出的。

如果需要输出的value值中，包含HTML结构比如<h3></h3>则此时需要使用原文输出语句，为@test

如果需要实现条件输出，则需要使用if else if 最后用/if结尾，如上代码所示。

如果要实现循环输出，{{each arr}} {{/each}}其中当前循环的索引用$index表示，当前的循环项用$value表示。

在此讲一讲过滤器的作用，过滤器就相当于一个function函数。可以理解为regTime的输出作为dataFormat的输入，然后调用过滤器函数。

清辞-

关注

3
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
模板引擎art-template

目录1什么是模板引擎2模板引擎的实现原理3模板引擎的使用方法1什么是模板引擎art-template (aui.github.io)大部分都在原链接中，在此我只指出几条主要的内容art-template 是一个简约、超快的模板引擎。它采用作用域预声明的技术来优化模板渲染速度，从而获得接近 JavaScript 极限的运行性能，并且同时支持 NodeJS 和浏览器。2模板引擎的实现原理function template(id, data) { var str = d.
复制链接

扫一扫