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

創(chuàng)新互聯(lián)公司專注于齊齊哈爾網(wǎng)站建設(shè)服務(wù)及定制，我們擁有豐富的企業(yè)做網(wǎng)站經(jīng)驗。 熱誠為您提供齊齊哈爾營銷型網(wǎng)站建設(shè)，齊齊哈爾網(wǎng)站制作、齊齊哈爾網(wǎng)頁設(shè)計、齊齊哈爾網(wǎng)站官網(wǎng)定制、小程序制作服務(wù)，打造齊齊哈爾網(wǎng)絡(luò)公司原創(chuàng)品牌,更為您提供齊齊哈爾網(wǎng)站排名全網(wǎng)營銷落地服務(wù)。

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

主要為了解決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ù)十分復(fù)雜的情況下，這種方式產(chǎn)生的代碼會十分不利于后期維護(hù)，這想必是每一個開發(fā)人員都不愿看到的。因此，便產(chǎn)生了前端模板以及對它們進(jìn)行處理的模板引擎。

二、artTemplate及TmodJS簡介

準(zhǔn)確的說，artTemplate（后文簡稱aT）才是模板引擎，而TmodJS（后文簡稱TJ，曾用名atc）則是依賴于前者的一款模板預(yù)編譯器。兩者都是由騰訊開發(fā)。其實aT完全可以獨立使用，而TJ存在的意義是提供了一個對模板進(jìn)行預(yù)編譯的環(huán)境（基于NodeJS和模塊化）。有了TJ，aT可以支持按目錄的方式存儲模板、以include的方式對指定目錄中的模板進(jìn)行調(diào)用（注意：這里的include和aT中的include不一樣，后者只能引用同一頁面中的不同模板標(biāo)簽）、自動監(jiān)控模板變化與自動編譯、依賴管理以及與grunt的結(jié)合等，可以說進(jìn)一步增強了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更為復(fù)雜，內(nèi)部進(jìn)行的封裝處理流程也更多，但其本質(zhì)上并未發(fā)生根本的變化。

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

也正是因為模塊化否的原因，兩者的差異還體現(xiàn)在模板的組織形式與編寫方式上。aT中，模板都要寫在同一個html頁面中，但不同模板可以分別寫在不同的