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

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

簡單來說，模板最本質的作用是“變靜為動”，一切利于這方面的都是優勢，不利于的都是劣勢。
要想很好地實現“變靜為動”的目的，有這么幾點：
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代碼，大家可以去看一下。