参看地址

一、模板语法

1、变量使用与输出

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

art-template 同时支持 {{expression}} 简约语法与任意 JavaScript 表达式 <% expression %>

2、原始输出

{{@value}}

<%- value %>

原始输出语句不会对 HTML 内容进行转义

3、条件

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

<% if (value) { %> ... <% } %>
<% if (value) { %> ... <% } else { %> ... <% } %>

4、循环

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

<% for(var i = 0; i < target.length; i++){ %>
<%= i %> <%= target[i] %>
<% } %>
  1. target 支持 Array 与 Object 的迭代,其默认值为 $data 。target 一般是{data:数组}
  2. $value 与 $index 可以自定义:{{each target as val key}}  使用时可以不用$val直接val即可

5、变量

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

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

6、模板继承

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

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

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

7、子模板

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

<% include('./header.art') %>
<% include('./header.art', data) %>

include 第二个参数默认值为 $data

8、打印输出

<% print(val, val2, val3) %>

9、过滤器

// 向模板中导入全局变量
template.defaults.imports.$dateFormat = function(date, format){/*[code..]*/};
template.defaults.imports.$timestamp = function(value){return value * 1000};

因为 imports 定义的全局变量的优先级会比普通模板变量高,所以建议命名使用 $ 前缀。

{{date | $timestamp | $dateFormat 'yyyy-MM-dd hh:mm:ss'}}

<%= $dateFormat($timestamp(date), 'yyyy-MM-dd hh:mm:ss') %>

{{value | filter}} 过滤器语法类似管道操作符,它的上一个输出作为下一个输入。

10、压缩html、js、css

template.defaults.minimize = true;

art-template 的页面压缩功能是在编译阶段实现的,因此完全不影响渲染速度,并且能够加快网络传输速度。但也有一个限制,它不能正常处理未闭合的 HTML 标签,因此使用 include 语句载入模板片段的时候请小心。

请避免书写这样的模板:

<body>
或:
</body></html>

使用 模板继承 代替 include 可以避免这样的问题出现。

11、调试

设置 template.defaults.debug=true 后,它会设置如下选项:

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

debug 默认配置:

  • Node 环境 = process.env.NODE_ENV !== 'production'
  • 浏览器环境 = false

12、全局变量

1)内置变量清单

  • $data 传入模板的数据 {Object|array}
  • $imports 外部导入的所有变量,等同 template.defaults.imports {Object}
  • print 字符串输出函数 {function}
  • include 子模板载入函数 {function}
  • extend 模板继承模板导入函数 {function}
  • block 模板块声明函数 {function}

2)注入全局变量

template.defaults.imports.$console = console;
<% $console.log('hello world') %>

模板外部所有的变量都需要使用 template.defaults.imports 注入、并且要在模板编译之前进行声明才能使用。

13、配制语法规则

1)修改界定符

art-template 支持修改默认模板界定符 {{}} 与 <%%>

