如果你從事前端開(kāi)發(fā)的話，或者使用javascript開(kāi)發(fā)動(dòng)態(tài)前端頁(yè)面比較多的話，對(duì)于javascript模板引擎一定不會(huì)陌生。關(guān)注gbin1博客的朋友肯定還記得我們?cè)��?jīng)介紹過(guò)的一個(gè)在線選擇javascript模板引擎的工具網(wǎng)站：template engine chooser ，使用工具可以幫助你大體的了解不同的javascript模板引擎的特點(diǎn)，并且有效幫助你根據(jù)你的具體需求來(lái)選擇js模板引擎。在今天的這篇GBin1專(zhuān)題教程中，我們將介紹比較流行的javascript模板引擎handlebars，如果你沒(méi)有接觸過(guò)的話，希望在閱讀完我們的教程后，能對(duì)它有一個(gè)大體的了解，并且能夠有機(jī)會(huì)應(yīng)用到你的開(kāi)發(fā)項(xiàng)目中去。由于時(shí)間和個(gè)人認(rèn)知的深度關(guān)系，有可能有些不夠準(zhǔn)確的地方，如果你發(fā)現(xiàn)有任何不準(zhǔn)確的地方，請(qǐng)?jiān)诒疚哪┪蔡幗o我們留言，或者訪問(wèn)我們的GB標(biāo)簽社區(qū)提問(wèn)或者留言。我們將及時(shí)的修改內(nèi)容，希望能夠給廣大的前端開(kāi)發(fā)程序猿提供最好的技術(shù)教程，如果你也有原創(chuàng)的教程，歡迎投遞到我們博客或者標(biāo)簽社區(qū)！

什么是javascript模板引擎？

javascript模板引擎可以用來(lái)幫助開(kāi)發(fā)人員有效的組織和分離前端頁(yè)面代碼中的顯示層和數(shù)據(jù)層兩個(gè)部分。這里我們主要集中在在前端頁(yè)面內(nèi)容的展示方面。如果你接觸過(guò)后端相關(guān)開(kāi)發(fā)的話，基本的思路和目地是一致的。具體這里我們舉個(gè)簡(jiǎn)單的例子：

如果你需要將一個(gè)來(lái)自后臺(tái)的JSON數(shù)據(jù)對(duì)象轉(zhuǎn)化成頁(yè)面顯示內(nèi)容的話，通常使用如下方式（具體演示使用jQuery）：

var siteinfo={‘sitename’：‘terry li’， ‘siteurl’：‘gbin1.com’}， userwrapper = $（‘《ul/》’）;userwrapper.append（‘《li/》’ + siteinfo.sitename+ ‘《/li》《li/》’ + siteinfo.siteurl + ‘《/li》’）;

以上代碼非常簡(jiǎn)單，我們將得到的siteinfo對(duì)象直接使用字符串拼接來(lái)轉(zhuǎn)化成頁(yè)面需要展示的html標(biāo)簽。這里我們使用一個(gè)ul元素來(lái)展示站點(diǎn)的全部相關(guān)信息。

從代碼本身來(lái)講，無(wú)可厚非，大部分人對(duì)于簡(jiǎn)單的頁(yè)面Html生成基本都使用這種方法，而比較現(xiàn)實(shí)的狀況是，很多的前端開(kāi)發(fā)人員都習(xí)慣這些書(shū)寫(xiě)代碼，因?yàn)樗悸泛?jiǎn)單并且直接，當(dāng)然，包括我本人。對(duì)于代碼層次和數(shù)據(jù)結(jié)構(gòu)簡(jiǎn)答的項(xiàng)目來(lái)說(shuō)，這樣的寫(xiě)法非常易于理解。但是如果這個(gè)JSON對(duì)象屬性內(nèi)容豐富復(fù)雜，并且前臺(tái)顯示邏輯稍微復(fù)雜一點(diǎn)兒的話，我相信，使用這種字符串連接的方式，將絕對(duì)會(huì)讓閱讀維護(hù)代碼的同事抓狂。

而javascript模板引擎恰恰就是為了幫助我們有效的組織數(shù)據(jù)及其展示內(nèi)容而出現(xiàn)的。和其它的模板使用方式一樣，你需要做如下兩個(gè)事情：

1. 創(chuàng)建展示模板

2. 將數(shù)據(jù)解析到模板中

什么時(shí)候該使用javascrpt模板引擎？還是說(shuō)任何時(shí)候都該使用模板引擎嗎？

模板引擎確實(shí)是一個(gè)不錯(cuò)的開(kāi)發(fā)解決方案，但是并且任何情況都適合使用，如果你只是簡(jiǎn)單的生成一段html代碼的話，個(gè)人覺(jué)得沒(méi)有必要一定使用模板引擎。使用模板反而使得代碼復(fù)雜。模板引擎的目的主要為了幫助你更好的管理前端HTML標(biāo)簽，如果你需要生成的HTML代碼量少之又少，完全沒(méi)有必要使用模板引擎。而且如果你是開(kāi)發(fā)移動(dòng)端的應(yīng)用的話，肯定也不愿意為了少部分功能而引入這么大一個(gè)類(lèi)庫(kù)。

使用Handlebars

在撰寫(xiě)本教程的時(shí)候，handlebars還依然是RC版本，你可以在官方的下載地址獲取javascript，下載后你將得到一個(gè)handlebars-1.0.rc.1.js文件，請(qǐng)?jiān)谛枰�調(diào)用handlebars模板引擎的頁(yè)面引入此javascript文件即可。

標(biāo)簽： Javascript模板引擎 javascript ��

版權(quán)申明：本站文章部分自網(wǎng)絡(luò)，如有侵權(quán)，請(qǐng)聯(lián)系：west999com@outlook.com
特別注意：本站所有轉(zhuǎn)載文章言論不代表本站觀點(diǎn)！
本站所提供的圖片等素材，版權(quán)歸原作者所有，如需使用，請(qǐng)與原作者聯(lián)系。