1 介绍:
art-template 是一个简约、超快的模板引擎。 它采用作用域预声明的技术来优化模板渲染速度,从而获得接近 JavaScript 极限的运行性能,并且同时支持 NodeJS 和浏览器。
1.1 模板语法:
art-template 同时支持两种模板语法。标准语法可以让模板更容易读写;原始语法具有强大的逻辑处理能力。
标准语法
<code>{{if user}}
{{user.name}}
{{/if}}/<code>原始语法
<code>
/<code>1.2 核心方法:
<code>// 基于模板名渲染模板template(filename, data);// 将模板源代码编译成函数template.compile(source, options);// 将模板源代码编译成函数并立即执行template.render(source, data, options);/<code>
2 安装
2.1 安装方法:
通过npm安装: npm install art-template --save下载安装2.2 在浏览器中编译
因为浏览器不支持文件系统,所以 template(filename, data) 不支持传入文件路径,它内部使用 document.getElementById(filename).innerHTML 来获取模板,例如:
<code> <title>Document/<title>
原始语法
<code>........./<code>
3.4 循环输出
标准语法
<code>{{each target}} {{$index}} {{$value}}{{/each}}/<code>
target是一个数组,each用于对数组遍历,$index 是数组的下标, $value是数组的值 原始语法
<code> /<code>
注意:
target 支持 array 与object 的迭代,其默认值为 $data。具体看下面的例子:
<code> <title>Document/<title>
each遍历对象target(默认为$data).png
图中可以看出$data其实就是传入模板的总数据对象(原始数据对象)
$value 与 $index 可以自定义:{{each target val key}}。具体看下面例子:
<code> <title>Document/<title>
each遍历数组和对象以及自定义$data和$index.png
3.5 定义变量
标准语法
<code>{{set temp = data.sub.content}}/<code>
原始语法
<code>
3.6 模板继承
标准语法
<code>{{extend './layout.html'}}{{block 'head'}}...{{/block}}/<code>
原始语法
<code>.../<code>
模板继承允许你构建一个包含站点共同元素的基本“模板骨架”,实例:
<code> <title>{{block 'title'}}My Site{{/block}}/<title> {{block 'head'}} <link> {{/block}} {{block 'content'}}{{/block}}/<code>
<code>{{extend './layout.art'}}{{block 'title'}}{{title}}{{/block}}{{block 'head'}} <link>{{/block}}{{block 'content'}}
This is just an awesome page.
{{/block}}/<code>渲染 index.art 后,将自动应用布局骨架。
3.7 子模板
标准语法
<code>{{include './header.art'}}{{include './header.art' data}}/<code>
原始语法
<code>
看如下例子:
<code> <title>art-template-filter/<title>
date 默认为 format 过滤器(方法)的第一个参数, 'YYYy-mM-dd' 才是format 过滤器的第二个参数,date 经过 format 过滤器过滤后,得到的结果,又作为addQuotationMarks 过滤器的默认参数,如果有更多的过滤器,那么就把前一层过滤器过滤的结果,作为下一个过滤器的参数一层层过滤下去
4 调试
template.defaults.debug art-template 内建调试器,能够捕获到语法与运行错误,并且支持自定义的语法。在 NodeJS 中调试模式会根据环境变量自动开启:process.env.NODE_ENV !== 'production' 设置 template.defaults.debug=true 后,等同于:
<code>{ "cache": false, "minimize": false, "compileDebug": true}/<code>
5 模板变量
template.defaults.imports 模板通过 $imports 可以访问到模板外部的全局变量和导入的变量。
5.1 导入变量
<code>template.defaults.imports.log = console.log;/<code>
<code>
看下面例子:
<code> <title>template.defaults.imports/<title>
注意:
这些语法必须写在模板中,在模板中才会起作用;
5.2 内置变量清单
$data 传入模板的数据;$imports 外部导入的变量以及全局变量;print 字符串输出函数;include 子模板载入函数extend 模板继承模板导入函数block 模板块生命函数最后,小编想说:我是一名python开发工程师,
整理了一套最新的python系统学习教程,
想要这些资料的可以关注私信小编“01”即可(免费分享哦)希望能对你有所帮助