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

苏南大叔:art-template模版引擎,如何使用前端浏览器实时编译? - art-template-web-hero
art-template模版引擎,如何使用前端浏览器实时编译?(图6-1)

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

下载地址

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

苏南大叔:art-template模版引擎,如何使用前端浏览器实时编译? - art-template-web
art-template模版引擎,如何使用前端浏览器实时编译?(图6-2)

苏南大叔:art-template模版引擎,如何使用前端浏览器实时编译? - lib-template-web
art-template模版引擎,如何使用前端浏览器实时编译?(图6-3)

基本使用姿势

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

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

定义容器:

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

苏南大叔:art-template模版引擎,如何使用前端浏览器实时编译? - art-template-demo-code
art-template模版引擎,如何使用前端浏览器实时编译?(图6-4)

定义模版:

<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之类的语句。这里就写几个常见的iffor作为例子就好了,更多的语法,请查看官方文档。

苏南大叔:art-template模版引擎,如何使用前端浏览器实时编译? - template-if-else
art-template模版引擎,如何使用前端浏览器实时编译?(图6-5)

{{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兼容代码。

下面的链接,是官方范例:

使用这个cloudflarecdn的话,代码如下:

<!--[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]-->

使用国内的bootcsscdn的话,代码如下:

<!--[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]-->

苏南大叔:art-template模版引擎,如何使用前端浏览器实时编译? - es5-sham-js
art-template模版引擎,如何使用前端浏览器实时编译?(图6-6)

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

相关链接

总结

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

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

如果本文对您有帮助,或者节约了您的时间,欢迎打赏瓶饮料,建立下友谊关系。
本博客不欢迎:各种镜像采集行为。请尊重原创文章内容,转载请保留作者链接。
本站采用创作共用版权协议, 要求署名、非商业用途和相同方式共享。
转载本站内容必须也遵循“署名-非商业用途-相同方式共享”的创作共用协议。
未经许可,规模化镜像抄袭本站内容的行为,将会根据有关法律法规进行维权。
程序如此灵动~》下所有原创文章,如被用于商业用途,请您按规定支付稿费。

 【加群】加入QQ群【175454274】和大家一起讨论这个问题

 【源码】本文代码片段及相关软件,请点此获取

 【绝密】秘籍文章入口,仅传授于有缘之人   aui

本站的忠实读者小伙伴,正在阅读下面这些文章: