360SDN.COM

art-template@4 新特性一览

来源:  2017-09-07 16:23:53    评论:0点击:

前端技术日新月异,前端字符串模板引擎已经逐步被 DOM 模板引擎所取代,以至于 art-template 一度停止维护。

现在,art-template 重新回归,带来了全新的 v4 版本。v4 对 NodeJS 进行了更好的支持,并且拥有领先的渲染性能,同时带来了全家桶:express-art-templatekoa-art-template

对于浏览器端,art-template@4.0 带来了基于 WebPack 的 art-template-loader,它能更好的支持预编译,生成非常简洁的代码用于浏览器端使用,它完全可取代年久失修的 TmodJS。

art-template@4 主要特性:

高速渲染

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

调试增强

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

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

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

调试日志

v4-debug

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

debug-v3

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

断点

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

webpack debug

混合式语法

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'
        }
    }
});

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

关于 4.0 重构

Github 有用户问我为什么突然又开始密集的对 art-template 进行迭代,连周末也没有停歇。我想应该是这两个理由在驱动我:

  1. 我想认真做一件事情。art-template 是一个技术型产品,从代码到技术产品是需要不断磨砺的,我想体验下将一个简单的开源项目做到极致的感觉

  2. 我在开发过程中实践了很多东西,获得满满的成就。至少有:TDD、Istanbul、CI、AST、Token、SourceMap、NodeJS、KOA、Express、Webpack Loader‘’



    有一个压缩器的配置接口 compressor。配置如下:

    /**
     * 压缩 HTML 输出语句
     * @param {string} source 
     */
    const compressor = source => {
        return source
            // remove newline / carriage return
            .replace(/\n/g, "")
    
            // remove whitespace (space and tabs) before tags
            .replace(/[\t ]+\</g, "<")
    
            // remove whitespace between tags
            .replace(/\>[\t ]+\</g, "><")
    
            // remove whitespace after tags
            .replace(/\>[\t ]+$/g, ">")
    
            // remove comments
            .replace(/<!--[\w\W]*?-->/g, "");
    };
    
    template.defaults.compressor = compressor;

    它是在编译阶段运行的,因此性能很高。因为模板引擎拿到的是 html 片段,因此能力有限:只能做简单空格压缩,无法对 <pre><script> 进行特殊处理。正因为 compressor不够完美,因此没有内置到默认配置中。

    如果要做完善的压缩服务,可能得在运行时进行,在模板引擎输出整个页面后进行处理。例如使用 Koa 的中间件 https://github.com/koajs/html-minifier

     

为您推荐

友情链接 |九搜汽车网 |手机ok生活信息网|ok生活信息网|ok微生活
 Powered by www.360SDN.COM   京ICP备11022651号-4 © 2012-2016 版权