轉載自? ?baiduTemplate / artTemplate

JS引擎模板

---

一、baiduTeplate

模板語法

提供一套模板語法，用戶可以定義一個模板區塊，每次根據傳入的數據生成對應數據產生的html片段，從而渲染不同的界面效果；

優點：

• 語法簡單直觀，學習成本低，開發效率低，采用JavaScript的原生語法；
• 效率較高，默認html轉義(防止XSS攻擊)，并且支持包括URL轉義等多種轉義；
• 變量未定義直接輸出為空，防止頁面錯亂；
• 分隔符可以自定義；

用法

• 1.引入文件

使用百度模板時，需要引入baiduTemplate.js文件
<script src='./baiduTemplate.js' type='text/javascript'></script>

• 2.放置模板片段

• 頁面中，模塊可以放在<script>標簽中，設置type為text/html 或 text/template,用 id 標識，代碼示例：
  <script id="container1" type="text/html"> 模板部分 </script>
  2.或者存放在<textarea>中，一般情況設置其CSS樣式display:none來隱藏掉textarea，同樣用id來標識，代碼示例：
  <textarea id="container2" style="display:none;"> 模板部分 </textarea>
  3.直接定義變量存儲模板
  var tpl = "模板內容"；

• 3.調用引擎方式
  模板數據結構是json，可以在本地加載也可以從服務端加載過來
  方式1：baidu.template('container1',data); // 直接傳入id即可
  方式2：baidu.template(tpl,data); // tpl是傳入的模板(String類型),可以是模板的id也可以是一個模板片段的字符串，傳入模板和對應的數據返回對應的html片段
  方式3：只傳入tpl,這是返回的是一個編譯后的函數，可以把這個函數緩存下來，傳入不同的data就可以生成不同的html片段；
  代碼示例： var fun = baidu.template(tpl);
  fun(data); // data 產生的html片段
  fun(data1); // data1 產生的html片段

自定義 分隔符

模板的分隔符為%，也可以自定義，自定義語法如下：設置左分隔符：baidu.template.LEFT_DELIMITER = '<!';設置右分隔符：baidu.template.RIGHT_DELIMITER = '!>'

模板js語法

<% var test = function(){//函數體};if(1){}else{};function testFun(){return;};%>` 數據設置value值時，需要使用 =`var data={"title":'歡迎使用baiduTemplate',"list":['test1:默認支持HTML轉義，如輸出<script>，也可以關掉，語法<:=value> 詳見API','test2:','test3:','test4:list[5]未定義，模板系統會輸出空']};

?

二、atrTempalte

模板語法(兩個版本可供使用,原生與簡潔)

• 原生語法 原生語法需要引入原生語法版 template-native.js
  1.使用：
  在頁面中引用引擎： <script src='./template-native.js'></script>
  2.表達式：
  <% %> 符號包裹起來的語句則為模板的邏輯表達式；
  對內容編碼輸出：<%=data%>
  不編碼輸出：<%=#data%>
  編碼可以防止數據中含有 HTML 字符串，避免引起 XSS 攻擊。
  3.邏輯 支持js原生語法
  a.使用一個type="text/html"的script標簽存放模板：

<h1><%=#name%></h1><%for(var i = 0; i<friends.length;i++){%><ul><li><%=friends[i]%></li></ul><%}%>

b.渲染模板：?

var data = {name:'tom',friends:[{name:'cat'},{name:'jerry'},{name:'lily'}]}var html = template(id,data);document.body.innerHTML = html;

4.模板包含表達式，用于嵌套子模板
5.模板不能訪問全局對象，使用公用方法 template.helper(name,callback)注冊公用輔助方法

template.helper('$ubb2html', function (content) {// 處理字符串...return content;});

模板中使用方式：

<% $ubb2html(content) %>

• 簡介用法 簡潔語法需要引入簡潔語法版 template.js
  推薦使用，語法簡單實用，利于讀寫。
  1.使用：
  在頁面中引用引擎： <script src='./template.js'></script>
  2.表達式：
  {{ 與 }} 符號包裹起來的語句則為模板的邏輯表達式。
  條件表達式：

{{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}}

方法

• 1.template(id, data)；根據渲染模板。內部會根據document.getElementById(id)查找模板。如果沒有 data 參數，那么將返回一渲染函數。
• 2.template.compile(source, options)； 返回一個渲染參數
• 3.template.helper(name, callback)； 返回一個渲染結果(添加輔助方法)
• 4.template.config(name, value); 更改引擎的默認設置

artTemplate 支持nodejs Express

• 1.安裝：npm-install art-template
• 2.使用： var template = require('art-template');
  var data = {list:['data1','data2']};
  var html = template(__dirname + 'index/main',data);

Nodejs + Express

var template = require('art-template');template.config('base', '');template.config('extname', '.html');app.engine('.html', template.__express);app.set('view engine', 'html');//app.set('views', __dirname + '/views');

運行demo：
node demo/node-template-express.js

?

總結

以上是生活随笔為你收集整理的baiduTemplate / artTemplate的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。