資訊專欄INFORMATION COLUMN
摘要：置換型模板引擎的優(yōu)點(diǎn)實(shí)現(xiàn)簡(jiǎn)單，缺點(diǎn)效率低，無(wú)法滿足高負(fù)載的應(yīng)用請(qǐng)求。用途百度詞條模板引擎可以讓網(wǎng)站程序?qū)崿F(xiàn)界面與數(shù)據(jù)分離，業(yè)務(wù)代碼與邏輯代碼的分離，提升開發(fā)效率，良好的設(shè)計(jì)也提高了代碼的復(fù)用性。前端模板的出現(xiàn)使得前后端分離成為可能。
模板引擎
模板引擎-百度詞條
什么是模板引擎？（百度詞條）模板引擎（這里特指用于Web開發(fā)的模板引擎）是為了使用戶界面與業(yè)務(wù)數(shù)據(jù)分離而產(chǎn)生的，它可以生成特定格式的文檔，用于網(wǎng)站的模板引擎會(huì)生成一個(gè)標(biāo)準(zhǔn)的HTML文檔。
原理（百度詞條）模板引擎的實(shí)現(xiàn)方式有很多，最簡(jiǎn)單的是“置換型”模板引擎，這類模板引擎將指定模板內(nèi)容（字符竄）中的特定標(biāo)記（子字符竄）替換一下變生成了最終需要的業(yè)務(wù)數(shù)據(jù)（比如網(wǎng)頁(yè)）。
置換型模板引擎的優(yōu)點(diǎn)：實(shí)現(xiàn)簡(jiǎn)單， 缺點(diǎn)： 效率低，無(wú)法滿足高負(fù)載的應(yīng)用請(qǐng)求。
用途（百度詞條）模板引擎可以讓（網(wǎng)站）程序?qū)崿F(xiàn)界面與數(shù)據(jù)分離，業(yè)務(wù)代碼與邏輯代碼的分離，提升開發(fā)效率，良好的設(shè)計(jì)也提高了代碼的復(fù)用性。
我們司空見(jiàn)慣的模板安裝卸載等概念，基本上都和模板引擎有著千絲萬(wàn)縷的聯(lián)系。模板引擎不只是可以讓你實(shí)現(xiàn)代碼分離（業(yè)務(wù)邏輯代碼和用戶界面代碼），也可以實(shí)現(xiàn)數(shù)據(jù)分離（動(dòng)態(tài)數(shù)據(jù)與靜態(tài)數(shù)據(jù)），還可以實(shí)現(xiàn)代碼單元共享（代碼重用），設(shè)置是多語(yǔ)言、動(dòng)態(tài)頁(yè)面與靜態(tài)頁(yè)面自動(dòng)均衡（SDE）等等與用戶界面可能沒(méi)有關(guān)系的功能。
前端模板AJAX的出現(xiàn)使得前后端分離成為可能。
后端專注于業(yè)務(wù)邏輯，為前端提供接口。
前端通過(guò)AJAX的方式向后端的接口請(qǐng)求數(shù)據(jù)，然后動(dòng)態(tài)渲染頁(yè)面。
//假設(shè)接口數(shù)據(jù)如下
//[{friends: "Sharon"}, {friends: "Sandy"}, {friends: "Roc"}]
//假設(shè)渲染后的頁(yè)面
- Sharon
- Sandy
- Roc
模板引擎出現(xiàn)之前，當(dāng)然是在js中遍歷拼接字符竄。
確實(shí)很簡(jiǎn)單方便，但是也有很多缺點(diǎn)：
html代碼(View層) 和 JS代碼 （Controller層），UI與邏輯代碼混雜在一起，非常不便于閱讀。 一旦業(yè)務(wù)復(fù)雜起來(lái)，不容易維護(hù)。
從安全角度來(lái)講，也會(huì)有代碼注入攻擊風(fēng)險(xiǎn)（code injection)。
從代碼者的角度來(lái)講，如果需要拼接的HTML代碼里有很多引號(hào)的話（比如標(biāo)簽里面有很多屬性），那么就非常容易出錯(cuò)。
既然這樣，總要想辦法解決問(wèn)題！
這就引出模板引擎， Underscore的_.template可能是最簡(jiǎn)單的前端模板引擎了（或者可以說(shuō)，這就是個(gè)前端模板函數(shù)）。
引用_.template，將以上的代碼改寫。
這樣的話，前端需要改HTML代碼，只需要改模板即可。
用戶界面與邏輯代碼不在混雜，可維護(hù)性和擴(kuò)展性大大的提高了。
如何實(shí)現(xiàn)一個(gè)模板引擎呢？ 實(shí)現(xiàn)的思路是什么呢？
感興趣的話，可以看看我翻譯的兩篇文章。
翻譯_20行代碼創(chuàng)造JavaScript模板引擎（一）
翻譯_只需20行代碼創(chuàng)造JavaScript模板引擎（二）
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/98828.html
摘要：前端模板的出現(xiàn)使得前后端分離成為可能?？偨Y(jié)本文簡(jiǎn)單介紹了模板引擎在前后端的使用，下文我們回到，重點(diǎn)分析下的使用方式以及源碼原理。樓主對(duì)于模板引擎的認(rèn)識(shí)比較淺顯，有不正之處希望指出感謝 前言 這篇文章本來(lái)不打算寫的，實(shí)話說(shuō)樓主對(duì)前端模板的認(rèn)識(shí)還處在非常初級(jí)的階段，但是為了整個(gè) 源碼解讀系列 的完整性，在深入 Underscore _.template 方法源碼后，覺(jué)得還是有必要記下此文，...
摘要：來(lái)給大家推薦一款模板引擎，會(huì)推薦這款模板引擎最主要還是他輕量級(jí)，代碼簡(jiǎn)潔，好用，一個(gè)大概也才幾左右。 對(duì)于前端開發(fā)者來(lái)說(shuō)，有一個(gè)綁數(shù)據(jù)的模板是多么的幸福，不用我多說(shuō)大家也知道，終于不用在js中一個(gè)個(gè)字符串拼接一大推元素?cái)?shù)據(jù)啥的，可以省下我們很多時(shí)間。來(lái)給大家推薦一款模板引擎artTemplate，會(huì)推薦這款模板引擎最主要還是他輕量級(jí)，代碼簡(jiǎn)潔，好用，一個(gè)template.js大概也才幾...
摘要：來(lái)給大家推薦一款模板引擎，會(huì)推薦這款模板引擎最主要還是他輕量級(jí)，代碼簡(jiǎn)潔，好用，一個(gè)大概也才幾左右。 對(duì)于前端開發(fā)者來(lái)說(shuō)，有一個(gè)綁數(shù)據(jù)的模板是多么的幸福，不用我多說(shuō)大家也知道，終于不用在js中一個(gè)個(gè)字符串拼接一大推元素?cái)?shù)據(jù)啥的，可以省下我們很多時(shí)間。來(lái)給大家推薦一款模板引擎artTemplate，會(huì)推薦這款模板引擎最主要還是他輕量級(jí)，代碼簡(jiǎn)潔，好用，一個(gè)template.js大概也才幾...
摘要：歡迎來(lái)我的個(gè)人站點(diǎn)性能優(yōu)化其他優(yōu)化瀏覽器關(guān)鍵渲染路徑開啟性能優(yōu)化之旅高性能滾動(dòng)及頁(yè)面渲染優(yōu)化理論寫法對(duì)壓縮率的影響唯快不破應(yīng)用的個(gè)優(yōu)化步驟進(jìn)階鵝廠大神用直出實(shí)現(xiàn)網(wǎng)頁(yè)瞬開緩存網(wǎng)頁(yè)性能管理詳解寫給后端程序員的緩存原理介紹年底補(bǔ)課緩存機(jī)制優(yōu)化動(dòng) 歡迎來(lái)我的個(gè)人站點(diǎn) 性能優(yōu)化 其他 優(yōu)化瀏覽器關(guān)鍵渲染路徑 - 開啟性能優(yōu)化之旅 高性能滾動(dòng) scroll 及頁(yè)面渲染優(yōu)化 理論 | HTML寫法...
摘要：歡迎來(lái)我的個(gè)人站點(diǎn)性能優(yōu)化其他優(yōu)化瀏覽器關(guān)鍵渲染路徑開啟性能優(yōu)化之旅高性能滾動(dòng)及頁(yè)面渲染優(yōu)化理論寫法對(duì)壓縮率的影響唯快不破應(yīng)用的個(gè)優(yōu)化步驟進(jìn)階鵝廠大神用直出實(shí)現(xiàn)網(wǎng)頁(yè)瞬開緩存網(wǎng)頁(yè)性能管理詳解寫給后端程序員的緩存原理介紹年底補(bǔ)課緩存機(jī)制優(yōu)化動(dòng) 歡迎來(lái)我的個(gè)人站點(diǎn) 性能優(yōu)化 其他 優(yōu)化瀏覽器關(guān)鍵渲染路徑 - 開啟性能優(yōu)化之旅 高性能滾動(dòng) scroll 及頁(yè)面渲染優(yōu)化 理論 | HTML寫法...
閱讀 3089·2023-04-25 18:06
閱讀 3441·2021-11-22 09:34
閱讀 2944·2021-08-12 13:30
閱讀 2111·2019-08-30 15:44
閱讀 1737·2019-08-30 13:09
閱讀 1690·2019-08-30 12:45
閱讀 1777·2019-08-29 11:13
閱讀 3666·2019-08-28 17:51
