一分鍾上手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