作為一名前端開發工程師，你必須掌握的WEB模板引擎：Handlebars

yuanzhanghu 發布于2019-08-26 12:02 / 3096人閱讀

摘要：簡單來說，模板最本質的作用是變靜為動，一切利于這方面的都是優勢，不利于的都是劣勢。二選擇的原因全球最受歡迎的模板引擎是全球使用率最高的模板引擎，所以當之無愧是全球最受歡迎的模板引擎。創建更為復雜一些，當時功能更加強大。

為什么需要使用模板引擎？

關于為什么要使用模板引擎，按照我常說的一句話就是：不用重復造輪子了。

簡單來說，模板最本質的作用是“變靜為動”，一切利于這方面的都是優勢，不利于的都是劣勢。
要想很好地實現“變靜為動”的目的，有這么幾點：
1. 可維護性（后期改起來方便）；
2. 可擴展性（想要增加功能，增加需求方便）；
3.開發效率提高（程序邏輯組織更好，調試方便）；
4.看起來舒服（不容易寫錯）；
從以上四點來看，前端模板引擎體現的優勢都不是一點兩點的。
其實最重要的一點就是：視圖（包括展示渲染邏輯）與程序邏輯的分離，分離的好處太多了，比如說后期的維護修改代碼，增加代碼，調試代碼，和應用開發模式（MVC、MVVM）都方便很多。

二. 選擇Handlebars的原因

1. 全球最受歡迎的模板引擎
Handlebars是全球使用率最高的模板引擎，所以當之無愧是全球最受歡迎的模板引擎。
Handlebars在許多前端框架中都被引入，比如在MUI和AmazeUI等框架，都推薦使用Handlebars。
以AmazeUI為例,AmazeUI的文檔中專門為Web組件提供了其Handlebars的編譯模板

2. 語法簡單
Handlebars的基本語法極其簡單,使用{{value}}將數據包裝起來即可,Handlebars會自動匹配響應的數值和對象.以下是一個最簡單的模板:

三.使用Handlebars介紹

1. 下載Handlebars
通過Handlebars官網下載: http://handlebarsjs.com./inst...
通過npm下載: npm install --save handlebars
通過bower下載: bower install --save handlebars
通過Github下載: https://github.com/daaain/Han...
通過CDN引入:https://cdnjs.com/libraries/h...
2. 引入Handlebars
通過
3. 創建模板
步驟一: 通過一個

4. 在JS代碼中編譯模板

以上述代碼為例進行解釋:
步驟一: 獲取模板的內容放入到tpl中,這里$("#myTemplate")中填入的內容為你在上一步創建模板中所用的id.
提醒: 這里我使用的jQuery的選擇器獲取,當然,你可以使用原生javascript的DOM選擇器獲取,例如:docuemnt.getElementById("myTemplate")和document.querySelector("#myTemplate")
步驟二: 使用Handlebars.compile()方法進行預編譯,該方法傳入的參數即為獲取到的模板
步驟三: 使用template()方法進行編譯后得到拼接好的字符串,該方法傳入的參數即為上一步預編譯的模板
步驟四: 將編譯好的字符串插入到你所希望插入到的html文檔中的位置,這里使用的是jQuery給我們提供的html()方法.同樣,你也可以使用原生的innerHTML

四.實際運用中5個常用功能

1.Templates
當您引入庫之后，我們可以愉快的書寫模板了，推薦的方式是通過特殊type的script標簽來添加模板，type屬性是非常重要的，否則瀏覽器會將它們看做javascrip解析。

模板具有一個很容易理解的語法，可以使用html、普通文本和表達式，表達式通常被包含在兩對或三對花括號里，可以包含變量或功能函數。模板需要編譯之后才能使用，如下面代碼所示，注意一點，我們使用了jquery僅僅為了方便dom操作，handlebars可以脫離jquery良好工作。

2. Expressions
上面所示的例子，表達式中的任何html代碼將會被自動忽略，這是一個非常實用的性能，但是有的時候我們需要解析html，那么就要用三個花括號{{{ }}}，如下面代碼所示。
另外，handlebars表達式允許嵌套值，可以方便我們訪問javascript對象的任何值。

3. Context
Handlebars利用了Mustache的強大特性，context就是其中之一。我們可以把需要傳遞的數據放在這個javascript對象中，使用#each、#with等方法可以方便的使用該對象的數據。看了下面這個案例，那就明白了

4. Helpers
Handlebars不允許在模板中使用javascript，而是提供了一些列的功能函數(helpers)，可以在模板中調用，方便代碼重用和創造復雜模板。使用表達式調用helpers的格式類似如此，{{helpername}}，同時也可以傳遞參數，{{helpname 12345}}。
開發新的helper，使用registerHelper function，下面代碼演示了如何創建新的功能函數，如何使用內置的功能函數

5. Block helpers
Block helpers像普通的功能函數一樣，但是有開始和結束標簽(類似于內置的#if、#each等)，可以修改包含的html的內容。創建更為復雜一些，當時功能更加強大。經常使用它們重復使用功能、創建一大段可重用的html等。
同樣使用Handlebars.registerHelper()創建block helper，不同的是我們需要使用第二參數，回調函數。看看下面的代碼

現在你基本上了解了handlebars的常用功能，同樣您可以通過Handlebars.js-官方網站，可以獲取更多案例、官方文檔
地址：http://handlebarsjs.com/

最后

模板引擎是我們做前端開發必備的一個知識，對于我們快速開發和做出更加健全的優秀代碼都是有幫助的。
我在《8個要點教你輕松寫出優秀Javascript代碼》里面有講過怎么寫好我們的JavaScript代碼，大家可以去看一下。

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/108064.html

如何成為一名優秀的web前端工程師（前端攻城師）？

摘要：我從沒有聽到有人問如何做一名優秀甚至卓越的前端工程師。作為一個優秀的前端工程師還需要深入了解以及學會處理的這些缺陷。再者，優秀的前端工程師需要具備良好的溝通能力，因為前端工程師至少都要滿足四類客戶的需求。　　我所遇到的前端程序員分兩種：　　第一種一直在問：如何學習前端？　　第二種總說：前端很簡單，就那么一點東西。　　我從沒有聽到有人問：如何做一名優秀、甚至卓越的WEB前端工程師...

Turbo 2019-08-20 17:21 評論0 收藏0
如何成為一名優秀的web前端工程師（前端攻城師）？

摘要：我從沒有聽到有人問如何做一名優秀甚至卓越的前端工程師。作為一個優秀的前端工程師還需要深入了解以及學會處理的這些缺陷。再者，優秀的前端工程師需要具備良好的溝通能力，因為前端工程師至少都要滿足四類客戶的需求。　　我所遇到的前端程序員分兩種：　　第一種一直在問：如何學習前端？　　第二種總說：前端很簡單，就那么一點東西。　　我從沒有聽到有人問：如何做一名優秀、甚至卓越的WEB前端工程師...

rubyshen 2019-08-29 12:47 評論0 收藏0
如何成為一名優秀的web前端工程師（前端攻城師）？

摘要：我從沒有聽到有人問如何做一名優秀甚至卓越的前端工程師。作為一個優秀的前端工程師還需要深入了解以及學會處理的這些缺陷。再者，優秀的前端工程師需要具備良好的溝通能力，因為前端工程師至少都要滿足四類客戶的需求。　　我所遇到的前端程序員分兩種：　　第一種一直在問：如何學習前端？　　第二種總說：前端很簡單，就那么一點東西。　　我從沒有聽到有人問：如何做一名優秀、甚至卓越的WEB前端工程師...

mingzhong 2019-08-01 17:00 評論0 收藏0