art-template简单使用

最新推荐文章于 2023-03-17 16:29:54 发布

爱喝水的qdy

最新推荐文章于 2023-03-17 16:29:54 发布

阅读量692

点赞数

分类专栏： JavaScript 文章标签： javascript art-template

原文链接：https://www.jianshu.com/p/d8d8e19157e0

版权

JavaScript 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

学习源

art-Template

art-template 是一个简约、超快的模板引擎。它采用作用域预声明的技术来优化模板渲染速度，从而获得接近 JavaScript 极限的运行性能，并且同时支持 NodeJS 和浏览器。使用art-template也便于维护代码，以前我们渲染数据是以模板字符串的形式在js文件中写入的html内容，如果html内容需要修改，我们需要在js中修改。而用了模板引擎以后，我们只需要html文件中修改html内容。还有使用了模板引擎以后DOM操作的效率也会更高一点。

art-Template特点

拥有接近 JavaScript 渲染极限的的性能
调试友好：语法、运行时错误日志精确到模板所在行；支持在模板文件上打断点(Webpack Loader)
支持 Express、Koa、Webpack
支持模板继承与子模板
浏览器版本仅 6KB 大小

art-Template与其他模板引擎运行速度对比

图源于https://www.jianshu.com/p/955ff311d670
在这里插入图片描述

art-Template文档

安装

安装方法

通过npm安装: npm install art-template --save
下载安装

在浏览器中编译

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>art-Template简介语法使用</title>
    <!-- 应用art-Template文件 同时支持简介和原生语法 -->
    <script type="text/javascript" src="./template-web.js"></script>
</head>
<body>
    <div id="container"></div>
	<!-- 定义模板
	
	    1. 模板定义在<script />中；
	    2. 必须为script标签指定id；
	    3. 必须为script标签指定type为text/html
	    4. 模板 script 标签必须在 template() 方法调用的 script 标签之前
	-->
    <script type="text/html" id="art">
        {{if user}}
        <h2>{{user.name}}</h2>
        {{/if}}
    </script>
    <script>
        var user = {
            name: 'art-Template'
        };
        var html = template('art', {user: user});
        var container = document.querySelector('#container');
        container.innerHTML = html;
    </script>
</body>
</html>

浏览器打开看到的结果如下：

在这里插入图片描述

语法

art-template 支持标准语法与原始语法。标准语法可以让模板易读写，而原始语法拥有强大的逻辑表达能力。

标准语法支持基本模板语法以及基本 JavaScript 表达式；原始语法支持任意 JavaScript 语句，这和 EJS 一样。

输出

{{}}，Mustache风格

标准语法

