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

什么是javascript模板引擎？

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

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

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

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

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

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

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

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

什么時候該使用javascrpt模板引擎？還是說任何時候都該使用模板引擎嗎？

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

使用Handlebars

在撰寫本教程的時候，handlebars還依然是RC版本，你可以在官方的下載地址獲取javascript，下載后你將得到一個handlebars-1.0.rc.1.js文件，請在需要調(diào)用handlebars模板引擎的頁面引入此javascript文件即可。

標簽： Javascript模板引擎 javascript ��

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