art-template模版引擎，如何使用前端浏览器实时编译？

我们相信：世界是美好的，你是我也是。平行空间的世界里面，不同版本的生活也在继续...

art template是国产的前端渲染引擎，既可以实时编译运行在前端页面，也可以通过后端node来预先生成页面。在目前的模版渲染引擎里面，算是非常的简单好用。她不设计任何样式的问题，就仅仅是个模版的生成问题。当然，您如果有更好的选择，也可以使用。

苏南大叔推荐这款前端渲染引擎的原因，就是因为它确实非常小巧简单并且好用。本文测试环境：mac，chrome@80.0.3987.163，art-template@4.13.2。

下载地址

这款引擎不仅仅可以用于前端渲染，其实还可以用于后端渲染。在本文中，侧重的是前端实时渲染类型。所以，这里有个下载类库的概念。在下面的地址上，您可以拿到最新的template-web.js类库。

• https://github.com/aui/art-template/releases

基本使用姿势

作为普通的类库使用的时候，下面是相关使用姿势：
引入类库：

<script src="lib/template-web.js"></script>

定义容器：

<div id="content"></div>

定义模版：

<script id="data-tpl" type="text/html">
    <h1>{{domain}}</h1>
    <table>
        <tr>
            <td>ID</td>
            <td>URL</td>
            <td>是否收录</td>
        </tr>
        ????{{each?list?value?i}}   
        <tr>
            <td>{{i?+?1}}</td>
            <td>{{value.url}}</td>
            <td>
                {{if value.indexFlag==1}}
                已收录
                {{else}}
                未收录
                {{/if}}
            </td>
        </tr>
        {{/each}}
    </table>
    <div>
        第{{pageNum}}页，共{{lastPage}}页，翻页：
        <% for(var i = 1; i <=lastPage; i++){ %>
            <span style="cursor:pointer" onclick='javascript:void(0)'><%= i %></span>
        <% } %>
    </div>
</script>

数据渲染：

<script>
var data=[{
  domain:'newsn.net',
  list:[
    'id':1,'url':'https://newsn.net/tag/electron/'
  ]
}];
var html = template('data-tpl', data);
document.getElementById('content').innerHTML = html;
</script>

这里需要注意的就是：模版是定义在一个很奇怪的script里面的，它有id，还有type。例如：

<script id="data-tpl" type="text/html">
  //..
</script>

这里的id在真正的渲染语句里面，是作为第一个参数传递进去的。

template('data-tpl', data);

模版基本语法

在模版里面，需要写一些条件判断的话，就需要用到if之类的语句。这里就写几个常见的if和for作为例子就好了，更多的语法，请查看官方文档。

• http://aui.github.io/art-template/docs/syntax.html

{{if user}}
  <h2>{{user.name}}</h2>
{{/if}}

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

<ul>
    {{each list value i}}
        <li>索引 {{i + 1}} ：{{value}}</li>
    {{/each}}
</ul>

在这里，大家可以看到定界符，可以是{{}}，也可以是<%%>。这两种符号都是支持的，在art-template的文档中，表述的是：标准语法{{}}和原始语法<%%>。苏南大叔个人来说，还是比较喜欢这个原始语法<%%>。

带有html的变量输出，可以考虑下面的raw写法，否则html将会转义：

{{@ value }}

或者

<%- value %>

ie兼容性

只要是前端，就经常提到ie兼容性，这个事情就比较麻烦。这个art-template支持的ie版本是ie8+。对于ie8及以下浏览器，需要加载es5兼容代码。

下面的链接，是官方范例：

• https://github.com/aui/art-template/blob/master/example/web-ie-compatible/index.html

使用这个cloudflare的cdn的话，代码如下：

<!--[if lte IE 8]>
<script src="https://cdnjs.cloudflare.com/ajax/libs/es5-shim/4.5.7/es5-shim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/es5-shim/4.5.7/es5-sham.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/json3/3.3.2/json3.min.js"></script>
<![endif]-->

使用国内的bootcss的cdn的话，代码如下：

<!--[if lte IE 8]>
<script src="https://cdn.bootcss.com/es5-shim/4.5.14/es5-shim.min.js"></script>
<script src="https://cdn.bootcss.com/es5-shim/4.5.14/es5-sham.min.js"></script>
<script src="https://cdn.bootcss.com/json3/3.3.3/json3.min.js"></script>
<![endif]-->

如果您想切换到别的cdn，您可能对下面这篇文章感兴趣：

• https://newsn.net/say/unpkg-123.html

相关链接

• https://github.com/aui/art-template
• http://aui.github.io/art-template/zh-cn/docs/index.html

总结

本篇文章的内容，偏重于前端浏览器实时编译的角度，来谈谈art-template渲染引擎的使用问题。在接下来的文章中，苏南大叔还会描述，其他的使用方案。

更多相关art-template文章，请参考苏南大叔的文章：

• https://newsn.net/tag/aui/

如果本文对您有帮助，或者节约了您的时间，欢迎打赏瓶饮料，建立下友谊关系。
本博客不欢迎：各种镜像采集行为。请尊重原创文章内容，转载请保留作者链接。