模板的工作原理可以簡(jiǎn)單地分成兩個(gè)步驟：模板解析（翻譯）和數(shù)據(jù)渲染。這兩個(gè)步驟可分別部署在前端或后端來(lái)執(zhí)行。如果放在后端執(zhí)行，則是像Smarty，F(xiàn)reeMarker這樣的后端模板引擎，而如果放在前端來(lái)執(zhí)行，則是我們要探討的前端模板。
FreeMarker是一個(gè)模板引擎，一個(gè)基于模板生成文本輸出的通用工具，使用純Java編寫(xiě)，模板用servlet提供的數(shù)據(jù)動(dòng)態(tài)地生成 HTML，模板語(yǔ)言是強(qiáng)大的直觀(guān)的，編譯器速度快，輸出接近靜態(tài)HTML頁(yè)面的速度。這里不再對(duì)后端模版進(jìn)行描述。
前端模版提高了前端開(kāi)發(fā)的可維護(hù)性（后期改起來(lái)方便）以及可擴(kuò)展性（想要增加功能，增加需求方便）；提高了開(kāi)發(fā)效率提高（程序邏輯組織更好，調(diào)試方便）；最重要的一點(diǎn)就是：【視圖（包括展示渲染邏輯）與程序邏輯的分離】。好處是減輕服務(wù)器負(fù)擔(dān)，壞處是可能不利于seo以及模版錯(cuò)誤不好調(diào)試。
當(dāng)今前端模版主要有三類(lèi)：
-String-based 模板技術(shù) (基于字符串的parse和compile過(guò)程) -Dom-based 模板技術(shù) (基于Dom的link或compile過(guò)程) -雜交的Living templating 技術(shù) (基于字符串的parse 和 基于dom的compile過(guò)程)。
一.前端模版的演變
傳統(tǒng)的前端開(kāi)發(fā)方式是通過(guò)通過(guò)ajax獲取數(shù)據(jù)進(jìn)行繁瑣的數(shù)據(jù)渲染。隨著前端頁(yè)面的交互越來(lái)越繁雜，頁(yè)面無(wú)刷新的傳輸與頁(yè)面的顯然也越發(fā)的頻繁，導(dǎo)致頁(yè)面性能低下。即當(dāng)前端從后臺(tái)通過(guò)ajax等方式獲取到數(shù)據(jù)更新后，都需要將這個(gè)數(shù)據(jù)渲染到指定的dom元素中，需要重新進(jìn)行各種字符串拼接工作或者一系列創(chuàng)建元素的工作，這種方式是繁瑣且費(fèi)時(shí)的。這種在可讀性和維護(hù)性上也存在問(wèn)題。
基于字符串的模板引擎最大的功勞就是把你從大量的夾帶邏輯的字符串拼接中解放出來(lái)了，由于它的完全基于字符串的特性，它擁有一些無(wú)可替代的優(yōu)勢(shì)。如下的字符串拼接：
