前端模板預編譯技術

什么是前端模板預編譯

前端模板預編譯通過預編譯技術讓前端模板突破瀏覽器限制，實現后端模板一樣的同步“文件”加載能力。它采用目錄來組織維護前端模板，從而讓前端模板實現工程化管理，最終保證前端模板在復雜單頁 web 應用下的可維護性。同時預編譯輸出的代碼經過多層優化，能夠在最大程度節省客戶端資源消耗。

按文件與目錄組織模板

template('tpl/home/main', data)

模板支持引入子模板

{{include '../public/header'}}

　　

TmodJS 一經啟動，就無需人工干預，每次模板創建與更新都會自動編譯，引入一個 js 即可使用template(path)接口調用本地模板文件，直到正式上線都無需對代碼進行任何修改，整個過程簡單自然。

強大之處

1. 編譯模板為不依賴引擎的 js 文件
2. 前端模板按文件與目錄組織
3. 模板之間支持引入外部模板
4. 使用同步模板加載接口
5. 可選多種規范的模塊輸出：AMD、CMD、CommonJS
6. 支持作為 GruntJS 的插件構建項目
7. 模板目錄可被前后端共享
8. 支持檢測修改即時編譯
9. 支持模板運行時調試
10. 配置文件支持多人共享

使用tmodJS

全局安裝

npm install -g tmodjs

編寫模板

TmodJS 的前端模板不再耦合在業務頁面中，而是和后端模板一樣有專門的目錄管理。目錄名稱只支持英文、數字、下划線的組合，一個模板對應一個.html文件。

模板語法

和artTemplate一脈相承，建議協同使用。

表達式

{{ 與 }} 符號包裹起來的語句則為模板的邏輯表達式。

輸出表達式

對內容編碼輸出：

{{content}}

不編碼輸出（編碼可以防止數據中含有 HTML 字符串，避免引起 XSS 攻擊）

