發佈一個開源極致的javascript模板引擎tpl.js

tpl.js(你們直接去https://git.oschina.net/tianqiq/tpl.js這個上面看)

簡介

tpl.js是一個比較極致(極小,極快,極簡單)的js模板引擎,能夠在各類js環境中使用。

特性

1. 使用js做爲模板語言,幾乎無學習成本
2. 小巧,速度快到極致
3. 極簡的語法,模板書寫很是流暢
4. mit開源,無限制

語法說明

簡述

tpl.js中模板語法中以行爲單一,分爲js行語句,和輸出行語句。顧名思義,js行語句是編譯時候會當作js執行的語句,
而輸出行語句,則是會輸出爲html。html

具體語法

1. 以行爲單位,每一行做爲語句塊,並去掉行先後空白字符
2. 若是行不是以<(左尖括號)開頭,則視爲js,若是不是,則視爲該行爲輸出行
3. 若是行以!(歎號)開頭,也視該行爲輸出行。如 !aa
4. 在輸出行中經過@{exp}這樣的表達式做爲js變量輸出。@{item.name}
5. 若是exp以.(點)開頭,則自動解析爲上個exp表達式中最後一個點的前面部分。如@{.name},將自動解析爲@{item.name}
6. 若是4中exp無特殊字符,如"、'、'<、 >等。則能夠省略{}中括號。如@.item.name @.name @func(item) @list[i]
7. 若是行以!!2個歎號開頭,則視該行爲純輸出行,不解析@表達式,原樣輸出。如!!abc@def
8. 若是行中出現@又不想要tpl.js解析,則經過\轉義。如\@abc

示例

API

  • tpl.html(tplText,daata)git

    經過傳遞tplText模板,和數據data直接獲取模板生成的html代碼。api

  • tpl.func(tplText)markdown

    將tplText編譯爲一個函數,該函數參數在模板中經過tplData引用。 調用後返回模板編譯後的html代碼。dom

  • tpl.render()函數

    自動渲染整個網頁中的<script type="tpl">標籤中的模板。並能保證html dom中原有的結構。至關於替換掉了原來的<script type="tpl">標籤學習

最後

上面的文檔包括了tpl.js全部的語法了,歡迎你們測試與反饋。
源碼地址:https://git.oschina.net/tianqiq/tpl.js測試

測試地址:http://runjs.cn/code/wlztch4d

真的無語,上面文檔裏面```html

```裏面是有不少例子代碼的, 可是在博客園markdown顯示不出來,.net

折騰半天,也不知道怎麼搞。你們直接去https://git.oschina.net/tianqiq/tpl.js這個上面看吧。哎...3d

相關文章
相關標籤/搜索