template.js文檔


參見GitHub:https://github.com/yanhaijing/template.js/

 

template.js簡介:

  template.js 一款javascript模板引擎,簡單,好用。

  template.js遵循簡單好用的原則,所有接口都設計簡單,職責單一。

 

 功能概述

提供一套模板語法,用戶可以寫一個模板區塊,每次根據傳入的數據,生成對應數據產生的HTML片段,渲染不同的效果。

# 特性

- 模版編譯,渲染
- 支持所有主流瀏覽器及Node(UMD)
- JavaScript原生語法
- 豐富的自定義配置
- 支持數據過濾
- 異常捕獲功能
- 功能專一,簡單好用

# 兼容性

- Node 0.10+
- Safari 6+ (Mac)
- iOS 5+ Safari
- Chrome 23+ (Windows, Mac, Android, iOS, Linux, Chrome OS)
- Firefox 4+ (Windows, Mac, Android, Linux, Firefox OS)
- Internet Explorer 6+ (Windows, Windows Phone)
- Opera 10+ (Windows, linux, Android)

 

快速上手

# 編寫模版

使用一個type="text/html"的script標簽存放模板,或者放到字符串中:

<script id="tpl" type="text/html">
    <ul>
        <%for(var i = 0; i < list.length; i++) {%>
            <li><%:=list[i].name%></li>
        <%}%>
    </ul>
</script>        

# 渲染模板

var tpl = document.getElementById('tpl').innerHTML;
template(tpl, {list: [{name: "yan"},{name: "haijing"}]});

輸出結果:

<ul>
  <li>yan</li>
  <li>haijing</li>
</ul>

更多例子,請見[demo](demo)目錄。

===============================================================================

模版語法
可在html代碼中使用javascript代碼。

# 表達式
開始標簽和結束標簽(如:<% 與 %>)包裹起來的語句則為模板的邏輯表達式。如下:

<%var a = 3%>
<%while(a--) {   console.log(a); }%>

上面的輸出如下:

> 2
> 1
> 0

# 輸出表達式

默認輸出(是否轉碼由escape參數決定):

<%=content%>

不編碼輸出:

<%:=content%>

對輸出內容進行HTML轉義:

<%:h=content%>

對輸出內容進行URL編碼:

<%:u=content%>

**注:編碼可以防止數據中含有 HTML 字符串,避免引起 XSS 攻擊。**

# 注釋
可使用js注釋,如下:

<%/* 這里是注釋 */%>

 

 

## template

唯一入口函數,支持編譯渲染,在傳統瀏覽器環境會占用template全局變量。

template函數會返回渲染數據的字符串,若缺省數據會返回編譯后的函數,可多次調用,傳入不同數據,返回不同結果,適用於多次渲染同一模版的情況,提高性能。

- tpl {string} 必須 帶編譯的模版字符串
- [data] {object} 可選 要渲染的數據
- return {function|string} 若缺省data返回函數,否則返回字符串

[演示](../demo/basic.html)

 

## template.config
配置template.js的自定義選項。

- option {Object} 配置的對象參數
- return {Object} 配置對象的鏡像

### 可配置參數

- sTag {String} 開始標簽 默認為 '<%'
- eTag {String} 結束標簽 默認為 '%>'
- compress {Boolean} 是否壓縮輸出的html 默認為false
- escape {Boolean} 默認是否對輸出內容進行html轉義 默認為true

[演示](../demo/config.html)

 

## template.registerFunction
注冊自定義函數功能。

- name {String} 自定義函數的名字,如果缺省會返回全部已注冊的函數
- fn {Function} 自定義函數,如果缺省會返回名稱為name的函數
- return {Object|Function} 對象或函數

 

## template.unregisterFunction
取消自定義函數功能。

- name {String} 取消自定義函數的名字
- return {Boolean} 是否成功

[演示](../demo/registerFunction.html)

 

## template.registerModifier
注冊自定義修復器功能。

- name {String} 自定義修復器的名字,如果缺省會返回全部已注冊的修復器
- fn {Function} 自定義修復器,如果缺省會返回名稱為name的修復器
- return {Object|Function} 對象或函數

 

## template.unregisterModifier
取消自定義修復器功能。

- name {String} 取消自定義修飾器的名字
- return {Boolean} 是否成功

[演示](../demo/registerModifier.html)

 

## template.noConflict+
在以原始方式使用template.js時會存在改函數(在模塊化開發環境中不會存在),用來釋放template.js占用的全局變量template。同時會返回template。

- return {Function} template

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM