模板引擎artTemplate及模板預編譯器的知識點有哪些

這篇文章主要講解了“模板引擎artTemplate及模板預編譯器的知識點有哪些”，文中的講解內容簡單清晰，易于學習與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學習“模板引擎artTemplate及模板預編譯器的知識點有哪些”吧！

　　一、為什么要使用前端模板？

　　主要為了解決UI層與業務邏輯的糾纏不清。比如我們需要根據后端返回的數據動態生成一個表格或者類似表格的DOM（比如ul > li等）時，按照傳統的方式，需要我們先獲取數據，然后在頁面的js中通過遍歷數據、提取相關數值以及動態拼接html字串的方式，生成最終的DOM。這樣就產生了UI與業務邏輯的糾纏。如果只是偶爾或者局部使用可能問題不明顯，但如果代碼量龐大、業務或數據十分復雜的情況下，這種方式產生的代碼會十分不利于后期維護，這想必是每一個開發人員都不愿看到的。因此，便產生了前端模板以及對它們進行處理的模板引擎。

　　二、artTemplate及TmodJS簡介

　　準確的說，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。

　　更多詳情和DEMO，可以參考：以及

　　三、aT和TJ的工作流程與差異

　　兩者的工作流程大致可以分為兩步：編輯模板和渲染模板。編輯模板就是將需要動態生成的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）;

　　}）;

　　四、aT的簡明語法

　　aT分為兩種語法模式：簡單和原生。所謂原生就是其語法表現形式與JS語法更為相似。不過個人更加喜歡簡單模式，理由是簡單。原生這種方式也只是類似而已，與其似像似不像不如來個更簡單直接的。這里也只介紹簡明語法模式。

　　4.1  if判斷

　　{{if var}}

　　// some code&hellip;

　　{{/if}}

　　4.2  遍歷對象

　　{{each obj}}

　　// some code&hellip;

　　{{/each}}

　　或者

　　{{each obj as value i}}

　　// some code&hellip;

　　{{/each}}

　　4.3  調用頁面內其它模板

　　{{include '模板ID'}}

　　4.4  渲染模板

　　var rendered=template（'ID',data）;  //ID即模板ID，data即從后端返回的數據，此種調用返回渲染后的html串

　　var renderFunc=template（'ID'）;  //如果僅指定了模板ID，則返回一個渲染函數

　　var renderFunc=template（模板變量）;  //如果將模板存儲在變量中，且僅指定了該變量，則返回一個渲染函數

　　4.5  其它功能

　　{{print}}  //輸出變量值

　　template.helper（name,callback）;  //在模板中使用自定義的函數。相應的，模板中應該這樣寫：{{arg1 | dateFormat:arg2}}

　　template.config（name,value）;  //修改引擎的默認配置。各項設置如圖：

　　五、TJ的使用

　　TJ在安裝之后，便可通過執行tmod命令來執行相關的預編譯工作。這個預編譯也是以相關的配置作為編譯準則的，這個配置則存放在模板目錄下的package.json中。該文件的結構如下：

　　{

　　"name": "template",

　　"version": "1.0.1",

　　"dependencies": {

　　"tmodjs": "1.0.2"

　　},

　　"tmodjs-config": {

　　"output": "",

　　"charset": "utf-8",

　　"syntax": "simple",

　　"helpers": null,

　　"escape": true,

　　"compress": true,

　　"type": "default",

　　"runtime": "main.js",

　　"combo": true,

　　"minify": true,

　　"cache": false

　　}

　　}

　　其中主要用到的是"tmodjs-config"及其下相關各項：

　　1.output：編譯結果的輸出目錄

　　2.charset：指定編譯所用的字符編碼

　　3.syntax：指明引擎所用的模式（簡單/原生）

　　4.helpers：輔助函數

　　5.escape：bool，是否對字符進行轉義（防止XSS攻擊）

　　6.compress：bool，是否壓縮html多余的空白字符

　　7.type：模板將采用哪種標準進行模塊化處理，可為cmd、amd、commonjs

　　8.runtime：編譯后產生的js文件名。所謂編譯指的就是將模板轉化成模塊化的js代碼，并且將引擎（種子）與轉化后的模板合并在一個js文件中。可以將其理解為“主入口”

　　9.combo：bool，是否合并模板（type值為default時可用）

　　10.minify：bool，是否壓縮

　　11.cache：bool，是否生成編譯緩存目錄（1.0.2版本貌似此選項無效）

　　上面是寫在package.json中的配置。在調用tmod命令時，其后也需（可）跟隨參數：

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

　　1.--debug 輸出調試版本

　　2.--charset value 定義模板編碼，默認utf-8

　　3.--output value 定義輸出目錄，默認

　　4.--type value 定義輸出模塊格式，默認default，可選cmd、amd、commonjs

　　5.--no-watch 關閉模板目錄監控

　　6.--version 顯示版本號

　　7.--help 顯示幫助信息

　　tmod命令后跟隨的參數會自動覆蓋package.json中相應屬性的值。

　　編譯后，我們會在編譯結果的輸出目錄中看到一個名為“。cache”目錄，這個就是編譯過程中產生的緩存文件。該目錄可以被刪除，不影響最終的使用，因為其內容已被整合到“runtime”指定的js文件中了。

感謝各位的閱讀，以上就是“模板引擎artTemplate及模板預編譯器的知識點有哪些”的內容了，經過本文的學習后，相信大家對模板引擎artTemplate及模板預編譯器的知識點有哪些這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關知識點的文章，歡迎關注！