2022-11-04 10:15:37 - 米境通跨境電商

    

    如果你從事前端開發(fā)的話，或者使用javascript開發(fā)動(dòng)態(tài)前端頁(yè)面比較多的話，對(duì)于javascript模板引擎一定不會(huì)陌生。關(guān)注gbin1博客的朋友肯定還記得我們?cè)?jīng)介紹過(guò)的一個(gè)在線選擇javascript模板引擎的工具網(wǎng)站：templateenginechooser，使用工具可以幫助你大體的了解不同的javascript模板引擎的特點(diǎn)，并且有效幫助你根據(jù)你的具體需求來(lái)選擇js模板引擎。在今天的這篇GBin1專題教程中，我們將介紹比較流行的javascript模板引擎handlebars，如果你沒(méi)有接觸過(guò)的話，希望在閱讀完我們的教程后，能對(duì)它有一個(gè)大體的了解，并且能夠有機(jī)會(huì)應(yīng)用到你的開發(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)容，希望能夠給廣大的前端開發(fā)程序猿提供最好的技術(shù)教程，如果你也有原創(chuàng)的教程，歡迎投遞到我們博客或者標(biāo)簽社區(qū)！

    什么是javascript模板引擎？

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

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

    varsiteinfo={‘sitename’：‘terryli’，‘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í)的狀況是，很多的前端開發(fā)人員都習(xí)慣這些書寫代碼，因?yàn)樗悸泛?jiǎn)單并且直接，當(dāng)然，包括我本人。對(duì)于代碼層次和數(shù)據(jù)結(jié)構(gòu)簡(jiǎn)答的項(xiàng)目來(lái)說(shuō)，這樣的寫法非常易于理解。但是如果這個(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ò)的開發(fā)解決方案，但是并且任何情況都適合使用，如果你只是簡(jiǎn)單的生成一段html代碼的話，個(gè)人覺得沒(méi)有必要一定使用模板引擎。使用模板反而使得代碼復(fù)雜。模板引擎的目的主要為了幫助你更好的管理前端HTML標(biāo)簽，如果你需要生成的HTML代碼量少之又少，完全沒(méi)有必要使用模板引擎。而且如果你是開發(fā)移動(dòng)端的應(yīng)用的話，肯定也不愿意為了少部分功能而引入這么大一個(gè)類庫(kù)。