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

    

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

    什么是javascript模板引擎？

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

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

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

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

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

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

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

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

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

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