模板引擎介紹

什麼是模板引擎

模板引擎是爲了使用戶界面與業務數據（內容）分離而產生的,它能夠生成特定格式的文檔,用於網站的模板引擎就會生成一個標準的HTML文檔.其本質是利用正則表達式,替換模板當中預先定義好的標籤.

• 經常使用模板引擎
• ArtTemplate
• BaiduTemplate
• velocity.js
• Handlebars

ArtTemplate模板引擎介紹

原生語法

• 使用原生語法,帶入template-native.js文件
• 表達式 <% 與 %> 符號包裹起來的語句則爲模板的邏輯表達式。
• 輸出表達式 對內容編碼輸出 <%=content%> 不編碼輸出 <%=#content%>
• 邏輯 支持使用js原生語法
• 模板包含表達式
  用於嵌入子模板<% include('template_name') %>
  子模板默認共享當前數據，亦能夠指定數據<% include('template_name', news_list) %>

<script id="test" type="text/html">
<%if(admin){%>
    <%include('admin_content')%>
    <%for (var i=0;i<list.length;i++) {%>
        <div><%=i%>. <%=list[i].user%></div>
    <%}%>
<%}%>
</script>

簡潔語法

• 使用簡潔語法,引入template.js文件
• 表達式 {{ 與 }} 符號包裹起來的語句則爲模板的邏輯表達式。
• 輸出表達式 對內容編碼輸出 {{=content}} 不編碼輸出 {{#content}}
• 條件表達式

{{if admin}}
	<p>admin</p>
{{else if code > 0}}
	<p>master</p>
{{else}}
    <p>error!</p>
{{/if}}

• 遍歷表達式

{{each list as value index}}
    <li>{{index}} - {{value.user}}</li>
{{/each}}
//簡寫
{{each list}}
    <li>{{$index}} - {{$value.user}}</li>
{{/each}}

• 模板包含表達式
  用於嵌入子模板{{include 'template_name'}}
  子模板默認共享當前數據，亦能夠指定數據{{include 'template_name' news_list}}

渲染數據到頁面

模板生成好的頁面元素template("id",data)