一分钟上手artTemplate

artTemplate是腾讯开源的前端模版引擎。之前做hue二次开发，只接触过用python写的mako模版引擎，所以之前对前端模版引擎了解不是很多。

这次因为pm叫我快速做一个demo放到阿里云给客户看。页面交互也不复杂，就想用拼接字符串来动态加载后台数据，好快点交差。结果pm一句“你先做着，交互和ui改好再给你”，我“qnmd”。。。。。

拼接字符串还是算了，就去github找到了这款星星最多的arttemplate。

废话不多说，一分钟上手

一个简单的例子（原生语法）：

<!--用于展示模版的位置-->

<div id="area"></div>



<script src="js/template-native.js"></script>

<!--用于存放模版-->

<script id="template" type="text/html">

    <div>

        <% for(i=0;i<content.length;++i) {%>

        <h1><%=content[i].province%></h1>

            <% for(j=0 ; j<content[i].city.length ; ++j){%>

            <p><%=content[i].city[j]%></p>

            <%}%>

        <%}%>

    </div>

</script>

<!--用于渲染模版-->

<script>

  var data={

    content:[

      {province:'四川',city:['成都','绵阳','自贡']},

      {province:'广东',city:['广州','东莞','佛山']},

      {province:'海南',city:['海口','三亚']}

    ]

  };

  var html=template('template',data);

  document.getElementById('area').innerHTML=html

</script>

总结：

art template语法分为两种：一种是原生语法，一种是简洁语法，我觉得原生更好理解，只是加个<%%>,其他和写js没什么区别
当模版引擎解析到<%%>时，会把其中的字符串作为js代码来执行，当<%%>中紧跟 “＝” 则会输出变量
每个模版引擎都包含：语法、变量赋值、动态解析js字符串，只是实现方式不同。个人认为模版引擎的性能取决于他的解析方式。
官网下载地址：https://github.com/aui/artTemplate#%E4%B8%8B%E8%BD%BD

秒客网

一分钟上手artTemplate

一分钟上手artTemplate

废话不多说，一分钟上手

总结：

相关文章