art-template使用

最新推荐文章于 2024-09-11 17:25:00 发布

star@田兴

最新推荐文章于 2024-09-11 17:25:00 发布

阅读量1.1k

点赞数 1

分类专栏： node

本文链接：https://blog.csdn.net/weixin_43638968/article/details/106212902

版权

node 专栏收录该内容

19 篇文章 4 订阅

订阅专栏

1 介绍：

art-template 是一个简约、超快的模板引擎。
它采用作用域预声明的技术来优化模板渲染速度，从而获得接近 JavaScript 极限的运行性能，并且同时支持 NodeJS 和浏览器。

2 模板语法：

art-template 同时支持两种模板语法。

标准语法可以让模板更容易读写；
原始语法具有强大的逻辑处理能力。

标准语法

{{if user}}
<h2>{{user.name}}</h2>
{{/if}}

原始语法(极似ejs)

<% if (user) { %>
<h2><%= user.name %></h2>
<% } %>

3 安装

安装方法:

通过npm安装: npm install art-template --save
下载安装
在浏览器中编译
因为浏览器不支持文件系统，所以 template(filename, data) 不支持传入文件路径，它内部使用 document.getElementById(filename).innerHTML 来获取模板，例如：

<!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>
    <!-- 引入template-web.js -->
    <script src="./node_modules/art-template/lib/template-web.js"></script>
</head>
<body>
    <div id="container"></div>
    <!-- 创建 script 标签创建模板,注意下面几点 -->
    <!-- 1. type="text/该斜杠后可以是 html,template... 不是script即可)" -->
    <!-- 2. 给 script 标签添加 id ，此 id 即为模板 id -->
    <!-- 3.模板 script 标签必须在 template() 方法调用的 script 标签之前 -->
    <script type="text/html" id="tpl">
        {{if user}}
        <h2>{{user.name}}</h2>
        {{/if}}
    </script>
    <script>
        var user = {
            name: 'Template username'
        }
        var html = template('tpl', {user: user})
        var container = document.querySelector('#container');
        container.innerHTML = html;
    </script>
</body>
</html>

4 语法

输出

标准语法

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

原始语法

<%= value %>
<%= data.key %>
<%= data['key'] %>
<%= a ? b : c %>
<%= a || b %>
<%= a + b %>

原文输出
标准语法

{{@ value}}

原始语法

<%- value %>

条件输出
标准语法

<!-- 单 if 判断 -->
{{if value}} 
... 
{{/if}}

<!-- if ... else ... 判断 -->
{{if v1}} 
... 
{{else if v2}}
 ... 
{{/if}}

原始语法

<!-- 单 if 判断 -->
<% if (value) { %>
...
<% } %>

<!-- if ... else ... 判断 -->
<% if (v1) { %>
...
<% else if (v2) { %>
...
<% } %>

循环输出
标准语法

{{each target}}
  {{$index}} {{$value}}
{{/each}}

target是一个数组，each用于对数组遍历，$index 是数组的下标， $value是数组的值

原始语法

<% for (var i = 0; i < target.length; i++) { %>
<%= i %> <%= target[i] %>
<% } %>

注意:

target 支持 array 与object 的迭代，其默认值为 $d a t a 。$ data其实就是传入模板的总数据对象(原始数据对象)

<!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>
    <script src="./node_modules/art-template/lib/template-web.js"></script>
</head>
<body>
    <div id="container"></div>
    <script type="text/html" id="tpl">
        <ul>
            {{each user.arr}}
            <li>
                {{$index + 1}} ---- {{$value.type}} ---- {{$value.price}}
                {{$data}}
            </li>
            {{/each}}
        </ul>
    </script>
    <script>
        var user = {
            obj: {
                name: 'Bruce Lee',
                age: 32,
                gender: 'male'
            },
            arr: [
                {type: 1, price: 10},
                {type: 2, price: 12},
                {type: 3, price: 18}
            ] 
        }
        var html = template('tpl', {user: user})
        var container = document.querySelector('#container');
        container.innerHTML = html;
    </script>
</body>
</html>

$value 与 $index 可以自定义：{{each target val key}}。
具

<!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>
    <script src="./node_modules/art-template/lib/template-web.js"></script>
</head>
<body>
    <div id="container"></div>
    <script type="text/html" id="tpl">
        <h4>each 遍历数组，采用默认的索引 $index 和默认的值 $value</h4>
        <ul>
            <!-- each 遍历数组，采用默认的索引 $index 和默认的值 $value -->
            {{each user.arr}}
            <li>
                {{$index}} ---- {{$value}}
            </li>
            {{/each}}
        </ul>

        <h4>each 遍历数组, 采用自定义的索引 b 和默认的值 a</h4>
        <ul>
            <!-- each 遍历数组, 采用自定义的索引 b 和默认的值 a -->
            {{each user.arr b a}}
            <li>
                {{a}} ---- {{b}}
            </li>
            {{/each}}
        </ul>

        <h4>each 遍历对象， 采用默认的键 $index 和默认的值 $value</h4>
        <ul>
            <!-- each 遍历对象， 采用默认的键 $index 和默认的值 $value  -->
            {{each user.obj}}
            <li>
                {{$index}} ---- {{$value}}
            </li>
            {{/each}}
        </ul>

        <h4>each 遍历对象，采用自定义的键 key 和自定义的值 val</h4>
        <ul>
            <!-- each 遍历对象，采用自定义的键 key 和自定义的值 val -->
            {{each user.obj val key}}
            <li>
                {{key}} ---- {{val}}
            </li>
            {{/each}}
        </ul>
    </script>
    <script>
        var user = {
            obj: {
                name: 'Bruce Lee',
                age: 32,
                gender: 'male'
            },
            arr: [
                { type: 1, price: 10 },
                { type: 2, price: 12 },
                { type: 3, price: 18 }
            ]
        }
        var html = template('tpl', { user: user })
        var container = document.querySelector('#container');
        container.innerHTML = html;
    </script>
</body>
</html>