首页 > 代码库 > js-template-art【二】语法

js-template-art【二】语法

2024-09-18 04:01:56   219人阅读

一、模板语法

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
  2. $value 与 $index 可以自定义：{{each target val key}}

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【二】语法


联系
我们