{{#content}}

條件表達式

{{if admin}}
    <p>admin</p>
{{else if code > 0}}
    <p>master</p>
{{else}}
    <p>error!</p>
{{/if}}

遍歷表達式

無論數組或者對象都可以用 each 進行遍歷。

{{each list as value index}}
    <li>{{index}} - {{value.user}}</li>
{{/each}}

亦可以被簡寫：

{{each list}}
    <li>{{$index}} - {{$value.user}}</li>
{{/each}}

模板包含表達式

用於嵌入子模板：

{{include 'template_name'}}

子模板默認共享當前數據，亦可以指定數據：

{{include 'template_name' news_list}}

include 路徑規范約定

1. 路徑不能帶后綴名
2. 路徑不能夠進行字符串運算
3. 路徑不能使用變量代替
4. 必須使用以.開頭的相對路徑

輔助方法

{{time | dateFormat:'yyyy-MM-dd hh:mm:ss'}}

支持傳入參數與嵌套使用：

{{time | say:'cd' | ubb | link}}

為了模板可維護，模板本身是不能隨意訪問外部數據的，它所有的語句都將運行在一個沙箱中。如果需要訪問外部對象可以注冊輔助方法，這樣所有的模板都能訪問它們。

新建一個輔助方法文件配置 
在模板目錄新建一個 config/template-helper.js 文件，然后編輯 package.json 設置”helpers”: “./config/template-helper.js”。

編寫輔助方法 
在 config/template-helper.js 中聲明輔助方法。

以日期格式化為例：

template.helper('dateFormat', function (date, format) {

    date = new Date(date);

    var map = {
        "M": date.getMonth() + 1, //月份 
        "d": date.getDate(), //日 
        "h": date.getHours(), //小時 
        "m": date.getMinutes(), //分 
        "s": date.getSeconds(), //秒 
        "q": Math.floor((date.getMonth() + 3) / 3), //季度 
        "S": date.getMilliseconds() //毫秒 
    };
    format = format.replace(/([yMdhmsqS])+/g, function(all, t){
        var v = map[t];
        if(v !== undefined){
            if(all.length > 1){
                v = '0' + v;
                v = v.substr(v.length-2);
            }
            return v;
        }
        else if(t === 'y'){
            return (date.getFullYear() + '').substr(4 - all.length);
        }
        return all;
    });
    return format;
});

調用：

{{time | dateFormat:'yyyy-MM-dd hh:mm:ss'}}

編譯模板

只需要運行tmod這個命令即可，默認配置參數可以滿足絕大多數項目。

tmod [模板目錄] [配置參數]

注意：模板目錄必須是模板的根目錄，若無參數則為默認使用當前工作目錄，tmodjs 會監控模板目錄修改，每次模板修改都會增量編譯。

配置參數

• --debug 輸出調試版本
• --charset value 定義模板編碼，默認utf-8
• --output value 定義輸出目錄，默認./build
• --type value 定義輸出模塊格式，默認default，可選cmd、amd、commonjs
• --no-watch 關閉模板目錄監控
• --version 顯示版本號
• --help 顯示幫助信息

注意：配置參數將會保存在模板目錄配置文件中，下次運行無需輸入配置參數（–no-watch 與 –debug 除外）。

舉個例子

tmod ./tpl --output ./build

使用模板

根據編譯的 type 的配置不同，會有兩種不同使用方式：

使用默認的格式

TmodJS 默認將整個目錄的模板壓縮打包到一個名為 template.js 的腳本中，可直接在頁面中使用它：

<script src="tpl/build/template.js"></script>
<script>
    var html = template('news/list', _list);
    document.getElementById('list').innerHTML = html;
</script>

RequireJS、SeaJS、NodeJS 加載 在線實例 http://aui.github.io/tmodjs/test/index.html

指定格式（amd / cmd / commonjs)

此時每個模板就是一個單獨的模塊，無需引用 template.js：

var render = require('./tpl/build/news/list');
var html = render(_list);

注意：模板路徑不能包含模板后綴名

演示

TmodJS 源碼包中test/tpl是一個演示項目的前端模板目錄，基於默認配置。切換到源碼目錄后，編譯：

tmod test/tpl

編譯完畢后你可以在瀏覽器中打開 test/index.html 查看如何使用編譯后的模板。

配置

TmodJS 的項目配置文件保存在模板目錄的 package.json 文件中：

{
    "name": "template",
    "version": "1.0.0",
    "dependencies": {
        "tmodjs": "1.0.0"
    },
    "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": false
    }
}

gulp配置

讓 TmodJS 作為 Gulp 的一個插件使用：

npm install gulp-tmod --save-dev

由@lichunqiang開發，項目主頁：https://github.com/lichunqiang/gulp-tmod

常見Q&A

問：TmodJS 需要部署到服務器中嗎？

不需要，這是本地工具，基於 NodeJS 編寫是為了實現跨平台。

問：如何將每個模板都編譯成單獨的 amd/cmd 模塊輸出？

指定 type 參數即可，如–type cmd則可以讓每個模板都支持 RequireJS/SeaJS 調用。

問：如何將模板編譯成 NodeJS 的模塊？

指定 type 參數即可，如–type commonjs。

問：線上運行的模板報錯了如何調試？

開啟 debug 模式編譯，如–debug，這樣會輸出調試版本，可以讓你快速找到模板運行錯誤的語句以及數據。

問：如何不壓縮輸出 js？

編輯配置文件，設置”minify”: false。

問：如何修改默認的輸出目錄？

指定 output 參數即可，如–output ../../build

如何讓模板訪問全局變量？

具體參考上面的 輔助方法。

問：可以使用使用類似 tmpl 那種的 js 原生語法作為模板語法嗎？

可以。編輯配置文件，設置”syntax”: “native”即可，目前 TmodJS 默認使用的是 simple 語法。

問：如何兼容舊版本 atc 的項目？

編輯配置文件，分別設置”type”: “cmd”、”syntax”: “native”、”output”: “./”

問：如何遷移原來寫在頁面中的 artTemplate 模板，改為 TmodJS 這種按按文件存放的方式？

參考 《頁面中的模板遷移指南》

問：我需要手動合並模板，如何讓 tmodjs 不合並輸出？

編輯配置文件，設置combo:false。