前端模板引擎artTemplate介绍

责编:menVScode 2017-07-15 21:56 阅读(548)

        art-template 是一个渲染性能出众模板引擎,无论在 NodeJS 还是在浏览器中都可以运行。

        QQ截图20170715213459

特性:       

        1. 拥有接近 JavaScript 渲染极限的的性能

        2. 调试友好:语法、运行时错误日志精确到模板所在行;支持支持在模板文件上打断点(Webpack Loader)

        3. 支持压缩输出页面中的 HTML、CSS、JS 代码

        4. 支持 Express、Koa、Webpack

        5. 支持模板继承与子模板

        6. 兼容 EJSUnderscoreLoDash 模板语法

        7. 模板编译后的代码支持在严格模式下运行

        8. 支持 JavaScript 语句与模板语法混合书写

        9. 支持自定义模板的语法解析规则

        10. 浏览器版本仅 6KB 大小

以上信息来自:https://github.com/aui/art-template


art-template@4 新特性:https://github.com/aui/art-template/issues/369   

高速渲染

        毫无疑问,它依然保持了过去的成绩,并且编码函数 $escape() 是过去的 4 倍速度。

QQ截图20170715213459

调试增强

        模板的错误分为两种:一种是运行时错误,一种是编译错误。

        1、运行时错误:模板访问数据的时候出错,如属性不存在等。对于运行的错误,art-template 从第一个版本已经支持。

        2、编译错误:非法模板语法导致的 javascript 解析错误。对于支持 javascript 原生语句的模板引擎来说,未闭合的 javascript 模板语句通常是合法的,如果其中有语法错误,找到它的位置是一件有挑战的事情。art-template@4.0 不但实现了原生 javascript 语法调试,还支持自定义的语法调试。

        3、调试日志

QQ截图20170715214921

        可以看到,日志中直接定位到了模板所在行。而同样的模板,在 v3.0 上的 debug 几乎只能去查找编译后的代码:

QQ截图20170715215015

        art-template@4.0 使用了一点点黑魔法实现了编译调试,这里以后准备在以后分享实现细节。

        4、使用 Webpack Loader 后可以输出 SourceMap,支持在浏览器中对模板进行断点调试

QQ截图20170715215119

混合式语法

        art-template 从 v3.0 开始默认采用的是简洁语法,相对于 ejs 式的语法,简洁语法优点是利于读写,弊端是逻辑控制非常有限,比如循环控制等。v4.0 同时支持两种语法,在功能与易用性之间取得较好的平衡:

<!--art 语法-->
{{if user}}
  <h2>{{user.name}}</h2>
  <ul>
    {{each user.tags}}
        <li>{{$value}}</li>
    {{/each}}
  </ul>
{{/if}}

<!--ejs 语法-->
<% if (user) { %>
  <h2><%= user.name %></h2>
  <ul>
    <% for(var i = 0; i < user.tags.length; i++){ %>
        <li><%= user.tags[i] %></li>
    <% } %>
  </ul>
<% } %>

        值得一提的是,art-template@4.0 兼容了 EJSUnderscoreLoDash 的模板语法,也兼容 art-template@3.0 语法。

模板继承

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

范例

layout.art:

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>{{block 'title'}}My Site{{/block}}</title>

    {{block 'head'}}
    <link rel="stylesheet" href="main.css">
    {{/block}}
</head>
<body>
    {{block 'content'}}{{/block}}
</body>
</html>

index.art:

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

{{block 'title'}}{{title}}{{/block}}

{{block 'head'}}
    <link rel="stylesheet" href="custom.css">
{{/block}}

{{block 'content'}}
<p>This is just an awesome page.</p>
{{/block}}

        渲染 index.art 后,将自动应用布局骨架。可以看到,使用模板继承可以节省很多代码量。

自定义语法

        art-template@4.0 支持应用多个模板解析规则,例如让模板引擎支持 ES6 ${name} 模板字符串的解析:

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

        内置的两个语法规则也是采用此接口实现,如果不喜欢内置语法可以干掉它们。

前端交流群: MVC前端网(menvscode.com)-qq交流群:551903636

邮箱快速注册

忘记密码