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

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

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

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

　　二、artTemplate及TmodJS簡介

　　準確的說，artTemplate（后文簡稱aT）才是模板引擎，而TmodJS（后文簡稱TJ，曾用名atc）則是依賴于前者的一款模板預(yù)編譯器。兩者都是由騰訊開發(fā)。其實aT完全可以獨立使用，而TJ存在的意義是提供了一個對模板進行預(yù)編譯的環(huán)境（基于NodeJS和模塊化）。有了TJ，aT可以支持按目錄的方式存儲模板、以include的方式對指定目錄中的模板進行調(diào)用（注意：這里的include和aT中的include不一樣，后者只能引用同一頁面中的不同模板標簽）、自動監(jiān)控模板變化與自動編譯、依賴管理以及與grunt的結(jié)合等，可以說進一步增強了aT的能力。目前，aT與TJ都可以通過npm獲?。簄pm install arttemplate -g/npm install tmodjs -g。

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

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

　　兩者的工作流程大致可以分為兩步：編輯模板和渲染模板。編輯模板就是將需要動態(tài)生成的DOM抽象成為模板，渲染則是利用渲染函數(shù)，把后端返回的數(shù)據(jù)填入模板中相應(yīng)的位置上，生成最終的html串并且回填到html頁面的指定位置中。因為TJ采用了模塊化加載技術(shù)，所以其模板的組織、引用以及渲染要比單純的aT更為復雜，內(nèi)部進行的封裝處理流程也更多，但其本質(zhì)上并未發(fā)生根本的變化。

　　因為aT沒有使用模塊化技術(shù)，所以頁面內(nèi)只需要引入aT的引擎文件即可使用。TJ由于使用了模塊化技術(shù)，故需要引入相應(yīng)標準的模塊化加載器。因為TJ已經(jīng)將引擎合并在編譯后的文件中，故不需要再單獨引入引擎文件。注意，若使用TJ，所有模板必須經(jīng)過tmod命令進行編譯后才能正常使用。

　　也正是因為模塊化否的原因，兩者的差異還體現(xiàn)在模板的組織形式與編寫方式上。aT中，模板都要寫在同一個html頁面中，但不同模板可以分別寫在不同的<script id="xxx" type="text/html">標簽中，每個模板用id作為命名以進行區(qū)分。之前提到過，雖然aT也支持include語句，但其只能包含同一頁面內(nèi)的模板。如果模板存放在其它目錄中則include無效。

　　TJ中，模板則是以html文件的形式存放。include語句可以包含不同目錄下的模板文件。通過tmod進行編譯時，其會在指定的模板目錄中按照引用關(guān)系逐個讀取模板文件，并將模板名稱和模板內(nèi)容封裝在函數(shù)a（）中備用。當所有模板均依此處理完成之后，其會將上述封裝的函數(shù)以及引擎代碼一并封裝并產(chǎn)生編譯后的js文件。該文件今后會通過require方式載入，拋出渲染函數(shù)template（）并用后端返回的數(shù)據(jù)執(zhí)行渲染并生成DOM的工作。

　　另外，兩者在調(diào)用渲染的方式上也有所不同。aT由于是獨立存在的，故直接通過調(diào)用template（'ID',data）即可。而TJ由于模塊化的原因，調(diào)用則相對復雜一些：

　　require（['編譯后產(chǎn)生的js文件（不包含后綴名）'], function （template） {

　　document.getElementById（'id'）。innerHTML=template（'模板入口', data）;

　　}）;

　　四、aT的簡明語法

　　aT分為兩種語法模式：簡單和原生。所謂原生就是其語法表現(xiàn)形式與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  調(diào)用頁面內(nèi)其它模板

　　{{include '模板ID'}}

　　4.4  渲染模板

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

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

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

　　4.5  其它功能

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

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

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

　　五、TJ的使用

　　TJ在安裝之后，便可通過執(zhí)行tmod命令來執(zhí)行相關(guān)的預(yù)編譯工作。這個預(yù)編譯也是以相關(guān)的配置作為編譯準則的，這個配置則存放在模板目錄下的package.json中。該文件的結(jié)構(gòu)如下：

　　{

　　"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"及其下相關(guān)各項：

　　1.output：編譯結(jié)果的輸出目錄

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

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

　　4.helpers：輔助函數(shù)

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

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

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

　　8.runtime：編譯后產(chǎn)生的js文件名。所謂編譯指的就是將模板轉(zhuǎn)化成模塊化的js代碼，并且將引擎（種子）與轉(zhuǎn)化后的模板合并在一個js文件中?？梢詫⑵淅斫鉃椤爸魅肟凇?/p>

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

　　10.minify：bool，是否壓縮

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

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

　　tmod [模板目錄] [配置參數(shù)]

　　1.--debug 輸出調(diào)試版本

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

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

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

　　5.--no-watch 關(guān)閉模板目錄監(jiān)控

　　6.--version 顯示版本號

　　7.--help 顯示幫助信息

　　tmod命令后跟隨的參數(shù)會自動覆蓋package.json中相應(yīng)屬性的值。

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

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