前端经常使用模板引擎- artTemplate

时间 2021-08-12

标签 html 前端 vue web npm 浏览器 app 布局性能学习栏目 HTML 繁體版

原文原文链接

　　咱们在用H5+Css3布局页面的时候，经过接口展现数据到页面的时候，若是数据少还好，有时候ul -> li有多个的时候只能循环接口返回的数据而后一个一个去展现。html

　　前段时间在无心中学习到一个新东西 art-template 前端模板引擎这个东西能够像vue展现数据同样很方便的进行数据展现还有一个叫 thymeleaf (我还没用过)前端

　　1.介绍vue

art-template 是一个简约、超快的模板引擎。它采用做用域预声明的技术来优化模板渲染速度，从而得到接近 JavaScript 极限的运行性能，而且同时支持 NodeJS 和浏览器。
使用art-template也便于维护代码，之前咱们进行数据渲染的时候是经过字符串拼接而后再经过append的方式追加到数据源id上，如今只须要在html页面中写循环就能够实现了。

　　2. 安装web

　　1.直接去官网下载或者点击这个连接 https://unpkg.com/art-template@4.13.2/lib/template-web.jsnpm

　　　2.npm安装浏览器

　　　　　npm install art-template --save-devapp

　3.语法
　1.art-template 支持标准语法与原始语法。标准语法可让模板易读写，而原始语法拥有强大的逻辑表达能力。
　 2. 标准语法支持基本模板语法以及基本 JavaScript 表达式；原始语法支持任意 JavaScript 语句，这和 EJS 同样

　　下面只说标准语法
输出用 {{}}

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

条件判断 {{if}} ... {{/if}}

{{if value}} ... {{/if}}
{{if v1}} ... {{else if v2}} ... {{/if}}

循环语法
　　第一种 {{each datalit value i}} ... {{/each}}  ** value 和 i 的位置不能互换

{{each datalist value i}}
    {{i + 1}} {{value}}
{{/each}}

　　第二种 {{each datalist}} ... {{/each}}

{{each datalist}}
    {{$index}} {{$value}}
{{/each}}


4.案例

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="template-web.js"></script>
    </head>

    <body>
        <div id="content"></div>   
        <script type="text/html" id="test">  // type="text/html"的模板 id用于在js中将数据与模板作关联
　　　　　　　　// 语法中的第一个 数据展现 ---- {{}}
            <h1>{{ title }}</h1>
            // 语法中的循环两种写法
            <ul>
                {{ each list value i }}
                    <li>索引 {{i+ 1 }}: {{ value }}</li>
                {{ /each }}
                
                {{ each list }}
                    <li>索引 {{$index+1}}: {{$value}} </li>
                {{ /each }}
            </ul>
            
            <ul>
　　　　　　　　　　// 语法中的 if 判断
                {{if c== 100}}
                    <ul>
                        {{each person}}
                            <li>
                                编号：{{$index+1}} -- 姓名: {{$value.name}} -- 年龄: {{ $value.age}}
                            </li>
                        {{/each}}
                    </ul>
                {{/if}}
            </ul>
        </script>

        <script>
            var data = {
                title: 'hello world',
                list: ['文艺', '博客', '摄影', '电影', '明耀', '旅行', '吉他'],
                c: 100,
                person: [
                    {name: 'jack', age: 18},
                    {name: 'tom', age: 19},
                    {name: 'jerry', age: 20},
                    {name: 'kid', age: 21},
                    {name: 'jade', age: 22}
                ]
            };
            var html = template('test', data);  // test是上边的模板 data是要用于展现的数据
            document.getElementById('content').innerHTML = html;  // 经过id选择器获取元素 把模板展现的位置
        </script>
    </body>

</html>

看看效果吧

自我感受仍是很方便，很实用的一个模板，你们有机会能够试试