art-template簡介
artTemplate（后文簡稱aT）才是模板引擎，而TmodJS（后文簡稱TJ，曾用名atc）則是依賴於前者的一款模板預編譯器。兩者都是由騰訊開發。其實aT完全可以獨立使用，而TJ存在的意義是提供了一個對模板進行預編譯的環境（基於NodeJS和模塊化）。有了TJ，aT可以支持按目錄的方式存儲模板、以include的方式對指定目錄中的模板進行調用（注意：這里的include和aT中的include不一樣，后者只能引用同一頁面中的不同模板標簽）、自動監控模板變化與自動編譯、依賴管理以及與grunt的結合等，可以說進一步增強了aT的能力。目前，aT與TJ都可以通過npm獲取：npm install arttemplate -g/npm install tmodjs -g。
兩者的工作流程大致可以分為兩步：編輯模板和渲染模板。編輯模板就是將需要動態生成的DOM抽象成為模板，渲染則是利用渲染函數，把后端返回的數據 填入模板中相應的位置上，生成最終的html串並且回填到html頁面的指定位置中。因為TJ采用了模塊化加載技術，所以其模板的組織、引用以及渲染要比 單純的aT更為復雜，內部進行的封裝處理流程也更多，但其本質上並未發生根本的變化。
因為aT沒有使用模塊化技術，所以頁面內只需要引入aT的引擎文件即可使用。TJ由於使用了模塊化技術，故需要引入相應標准的模塊化加載器。因為 TJ已經將引擎合並在編譯后的文件中，故不需要再單獨引入引擎文件。注意，若使用TJ，所有模板必須經過tmod命令進行編譯后才能正常使用。
也正是因為模塊化否的原因，兩者的差異還體現在模板的組織形式與編寫方式上。aT中，模板都要寫在同一個html頁面中，但不同模板可以分別寫在不 同的<script id="xxx" type="text/html">標簽中，每個模板用id作為命名以進行區分。之前提到過，雖然aT也支持include語句，但其只能包含同一 頁面內的模板。如果模板存放在其它目錄中則include無效。
TJ中，模板則是以html文件的 形式存放。include語句可以包含不同目錄下的模板文件。通過tmod進行編譯時，其會在指定的模板目錄中按照引用關系逐個讀取模板文件，並將模板名 稱和模板內容封裝在函數a()中備用。當所有模板均依此處理完成之后，其會將上述封裝的函數以及引擎代碼一並封裝並產生編譯后的js文件。該文件今后會通 過require方式載入，拋出渲染函數template()並用后端返回的數據執行渲染並生成DOM的工作。
另外，兩者在調用渲染的方式上也有所不同。aT由於是獨立存在的，故直接通過調用template('ID',data)即可。而TJ由於模塊化的原因，調用則相對復雜一些：
require(['編譯后產生的js文件(不包含后綴名)'], function (template) {
document.getElementById('id').innerHTML = template('模板入口', data);
art-template語法
art-template有兩種語法，簡單和原生。個人比較喜歡簡單，下面僅以簡單語法舉例：
1、引入template.js文件
<script src="js/template.js" type="text/javascript"></script>
2.html代碼
<body>
<div id='container'></div> </body>
3.js代碼
<script id='test1' type='text/html'>
<h1>{{title}}</h1>
<ul>
{{each child as rs index}}
<li>{{index+1}}--{{rs}}</li>
{{/each}}
</ul>
{{include 'test2'}}
</script>
<script id='test2' type='text/html'>
<div>我是{{name}}!!!</div>
</script>
<script>
var data={
title:'hellow',
child:['a','b','c','d'],
name:'word'
}
var html=template('test1',data);
document.getElementById("container").innerHTML=html;
</script>
4、運行結果如下：
art-template其他常用功能
1、template(id,data)：根據id渲染模板。如果沒有data參數，那么將返回一個渲染函數。下面的效果與上面一樣。
<script> var data={ title:'hellow', child:['a','b','c','d'], name:'word' } var htmlFunc=template('test1'); document.getElementById("container").innerHTML=htmlFunc(data); </script>
2、template.compile(source,options)/template.render(source,options)：返回一個渲染函數。例如：
<script> var source='<h1>{{title}}</h1>' +'<ul>' +'{{each child as rs index}}' +'<li>{{index+1}}--{{rs}}</li>' +'{{/each}}' +'</ul>' +'我是{{name}}!!!' var data={ title:'hellow', child:['a','b','c','d'], name:'word' } var render=template.render(source); document.getElementById("container").innerHTML=render(data); </script>
運行效果與上面一致。
3、template.helper(name,callback)：自定義函數
4、temlpate.config(name,value)：修改引擎的默認配置。各項設置如下：
| openTag | string | '{{' | 邏輯語法開始標簽 |
| closeTag | string | '}}' | 邏輯語法結束標簽 |
| escape |
boolean | true | 是否編碼輸出HTML字符 |
| cache | boolean | true | 是否開啟緩存（依賴options） |
| compress | boolean | false | 是否壓縮HTML多余空白字符 |
art-template與seajs配合使用
tmod的使用
tmod在安裝之后，便可以通過執行tmod命令來執行相關的預編譯工作，這個預編譯也是以相關配置作為編譯准則的，這個配置則存放在模板目錄下的package.json中。該文件的結構如下：
{ "name": "template", "version": "1.0.1", "dependencies": { "tmodjs": "1.0.2" }, "tmodjs-config": { "output": "./new-build", 編輯結果的輸出目錄 "charset": "utf-8", 指定編譯所用的字符編碼 "syntax": "simple", 指明引擎所用的模式（簡單，原生） "helpers": null, 輔助函數 "escape": true, bool，是否對字符進行轉義，防止xss攻擊 "compress": true, bool，是否壓縮html多余的空白字符 "type": "default", 模板將采用哪種標准進行模塊化處理，可為cmd，amd，commonjs "runtime": "main.js", 編譯后產生的js文件名。所謂編譯是指將模板轉化成模塊化的js代碼，並且將引擎與轉化后的模板合並在一個js文件中。可以將其理解為‘主入口’ "combo": true, bool，是否合並模板，type為default時可用 "minify": true, bool，是否壓縮 "cache": false, 是否生成編譯緩存目錄 } }
在調用tmod命令時，其后也需（可）跟隨參數：
tmod [模板目錄] [配置參數]
1.--debug 輸出調試版本
2.--charset value 定義模板編碼，默認utf-8
3.--output value 定義輸出目錄，默認./build
4.--type value 定義輸出模塊格式，默認default，可選cmd、amd、commonjs
5.--no-watch 關閉模板目錄監控
6.--version 顯示版本號
7.--help 顯示幫助信息
注意：配置參數將會保存在模板目錄配置文件中，下次運行無需輸入配置參數（–no-watch 與 –debug 除外）。
tmod與seajs配合使用時
type為cmd時，每個模板就是單獨的模塊。
var render = require('./tpl/build/news/list'); var html = render(_list); _list為數據
不設置type時，默認為default,會將所有的模板編譯合並為template.js（包括引擎） 。
var template = require('/tpl/build/template.js'); var html = template('dblog', data); doblog為html文件（生產js文件）的名稱，因為是多個html編譯后合並了，數據是放在指定的html中的
package.json在執行tmod命令后自動生成，生成后可以手動修改其中的參數。
type設置成cmd時，編譯的js文件如下：
type為默認值時，編譯的js文件如下：
