總述

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

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

　　問(wèn)題

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

　　原理

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

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

　　初識(shí)

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

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

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

it知識(shí)庫(kù)：初識(shí)前端模板，轉(zhuǎn)載需保留來(lái)源！

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