{{ 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 ... else ... 判断 -->
{{if v1}} 
 ... 
{{else if v2}}
 ... 
{{else}}
 ...
{{/if}}

原始语法

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

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

循环输出

标准语法

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

OR
自定义
{{each target val ind}}
  {{ind}} {{val}}
{{/each}}

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

原始语法

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

注意:

1.target 支持array 与 object 的迭代，其默认值为 $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="art">
        <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('art', {user: user})
        var container = document.querySelector('#container');
        container.innerHTML = html;
    </script>
</body>
</html>

输出结果：
在这里插入图片描述

可以看出$data其实就是传入模板的总数据对象(原始数据对象)

$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="art">
        <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('art', { user: user })
        var container = document.querySelector('#container');
        container.innerHTML = html;
    </script>
</body>
</html>

输出结果：

在这里插入图片描述

定义变量

标准语法

{{set temp = data.sub.content}}

原始语法

<% var temp = data.sub.content %>

模板继承

标准语法

{{extend './layout.html'}}
{{block 'head'}}
...
{{/block}}

原始语法

<% extend ('./layout.html') %>
<% block('head', function () { %>
...
<% }) %>

模板继承允许你构建一个包含站点共同元素的基本“模板骨架”

<!--layout.art-->
<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>{{block 'title'}}My Site{{/block}}</title>

    {{block 'head'}}
    <link rel="stylesheet" href="main.css">
    {{/block}}
</head>
<body>
    {{block 'content'}}{{/block}}
</body>
</html>

<!--index.art-->
{{extend './layout.art'}}

{{block 'title'}}{{title}}{{/block}}

{{block 'head'}}
    <link rel="stylesheet" href="custom.css">
{{/block}}

{{block 'content'}}
<p>This is just an awesome page.</p>
{{/block}}

子模板

标准语法

{{include './header.art'}}
{{include './header.art' data}}

原始语法

<% include('./header.art') %>
<% include('./header.art', 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>art-template-filter</title>
    <!-- 引入 template-web.js -->
    <script src="./node_modules/art-template/lib/template-web.js"></script>
</head>
<body>
    <div class="container"></div>
    <script type="text/html" id="filterTpl">
        <h3>{{date | format 'YYYy-mM-dd' | addQuotationMarks}}</h3>
        <h3><%= $imports.addQuotationMarks($imports.format(date)) %></h3>
    </script>
    <script>
        var data = {
            date: Date.now(),
        }
        // 定义日期格式化过滤器 format 方法：
        template.defaults.imports.format = function (date, format) {
            if (!format || format.toLowerCase() === 'yyyy-mm-dd') {
                var dt = new Date(date);
                var y = dt.getFullYear();
                var m = (dt.getMonth() + 1).toString().padStart(2, '0');
                var d = dt.getDate().toString().padStart(2, '0');
                return `${y}/${m}/${d}`;
            } else {
                return 'invalid date';
            }
        }
        // 定义给字符串加引号过滤器 addQuotationMarks 方法:
        template.defaults.imports.addQuotationMarks = function (str) {
            return `"${str}"`;
        }
        // 调用 template 方法，渲染模板和数据
        var html = template('filterTpl', data);
        document.querySelector('.container').innerHTML = html;
    </script>
</body>
</html>

说明：

{{date | format 'YYYy-mM-dd' | addQuotationMarks}}
date 默认为format过滤器(方法)的第一个参数，'YYYy-mM-dd' 才是 format过滤器的第二个参数,
date 经过 format 过滤器过滤后，得到的结果，又作为
addQuotationMarks 过滤器的默认参数，如果有更多的过滤器，那么就把前一层过滤器过滤的结果，作为下一个过滤器的参数一层层过滤下去

调试

template.defaults.debug

art-template 内建调试器，能够捕获到语法与运行错误，并且支持自定义的语法。在 NodeJS 中调试模式会根据环境变量自动开启：process.env.NODE_ENV !== 'production'
设置 template.defaults.debug=true 后，等同于：

{
    "cache": false,
    "minimize": false,
    "compileDebug": true
}

模板变量

template.defaults.imports

模板通过 $imports 可以访问到模板外部的全局变量和导入的变量。

导入变量

template.defaults.imports.log = console.log;

<% $imports.log('Hello, template.defaults.imports.log') %>

例如：

<!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>template.defaults.imports</title>
    <script src="./node_modules/art-template/lib/template-web.js"></script>
</head>
<body>
    <div class="container">
    </div>
    <script type="text/html" id="importsTpl">
        <% $imports.log('Hello, template.defaults.imports.log') %>
        <%= $imports.date %>
    </script>
    <script>
        var data = {};
        template.defaults.imports.log = console.log;
        template.defaults.imports.date = new Date();
        template.defaults.debug = true;
        var html = template('importsTpl', data);
        document.querySelector('.container').innerHTML = html;
    </script>
</body>
</html>

爱喝水的qdy

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
art-template简单使用

目录学习源art-Templateart-Template特点art-Template与其他模板引擎运行速度对比art-Template文档安装安装方法在浏览器中编译语法输出原文输出条件输出循环输出定义变量模板继承子模板调试模板变量学习源https://www.jianshu.com/p/d8d8e19157e0https://www.jianshu.com/p/955ff311d670...
复制链接

扫一扫