zoukankan      html  css  js  c++  java
  • js-template-art【二】语法

    参看地址

    一、模板语法

    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 = /<%(#?)((?:==|=#|[=-])?)([wW]*?)(-?)%>/;
    // art 语法的界定符规则
    template.defaults.rules[1].test = /{{s*([@#]?)(/?)([wW]*?)s*}}/;

    2)添加语法

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

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

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

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

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

  • 相关阅读:
    输入设备驱动
    Windows下Eclipse+PyDev安装Python开发环境
    Wireshark does not show SSL/TLS
    error trying to exec 'cc1plus': execvp: 没有那个文件或目录
    json 的key值不能是变量
    获取url参数(jq 扩展包)
    jsonp 完成跨域请求注意事项
    怎样删除数据库表中所有的数据
    sqlserver中数据的四种插入方式
    DataGridView
  • 原文地址:https://www.cnblogs.com/bjlhx/p/6784611.html
Copyright © 2011-2022 走看看