[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 如果改變了模板引入的目錄結構或者相關語法,是需要重新編譯執行命令行的。(使用教程)
- 前端入門
- 前端入職須知
- 前端自我定位
- 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