[TOC] ## 前言 tmod作為前端頁面模板引擎，除了本身支持模板引擎的基本語法之外，還支持模板文件目錄，再我們開發項目實現模板復用，在減少開發量上有著無可替代的作用。 ## 性能 性能方面基本與artTemplate等同，不用過多擔心。 ## 與art-Template的對比 * 編譯模板為不依賴引擎的 js 文件 * 前端模板按文件與目錄組織(推薦使用的主要原因) * 模板之間支持引入外部模板(推薦使用的主要原因) * 使用同步模板加載接口 * 可選多種規范的模塊輸出：AMD、CMD、CommonJS * 支持作為 GruntJS 的插件構建項目 * 模板目錄可被前后端共享(推薦使用的主要原因) * 支持檢測修改即時編譯(推薦使用的主要原因) * 支持模板運行時調試(推薦使用的主要原因) * 配置文件支持多人共享(推薦使用的主要原因) ## 模塊的建立使用 ### 安裝 * 模塊安裝，請保證你的電腦已經安裝了nodejs,另外額外建議使用cnpm安裝模塊，并將地址設置到淘寶鏡像地址。 `npm install -g tmodjs` ### 模板語法：嵌入模板 * 模板包含表達式，子模板默認共享當前數據，也可以指定數據。 ~~~ {{include 'template_name'}} //子模板指定數據 {{include 'template_name' news_list}} {{include './public/applyResult-table'}} ~~~ * include路徑規定： > 1. 路徑不能帶后綴名 > 2. 路徑不能夠進行字符串運算 > 3. 路徑不能使用變量代替 > 4. 必須使用以.開頭的相對路徑 ### 基本語法參考 * 表達式，基本輸出內容表達式 `{{content}}` `{{content.attr}}` * 條件表達式 ~~~ {{if admin}} <p>admin</p> {{else if code > 0}} <p>master</p> {{else}} <p>error!</p> {{/if}} ~~~ * 遍歷表達式：無論是數組還是對象都可以用each語法遍歷 ~~~ {{each list}} <li>{{$index}} - {{$value.user}}</li> {{/each}} ~~~ * [更多語法參考：tmod官方語法文檔](https://github.com/aui/tmodjs/wiki/%E6%A8%A1%E6%9D%BF%E8%AF%AD%E6%B3%95) ### 模板編譯 * 命令行編譯基本格式 `tmod [模板目錄] [配置參數]` * 配置參數，[配置參數](https://github.com/csnikey/tmodjs#配置參數)將會保存在模板目錄配置文件中，下次運行無需輸入配置參數（--no-watch 與 --debug 除外）。 * 示例：配置產出腳本js的目錄：` tmod ./tpl --output ./build` * 模板目錄配置文件，一般情況下配置會保存在配置文件中，其內容可能如下：一般情況下我們使用默認項就可以。 ~~~ { "name": "template", "version": "1.0.0", "dependencies": { "tmodjs": "1.0.4" }, "tmodjs-config": { "output": "./build", "charset": "utf-8", "syntax": "simple", "helpers": null, "escape": true, "compress": true, "type": "default", "runtime": "template.js", "combo": true, "minify": true, "cache": true, "verbose": true } } ~~~ * 參考配置項圖文說明  * 產出文件 默認情況下，模板編譯出一個tempalte.js的模板文件，你可以在具體頁面中具體使用。 ### 模板使用 #### 一 并集的模板文件，此時需要引入template.js。 * 腳本方式,需要加載template.js ~~~ <script src="tpl/build/template.js"></script> var html = template('news/list', _list); document.getElementById('list').innerHTML = html; ~~~ * seajs方式,項目需要加載seajs文件，template.js不需要代碼加載 ~~~ seajs.use('./tpl/build/template', function (template) { document.getElementById('doc').innerHTML = template('index', data); }); ~~~ * requirejs方式,項目需要加載requirejs文件，template.js不需要代碼加載 ~~~ require(['./tpl/build/template'], function (template) { document.getElementById('doc').innerHTML = template('index', data); }); ~~~ * [ 參考官方寫法實例](http://aui.github.io/tmodjs/test/index.html) #### 二 分模塊的模板文件（現階段不推薦使用） type指定amd / cmd / commonjs的會按照模塊方式產出。此時每個模板就是一個單獨的模塊，無需引用 template.js： ~~~ var render = require('./tpl/build/news/list'); var html = render(_list); ~~~ ## 其他構建工具的支持 * grunt集成 `npm install grunt-tmod --save-dev`<br> 項目主頁：[https://github.com/Jsonzhang/grunt-tmod](https://github.com/Jsonzhang/grunt-tmod) * gulp集成 npm install gulp-tmod --save-dev 項目主頁：[https://github.com/lichunqiang/gulp-tmod](https://github.com/lichunqiang/gulp-tmod) ## 原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) * 注意事項： 1.待補充完善.... ## Q&A * TmodJS 需要部署到服務器中嗎？ 不需要，只要本地實現即可，基于nodejs是為了跨平臺。 * 如何將每個模板都編譯成單獨的 amd/cmd 模塊輸出？ 指定 type 參數即可，如--type cmd則可以讓每個模板都支持 RequireJS/SeaJS 調用。一般我們不用這種方式。 * 如何將模板編譯成 NodeJS 的模塊？ 指定 type 參數即可，如--type commonjs。 * 如何修改默認的輸出目錄？ 指定 output 參數即可，如--output ../../build。 * 我需要手動合并模板，如何讓 tmodjs 不合并輸出？ 編輯配置文件，設置combo:false。 * 原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) ## 參考項目 * gitlab上tmod的demo項目參考： * github上tmod的demo項目參考： ## 參考文檔 * [tmod-github參考文檔](https://github.com/csnikey/tmodjs)