// 原生语法的界定符规则
template.defaults.rules[0].test = /<%(#?)((?:==|=#|[=-])?)([\w\W]*?)(-?)%>/;
// art 语法的界定符规则
template.defaults.rules[1].test = /{{\s*([@#]?)(\/?)([\w\W]*?)\s*}}/;

2)添加语法

从一个简单的例子说起,让模板引擎支持 ES6 ${name} 模板字符串的解析:

template.defaults.rules.push({
test: /\${([\w\W]*?)}/,
use: function(match, code) {
return {
code: code,
output: 'escape'
}
}
});

其中 test 是匹配字符串正则,use 是匹配后的调用函数。关于 use 函数:

  • 参数:一个参数为匹配到的字符串,其余的参数依次接收 test 正则的分组匹配内容
  • 返回值:必须返回一个对象,包含 code 与 output 两个字段:
    • code 转换后的 JavaScript 语句
    • output 描述 code 的类型,可选值:
      • 'escape' 编码后进行输出
      • 'raw' 输出原始内容
      • false 不输出任何内容

值得一提的是,语法规则对渲染速度没有影响,模板引擎编译器会帮你优化渲染性能。

js-template-art【二】语法的更多相关文章

  1. node.js学习(二)--Node.js控制台(REPL)&&Node.js的基础和语法

    1.1.2 Node.js控制台(REPL) Node.js也有自己的虚拟的运行环境:REPL. 我们可以使用它来执行任何的Node.js或者javascript代码.还可以引入模块和使用文件系统. ...

  2. JavaScript模板引擎artTemplate.js——template()方法

    template(id, data)方法: id:必传,渲染模板的id. data:可选,一个Object对象. return:传data—>渲染完成html代码:不传data—>一个渲染 ...

  3. JavaScript模板引擎artTemplate.js——template.helper()方法

    上一篇文章我们已经讲到了helper()方法,但是上面的例子只是一个参数的写法,如果是多个参数,写法就另有区别了. <div id="user_info"></d ...

  4. JavaScript模板引擎artTemplate.js——template.compile()方法

    template.compile(source, options) source:必传,渲染模板的内容. options:可选,通常不传.(其实是我还没研究明白) return:一个渲染函数. 示例如 ...

  5. 【高德地图API】从零开始学高德JS API(二)地图控件与插件——测距、圆形编辑器、鼠标工具、地图类型切换、鹰眼鱼骨

    原文:[高德地图API]从零开始学高德JS API(二)地图控件与插件——测距.圆形编辑器.鼠标工具.地图类型切换.鹰眼鱼骨 摘要:无论是控件还是插件,都是在一级API接口的基础上,进行二次开发,封装 ...

  6. js 正则练习之语法高亮

    原文:js 正则练习之语法高亮 学了几天正则,差不多该总结整理写成果了,之前就想写语法高亮匹配来着,不过水平不够,看着例子都不理解.今天就分析下 次碳酸钴 和 Barret Lee 语法高亮实现. 先 ...

  7. 针对单个 js 文件禁用 ESLint 语法校验

    问题描述: 在 Vue-cli 创建的项目中,使用了 ESLint 规范代码的项目中 如何针对单个 js 文件禁用 ESLint 语法校验,但整个项目依然保留 ESLint 的校验规则? 解决方案: ...

  8. qrcode.js 动态生成二维码

    用qrcode.js动态生成二维码图片非常简单,只需要引入qrcode.js即可使用,而且可以自定义图片大小.背景色等信息. 1.jsp代码---页面头部引入qrcode.js,jquery文件可选 ...

  9. node.js 初学(二)—— 搭建注册/登录服务器

    node.js 初学(二)—— 搭建注册/登录服务器 理论上来说,代码实现在理论和实际上是一样的.但实际上来说,他们不是 做一个最简单的用户注册登录功能 1.接口定义: 注册:/user?act=re ...

  10. js生成简单二维码

    js文件下载地址:https://download.csdn.net/download/weixin_38296752/10554485 一.引入qrcode.js文件 <script type ...

随机推荐

  1. 双十二“MathType”限时6折特惠

    MathType是由美国Design Science公司开发功能强大的公式编辑器,专门用来对数学公式的编辑,与常见的文字处理软件和演示程序配合使用,能够在各种文档中加入复杂的数学公式和符号.双十二期间 ...

  2. ChemDraw常用到的几种技巧

    ChemDraw对于化学学习的重要性相当于CAD和建筑学.PS和设计,所以如果你是一名生化相关的工作人员,拥有ChemDraw并掌握ChemDraw的使用方法十分必要!这是一款对于我们研究化学的人来说 ...

  3. 怎么输入MathType不等号

    MathType是一款比较常用的数学公式编辑器,我们在使用这款软件的时候常常需要输入各种符号.有些新用户对这款软件不是很熟悉,对于一些符号不知道怎么输入,下面我们来给大家介绍介绍MathType不等号 ...

  4. JBOSS-EAP-6.2集群部署

    1 概述 应用的合理部署即能提高系统的可靠性和稳定性,又能提高系统的可维护性和扩展性.本文档详细阐述基于Apache负载均衡和JBOSS7集群的应用系统部署方案和配置步骤.内容涉及部署方案.环境配置. ...

  5. 超全面的JavaWeb笔记day18<事务&连接池&DBUtils>

    1.事务 ACID 原子性 一致性 隔离性 持久性 mysql中开启和关闭事务 开启事务:START TRANSACTION 结束事务 提交事务:COMMIT 回滚事务:ROLLBACK JDBC中开 ...

  6. Java精选笔记_JSTL(JSP标准标签库)

    JSTL(JSP标准标签库) JSTL入门 JavaServer Pages Standard Tag Library:JSP标准标签库 在JSP中可以通过Java代码来获取信息,但是过多的Java代 ...

  7. 使用rlwrap调用sqlplus中历史命令

    此文来自http://www.cnblogs.com/mchina/archive/2013/03/08/2934473.html 在此谢谢原创作者. 在Linux中运行SQL*Plus,不能调用历史 ...

  8. 使用OpenRowSet操作Excel Excel导入数据库

    使用 OpenRowSet 和 OpenDataSource 访问 Excel 97-2007 测试文件:D:\97-2003.xls和D:\2007.xlsx,两个文件的内容是一模一样的. 测试环境 ...

  9. iconfont阿里爸爸做的开源图库

    iconfont 三种使用姿势 1.unicode格式 优点 兼容性最好,支持ie6+ 支持按字体的方式去动态调整图标大小,颜色等等 缺点 不支持多色图标 在不同的设备浏览器字体的渲染会略有差别,在不 ...

  10. 【BZOJ3470】Freda’s Walk 概率与期望

    [BZOJ3470]Freda’s Walk Description 雨后的Poetic Island空气格外清新,于是Freda和Rainbow出来散步. Poetic Island的交通可以看作一 ...