template js 定义变量_最全的模板引擎 -- art-template介绍

1 介绍：

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

1.1 模板语法：

art-template 同时支持两种模板语法。标准语法可以让模板更容易读写；原始语法具有强大的逻辑处理能力。

标准语法

{{if user}}

{{user.name}}

{{/if}}

原始语法

1.2 核心方法：

// 基于模板名渲染模板template(filename, data);// 将模板源代码编译成函数template.compile(source, options);// 将模板源代码编译成函数并立即执行template.render(source, data, options);

2 安装

2.1 安装方法:

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

2.2 在浏览器中编译

因为浏览器不支持文件系统，所以 template(filename, data) 不支持传入文件路径，它内部使用 document.getElementById(filename).innerHTML 来获取模板，例如：

    Document

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

通过浏览器渲染模板.png

3 语法

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

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

3.1 输出

---

标准语法

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

原始语法

3.2 原文输出

---

标准语法

{{@ value}}

原始语法

3.3 条件输出

---

标准语法

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

原始语法

.........

3.4 循环输出

---

标准语法

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

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

注意:

1. target 支持 array 与object 的迭代，其默认值为 $data。
   具体看下面的例子：

    Document

看输出结果：

each遍历对象target(默认为$data).png

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

2. $value 与 $index 可以自定义：{{each target val key}}。
   具体看下面例子：

    Document

看输出结果：

each遍历数组和对象以及自定义$data和$index.png

3.5 定义变量

标准语法

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

原始语法

3.6 模板继承

标准语法

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

原始语法

...

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

    {{block 'title'}}My Site{{/block}}    {{block 'head'}}        {{/block}}    {{block 'content'}}{{/block}}

{{extend './layout.art'}}{{block 'title'}}{{title}}{{/block}}{{block 'head'}}    {{/block}}{{block 'content'}}

This is just an awesome page.

{{/block}}

渲染 index.art 后，将自动应用布局骨架。

3.7 子模板

标准语法

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

原始语法

看如下例子：

    art-template-filter

注意：

• {{date | format 'YYYy-mM-dd' | addQuotationMarks}}
  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 后，等同于：

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

5 模板变量

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

5.1 导入变量

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

看下面例子：

    template.defaults.imports

注意：

这些语法必须写在模板中，在模板中才会起作用；

5.2 内置变量清单

• $data 传入模板的数据;
• $imports 外部导入的变量以及全局变量；
• print 字符串输出函数;
• include 子模板载入函数
• extend 模板继承模板导入函数
• block 模板块生命函数

最后，小编想说：我是一名python开发工程师，

整理了一套最新的python系统学习教程，

想要这些资料的可以关注私信小编“01”即可(免费分享哦)希望能对你有所帮助