art-template模板引擎

岳泽以

发布于 2022-10-26 17:29:14

1.5K0

发布于 2022-10-26 17:29:14

文章被收录于专栏：岳泽以博客岳泽以博客

简介

art-template是一个简约、超快的模板引擎，中文官网首页：http://aui.github.io/art-template/zh-cn/index.html

安装

在浏览器访问：http://aui.github.io/art-template/zh-cn/docs/installation.html

找到文件，点击进入后，鼠标右键，选择“另存为”，将art-template下载到本地，然后通过 <script>标签加载到网页上进行使用。

基本使用

1.使用传统方式渲染UI结构

        var data = {
            title: '<h3>用户信息</h3>',
            name: 'zs',
            age: 20,
            isVIP: true,
            regTime: new Date(),
            hobby: ['吃饭', '睡觉', '打豆豆']

        }
        $(function () {
            $('#name').html(data.name)
            $('#title').html(data.title)
            $('#age').html(data.age)
            $('#isVIP').html(data.isVIP)
            $('#regTime').html(data.regTime)
            var rows = []
            $.each(data.hobby, function (i, item) {
                rows.push('<li>' + item + '</li>')
            })
            $('#hobby').html(rows.join(''))
        })

2.使用art-template使用步骤

导入art-template
定义数据
定义模板
调用template函数
渲染HTML结构

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <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>
    </script>
    <script>
        //2.定义需要渲染的数据
        var data = { name: 'zs', age: 20 }
        //4.调用template函数
        var htmlstr = template('tpl-user', data)
        // console.log(htmlstr);
        $('#container').html(htmlstr)
    </script>
</body>

</html>

标准语法

atr-template提供了 {{}}这种语法格式，在{{}}内可以进行变量输出，或循坏数组等操作，这种{{}}语法在art-template中被称为标准语法。

输出

在{{}}语法中，可以进行变量的输出、对象属性的输出、三元表达式输出、逻辑或输出、加减乘除等表达式输出。

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

例：

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <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">
    <div>
        {{if flag==0}}
        flag的值是0
        {{else if flag===1}}
        flag的值是1
        {{/if}}
    </div>
    </script>

    <script>
        //2.定义需要渲染的数据
        var data = { flag: 0 }
        //4.调用template函数
        var htmlstr = template('tpl-user', data)
        // console.log(htmlstr);
        $('#container').html(htmlstr)
    </script>
</body>

</html>

循环输出

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

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

过滤器

过滤器的本质，就是一个function处理函数。

{{value | filterName}}

过滤器的语法类似管道操作符，它的上一个输出作为下一个输入。

基本语法：

template.defaults.inports.filerName = function(value){/*return处理的结果*/}

案例：

    <h3>{{regTime | dateFormat}}</h3>

定义一个格式化时间的过滤器dateFormat如下：

        template.defaults.imports.dateFormat = function (date) {
            var y = date.getFullYear()
            var m = date.getMonth() + 1
            var d = date.getDate()
            return y + '-' + m + '-' + d
        }

注意：过滤器最后一定要return一个值。

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2022 年 09 月，如有侵权请联系 cloudcommunity@tencent.com 删除

html