一.為什麼需要使用模板引擎？
關於為什麼要使用模板引擎，按照我常對學生說的一句話就是：不用重複造輪子.。
簡單來說，模板最本質的作用是“變靜為動”，一切利於這方面的都是優勢，不利於的都是劣勢。
要想很好地實現“變靜為動”的目的，有這麼幾點：
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./installation.html
通過npm下載: npm install –save handlebars
通過bower下載: bower install –save handlebars
通過Github下載: https://github.com/daaain/Handlebars.git
通過CDN引入:https://cdnjs.com/libraries/handlebars.js
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程式碼，大家可以去看一下。