一個由JavaScript語言實現的高性能跨語言模板引擎:Crox
Crox 是一個由 JavaScript 語言實現的高性能跨語言模板引擎。Crox 模板可以直接在JavaScript環境中使用,也可以翻譯成 PHP、 JSP 等其他編程語言的可執行方法或翻譯成 Velocity、Smarty 等其他模板引擎的源模板,Crox 通過獨有的“模板邏輯直譯”技術保證翻譯后的結果在各種環境下都具備最佳執行效率。
說明
-
遍歷數組用 each,遍歷對象用 forin
-
=== !== == != 目前都允許,翻譯成 js 時保持不變
-
build 目錄下,是用 build.wsf(windows 下雙擊運行,需要 java、google closure compiler)生成的。
-
crox.js 是 web(js)版的
-
crox-all.js 還包含到 php、vm 的翻譯
-
crox2.js 是移動 web 版(比 crox.js 更輕量一點,不過差不多)
-
xxx-min.js 是相應的壓縮版
認識 Crox
為什么“又”做一個模板引擎
全端時代的展現端多樣化迫使后端服務純數據化改造進程加快,而在前端領域依靠前端構造展現的WebAPP架構與后臺輸出展現的傳統架構將長期共存。在此背景下一個能夠在多種架構環境中廣泛適用的跨語言模板引擎將帶給我們:
-
不同Web架構間從數據到HTML的構建過程的統一,這樣:
-
不同架構間的前端組件和區塊可以共享復用
-
前端工程師改開發Demo為開發模板,降低“套頁面”引入的質量風險
-
促成新型的同時支持前后端渲染的前端架構,可以:
-
解決單頁應用站點內容無法被搜索引擎抓取的問題
-
讓移動端在省電模式(高網速后臺渲染)和省流量模式(低網速前臺渲染)中靈活切換成為可能
-
基于語法、詞法分析的模板引擎將有助于區塊內基于數據變化進行局部刷新的技術實現
高性能是跨語言模板引擎能夠廣泛應用的前提
“高性能”是跨語言全端模板引擎的核心技術指標。因為無論在動輒數千QPS的后端環境下,還是在展現伴隨著內存和電力消耗的移動端,模板引擎的性能要求都比在PC端分布式運行的環境里高出太多。那么如何做到高性能呢?
-
通過邏輯“直譯”保障高效
-
通過明確的API定義保障邏輯"直譯"可行
因此,我們提出了Crox。
Crox是如何做到高性能和跨語言的呢?請先看看 Crox的概要設計文檔 吧
Crox模板語法
表達式輸出
-
{{root.name}}// 輸出 data.name
if選擇語句
-
{{#if root.length > 0}}有{{else}}沒了{{/if}}
循環語句
-
{{#each root val key}}{{key}}=>{{val}}{{/each}}
-
{{#forin root val key}}{{key}}=>{{val}}{{/forin}}
set賦值語句
-
{{set a = data.lilei.mother.phone.brand}}然后可以{{a.prop}}
include子模板導入
-
{{include "path/to/file.tpl"}}// 導入file.tpl
raw保留原始內容
-
{{#raw}}<script>console.log('{{#if}}{{/if}}')</script>{{/raw}}Crox翻譯輸出<script>console.log('{{#if}}{{/if}}')</script>
Crox模板語法已被 Kissy XTemplate 模板(有限)兼容
更多Crox模板語法說明,請點擊 這里
如果對Crox的編譯原理部分感興趣,歡迎翻閱 Crox語言規范