前端模板預編譯技術

時間 2019-11-19

標籤前端模板編譯技術简体版

原文原文鏈接

什麼是前端模板預編譯

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

按文件與目錄組織模板

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

模板支持引入子模板

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

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

強大之處

編譯模板爲不依賴引擎的 js 文件
前端模板按文件與目錄組織
模板之間支持引入外部模板
使用同步模板加載接口
可選多種規範的模塊輸出：AMD、CMD、CommonJS
支持做爲 GruntJS 的插件構建項目
模板目錄可被先後端共享
支持檢測修改即時編譯
支持模板運行時調試
配置文件支持多人共享

使用tmodJS

全局安裝

npm install -g tmodjs

編寫模板

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

模板語法

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

表達式

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

輸出表達式

對內容編碼輸出：github

{{content}}

不編碼輸出（編碼能夠防止數據中含有 HTML 字符串，避免引發 XSS 攻擊）web

{{#content}}

條件表達式

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

遍歷表達式

不管數組或者對象均可以用 each 進行遍歷。npm

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

亦能夠被簡寫：json

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

模板包含表達式

用於嵌入子模板：gulp

{{include 'template_name'}}

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

{{include 'template_name' news_list}}

include 路徑規範約定

路徑不能帶後綴名
路徑不可以進行字符串運算
路徑不能使用變量代替
必須使用以.開頭的相對路徑

輔助方法

{{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
    }
}