artTemplate模版引擎的使用

時間 2019-11-29

標籤 arttemplate 模版引擎使用简体版

原文原文鏈接

artTemplate: javascript

template.js 一款 JavaScript 模板引擎，簡單，好用。提供一套模板語法，用戶能夠寫一個模板區塊，每次根據傳入的數據，生成對應數據產生的HTML片斷，渲染不一樣的效果。css

一、特性html

（1）、性能卓越，擁有接近 JavaScript 渲染極限的的性能, 執行速度一般是 Mustache 的 20 多倍（性能測試）前端

（2）、調試友好：語法、運行時錯誤日誌精確到模板所在行；支持在模板文件上打斷點（Webpack Loader）java

（3）、對 NodeJS Express 、Koa、Webpack友好支持json

（4）、支持模板繼承與子模板數組

（5）、支持include語句瀏覽器

（6）、可在瀏覽器端實現按路徑加載模板（詳情）性能

（7）、支持預編譯，可將模板轉換成爲很是精簡的 js 文件測試

（8）、模板語句簡潔，無需前綴引用數據，有簡潔版本與原生語法版本可選

（9）、支持全部流行的瀏覽器

二、語法

原生語法: ①引入插件文件：

② 邏輯表達式：<% %> 輸出表達式：<%= content %>---輸出是字符串裏面能夠寫js代碼、變量、判斷...

簡潔語法:

（1）、使用

引用簡潔語法的引擎版本，例如： <script src="dist/template.js"></script>

（2）、表達式

{{ }} 符號包裹起來的語句則爲模板的邏輯表達式。

（3）、輸出表達式

對內容編碼輸出： {{content}} 不編碼輸出： {{#content}} 編碼能夠防止數據中含有 HTML 字符串，避免引發 XSS 攻擊。

（4）、條件表達式

{{if admin}}

·<p> admin </p>

{{else if code > 0}}

· <p>master</p>

{{else}}

· <p>error!</p>

{{/if}}

（5）、遍歷表達式

不管數組或者對象均可以用 each 進行遍歷。

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

能夠被簡寫爲：

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

（6）、模板包含表達式

用於嵌入子模板。

子模板默認共享當前數據，亦能夠指定數據：{{include 'template_name' news_list}}

三、使用:

<!DOCTYPE html>
<html>
   <head>
       <meta charset="UTF-8">
       <title></title>
       <script type="text/javascript" src="js/template.js" ></script>
   </head>
    
   <body>
    
       <div id="container"></div>
        
        
       // 模版
       <script type="text/html" id="div">
           <h1>{{name}}</h1>
           <ul>
               {{each lang}}
               <li>語言:{{$value.title}} 定義:{{$value.add}}</li>
               {{/each}}
           </ul>
       </script>
        
        
　　　　// 數據
       <script type="text/javascript">
           var data = {
               name:"前端語言",
               lang:[{
                   title:"html",
                   add:"超文本標記語言"
               },{
                   title:"css",
                   add:"層疊樣式表"
               },{
                   title:"javaScript",
                   add:"添加動態特效"
               }]
           }
           var html = template('div',data);
           document.getElementById("container").innerHTML = html;
       </script>
   </body>
</html>