[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)
- 前端入門
- 前端入職須知
- 前端自我定位
- pc與手機頁面差別
- 前端書單
- 前端種子計劃
- 前端技術棧
- ps
- ps入門階段
- html
- html入門
- html代碼規范
- meta
- table
- iframe
- a標簽詳解
- image
- html代碼審查工具
- h5專題
- h5入門
- h5新增屬性
- canvas畫布教程
- audio/video
- Geolocation
- Websockets
- Web storage
- Communication
- Web Workers
- requestAnimationFrame
- css
- css入門必學
- css代碼規范
- 項目字體規范
- css基本位置布局
- css常見樣式命名規則
- css代碼優化建議
- css常用樣式名
- css選擇器攻略
- css盒子模型的理解
- css屬性繼承與默認值
- css代碼審查工具
- css中常見的知識盲區
- css3新特性淺談
- css新特性了解
- border-radius
- background
- transform
- animation
- white-space
- css常用技術
- 文本兩端對齊
- css之浮動解決方案
- css優化建議
- 文本超出省略
- img-sprites
- rem布局教程
- 水平居中&垂直居中
- 固寬&變寬布局
- 寬高固定比例的盒模型
- 樣式預處理語言
- less教程
- sass教程
- postcss教程
- js
- javascript入門
- js代碼規范
- js基礎拓展
- js代碼審查工具
- js性能優化
- js基本語句
- 基本運算
- 基本語句語法
- js對象
- es6入門
- obj
- Array
- Date
- String
- Boolean
- Number
- Json
- RegExp
- Math
- function
- jquery入門
- jq核心思想
- jq基本語法
- jq插件庫匯總
- js常用技術
- break&continue區別
- js對日期轉換
- js控制運動-move.js
- 原生js-cookie語法
- ajax請求后回調
- 表單數據序列化
- zepto
- zepto入門
- 百度touchjs
- js編程
- 插件庫
- 功能性插件
- pdfjs
- wdatepicker
- qrcoder
- barcode插件
- photoviewer
- hammer.js
- echarts
- 交互組件
- layerjs
- java
- java入門
- java基本語句
- springMVC
- javaweb
- vm模板引擎
- freemarker
- maven教程
- mySql教程
- flex教程
- flex入門
- git教程
- git入門
- git分支
- git-tag管理
- git注意事項
- git-torise入門
- ide-git插件使用
- web
- web兼容
- web兼容思想
- pc端兼容適配文檔
- pc端兼容bug匯總
- ie兼容bug匯總
- 手機兼容bug匯總
- web安全
- jeecms
- web存儲
- app/h5組件
- 安卓教程
- ios教程
- 前端教程
- rubikx的教程
- 其他
- artTemplate
- tmod使用
- 跨域問題
- markdown教程
- 常用工具
- postman-api調試
- web常識
- 瀏覽器ua統計
- ui框架
- easyui
- bootstrap
- 入門推薦
- weui
- sui-pc
- sui-mobile
- layerUi