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

爲何須要使用模板引擎？

關於爲何要使用模板引擎，按照我常說的一句話就是：不用重複造輪子了。

簡單來講，模板最本質的做用是「變靜爲動」，一切利於這方面的都是優點，不利於的都是劣勢。
要想很好地實現「變靜爲動」的目的，有這麼幾點：
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
經過<script>標籤引入便可,和引入jQuery庫相似:

3. 建立模板
步驟一: 經過一個<script>將須要的模板包裹起來
步驟二: 在<script>標籤中填入type和id
type類型能夠是除text/javascript之外的任何MIME類型,但推薦使用type="text/template",更加語義化
id是在後面進行編譯的時候所使用,讓其編譯的代碼找到該模板.
步驟三: 在<script>標籤中插入咱們須要的html代碼,根據後臺給咱們的接口文檔,修改其須要動態獲取的內

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代碼，你們能夠去看一下。