總述

　　模板這個詞，可能很多人第一印象是后端的技術(shù)（Smarty，Velocity等），但本文要講的卻不是后端的概念，而是前端開發(fā)中所使用到的一種技術(shù)，也就是“前端模板”技術(shù)。

　　模板的工作原理可以簡單地分成兩個步驟：模板解析（翻譯）和數(shù)據(jù)渲染。這兩個步驟可分別部署在前端或后端來執(zhí)行。如果都放在后端執(zhí)行，則是像Smarty這樣的后端模板，而如果都放在前端來執(zhí)行，則是我們要探討的前端模板。

　　問題

　　隨著前端交互的復(fù)雜性不變提升，無刷新頁面數(shù)據(jù)傳輸與渲染越發(fā)地頻繁化，我們發(fā)現(xiàn)傳統(tǒng)的前端開發(fā)方式在ajax數(shù)據(jù)渲染等方面存在著一個主要問題：繁瑣的數(shù)據(jù)渲染。當(dāng)前端從后臺通過ajax等方式或許到數(shù)據(jù)后，如果要將這個數(shù)據(jù)渲染到指定的dom元素中，則需要進(jìn)行各種字符串拼接工作或者一系列創(chuàng)建元素的工作，還不論細(xì)節(jié)的問題（單引號雙引號問題等），不管是哪一種形式，都是繁瑣且費(fèi)時的。同時，在可讀性與維護(hù)性上也存在問題。試想，各種循環(huán)操作的字符串拼接，元素創(chuàng)建插入，在需要修改時，都需要重新花費(fèi)不少時間與精力。那有什么方法可以解決這個問題呢?

　　原理

　　當(dāng)我們在JSP中寫ulli%= name %/li/ul的時候，其實(shí)就是在應(yīng)用模板，在后臺這句話會被轉(zhuǎn)換成out.print(ulli+name+/li/ul)。模板的數(shù)據(jù)渲染就是把模板中的占位符（這里是name），替換成傳入的值（比如替換成yaya）。而在前端開發(fā)中，這種方式依然具有很高實(shí)用價值。前端模板的核心是前端模板引擎，引擎將前端的模板語言轉(zhuǎn)換成瀏覽器可以解析的html語言。當(dāng)轉(zhuǎn)換成功后，便可以很方便地將這段html代碼放到我們希望的地方去。

　　比如我們可以寫一段循環(huán)的li標(biāo)簽的前端模板語言。通過前端模板引擎轉(zhuǎn)換后成為一連串li標(biāo)簽的html語言。這時候就可以直接采用innerHTML方法把html代碼插入到ul對象中，那么就完成了生成ul列表的功能。

　　初識

　　前端的模板核心是模板解析引擎，而解析引擎的主要作用是將模板語言轉(zhuǎn)換成html/xml格式。不同的前端模板有著不同的模板語言，解析引擎因此也各不相同。讓我們先來認(rèn)識幾款前端模板，了解下它們各自的模板語言。

　　Yaya Template是一款輕量級的模板引擎，采用原生Javascript語法，具有易學(xué)易用等特點(diǎn)。我們來看一段用Yaya Template渲染列表數(shù)據(jù)的實(shí)例：

　　模板語言（通用過for循環(huán)，輸出這是第n列的li列表）

it知識庫：初識前端模板，轉(zhuǎn)載需保留來源！

鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請第一時間聯(lián)系我們修改或刪除，多謝。