[TOC] ## 前言 tmod作為前端頁面模板引擎，除了本身支持模板引擎的基本語法之外，還支持模板文件目錄，再我們開發項目實現模板復用，在減少開發量上有著無可替代的作用。 ## 與其他模板引擎的效率對比 tmod本身執行效率與art-Template基本等同，我們用市場上已有的模板引擎做下渲染對比。 * 通過github項目的在線速度測試，[測試地址](https://aui.github.io/art-template/example/web-test-speed/) * 已得到的性能對比視圖  ## 原理實現 * 為什么這個引擎比其他模板引擎快也是我們需要獲知的。可能的原因如下： 1、預編譯 在上述模板引擎實現原理中，因為要對模板變量進行賦值，所以每次渲染都需要動態編譯 javascript 字符串完成變量賦值。而 artTemplate 的編譯賦值過程卻是在渲染之前完成的，這種方式稱之為“預編譯”。artTemplate 模板編譯器會根據一些簡單的規則提取好所有模板變量，聲明在渲染函數頭部。 ## 與art-Template的對比優點 * 編譯模板為不依賴引擎的 js 文件 * 前端模板按文件與目錄組織（推薦使用主要原因） * 模板之間支持引入外部模板 * 使用同步模板加載接口 * 可選多種規范的模塊輸出：AMD、CMD、CommonJS * 支持作為 GruntJS 的插件構建項目 * 模板目錄可被前后端共享 * 支持檢測修改即時編譯 * 支持模板運行時調試 * 配置文件支持多人共享 ## 模塊的建立使用 * 模塊安裝 * 模塊使用與配置 ## 基本語法 * 子模板 * 繼承模板 * 框架模板 ### 基本語法參考 * 循環 * 判斷 * 屬性值獲取 * 是的 * [更多語法參考：tmod官方語法文檔](https://github.com/aui/tmodjs/wiki/%E6%A8%A1%E6%9D%BF%E8%AF%AD%E6%B3%95) ## 模板的最終使用 ## 原artTemplate模板的遷移 * [頁面模板遷移指南](https://github.com/aui/tmodjs/wiki/%E9%A1%B5%E9%9D%A2%E4%B8%AD%E7%9A%84%E6%A8%A1%E6%9D%BF%E8%BF%81%E7%A7%BB%E6%8C%87%E5%8D%97) * 注意事項 ## 參考文檔 * 參考文檔 //template頁面模板使用教程，以下原則or建議不分先后，請仔細閱讀，遵守編碼規范 1 針對當前頁面使用頁面模板的，建議使用原始方法，直接script標簽加id,然后使用 2 針對多個頁面會使用到的頁面代碼，建議加載到tpl目錄，獨立文件放在與package.json同級目錄，template("")語法時直接文件名稱就可。 3 需要的文件目錄結構符合要求，tpl目錄下游package.json,同目錄的html外層文件，.build 的產出js目錄，以及其他自定義的頁面文件夾以及頁面， 比如public>copyright.html等，建議所有的文件以html為后綴名。 4 模板文件中需要的樣式或者腳本，建議整合文件中引入或者通過reqiure中引入。 5 模板語法 參考：https://github.com/aui/artTemplate 6 計算機打開cmd命令行，npm install -g tmodjs 全局新建這個模塊 7 cd 切換目錄到tpl的上一屆目錄結構（使用教程） 8 tmod tpl 實時編譯運行模板文件，保證cmd窗口打開的情況下，所有的tpl模板文件是實時更新的（使用教程） 9 頁面引入 ，引入產出目錄build結構的template.js，然后template("")對應的文件，得到html字符串，吧對應的div的html替換即可。（使用教程） 10 命名 ，嵌入模板的外層建議命名為m-開頭的，而嵌入部分的外層div建議使用i-開頭的，后面的2 3位單詞保持一致對應。（使用教程） 11 如果改變了模板引入的目錄結構或者相關語法，是需要重新編譯執行命令行的。（使用教程）