前端戰五渣學前端——模板引擎（Handlebars.js）

時間 2019-11-16

標籤前端模板引擎 handlebars.js handlebars 欄目 JavaScript 简体版

原文原文鏈接

最近想着寫點什麼實用的工具，算是偶然間又接觸到了這個名詞模板引擎，因此又專門的查了一下，相信在這個三大框架（😜也多是兩大框架）大行其道的時候，多少接觸過，只是不知道這就是模板引擎的功勞。javascript

本文巨簡單，只是簡單介紹了一下，更多api請查看相關文檔css

接觸過的模板

模板引擎最明顯的特徵就是用了花括號{{ }}（但不限於{{ }}，也多是別的特定符號），裏面寫上key值，渲染出來就是key對應的valuehtml

vue中的模板

vue中是明顯的使用了模板語法，他們的文檔中也很明確的寫了前端

Vue.js 使用了基於 HTML 的模板語法，容許開發者聲明式地將 DOM 綁定至底層 Vue 實例的數據。全部 Vue.js 的模板都是合法的 HTML ，因此能被遵循規範的瀏覽器和 HTML 解析器解析。在底層的實現上，Vue 將模板編譯成虛擬 DOM 渲染函數。結合響應系統，Vue 可以智能地計算出最少須要從新渲染多少組件，並把 DOM 操做次數減到最少。若是你熟悉虛擬 DOM 而且偏心 JavaScript 的原始力量，你也能夠不用模板，直接寫渲染 (render) 函數，使用可選的 JSX 語法。vue

上面咱們咱們能夠看出來，咱們只是在標籤中寫上了{{ message }}，可是渲染粗來的，確實對應的下面聲明的data中的message的值，固然，vue在中間作了不少事情，還有diff算法之類的，可是咱們今天不涉及diff算法的東西，只是瞭解一下前端中的模板引擎java

還有，vue中還有一種實現——單文件組件jquery

其實差很少，一個.vue的文件，通過webpack的loader解析，再最終顯示出來。咱們只須要看這個花括號的實現，跟上面的是同樣的webpack

lodash中的模板

lodash專門有一個api的名字就是template，_.template([string=''], [options={}])這麼使用web

lodash中的模板看起來跟vue的不太同樣是否是，他用的<%= %>這種東西來包住變量名，因此我一開始說了不侷限於{{ }}這種花括號算法

其餘的模板

在我剛接觸前端的時候，我以前的博客中說過，我使用過backbone.js，這個以來的又是underscore.js中的模板方法，這也是一個經過模板更換頁面內容的庫（或者框架），還有在先後端沒有分離以前，後端也會有模板。

總結什麼是模板

什麼是模板呢，個人理解就是我事先喜愛一套模板，而後根據數據不一樣，更改裏面的數據就好了，而模板結構是不會變的。怎麼說好理解一些呢，就是如今不少外包給別人作官網的，他們會事先寫好不少套官網，各式各樣的，而後再根據客戶的不一樣需求，更換裏面的內容，事前寫好的這個官網就算是模板，而後再更換裏面的公司名稱、聯繫電話和圖片等一些東西，就能夠快速產出了

固然，我今天的目的不是講什麼是模板，只是爲了先說清楚是什麼東西，下面就要講這個模板引擎Handlebars.js了，由於我要寫的工具會用到這個，因此我就講一下怎麼使用，但願能對之後用到這個東西的同窗能起到一點點的幫助吧

正文開始

`<script type="text/template">` 和 `<template>`

可能不少小夥伴沒見過<script type="text/template">script標籤的type居然還有這種屬性，相對於script標籤的一個屬性值，<template>標籤寫過vue的都見過，都知道是能夠在裏面寫上div等標籤的。那這兩個標籤到底有什麼用呢。來看

很明顯，什麼都沒有~這就是這兩個標籤的特性，瀏覽器並不會直接解析這兩個標籤裏面的標籤，神奇不

瀏覽器會忽略這些標籤，這就容許咱們在裏面放置任何內容，而後能夠在之後用到的時候取出來給模板庫使用了，可是<template>這個標籤坑爹的IE是不支持的。

Handlebars.js（模板引擎庫）

Handlebars.js給你提供了牛逼的功能，可讓你很方便的構建語義化的模板，Handlebars.js兼容Mustache.js的模板，在大部分狀況下，咱們能夠用Handlebars.js取代Mustache.js

Handlebars.js能夠說是Mustache.js的一個擴展，因此用這個就ok了。那咱們到底怎麼用呢？往下看

最簡單的使用

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>模板引擎</title>
  <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdn.bootcss.com/handlebars.js/4.1.2/handlebars.min.js"></script>
</head>
<body>
  <div id="root"></div>

  <template id="template">
    <p>名字: {{ name }}</p>
    <p>年齡: {{ age }}</p>
  </template>

  <script> $(function() { var data = { name: '前端戰五渣', age: 16 }; var root = $('#root'); // 獲取根節點，須要更換內容的標籤 var htmlNode = $("#template").html(); // 獲取標籤內容 var templateWithoutData = Handlebars.compile(htmlNode); // 生成沒有數據的模板 var templateWithData = templateWithoutData(data); // 向沒有數據的模板傳數據 root.html(templateWithData); // 把有數據的模板添加到頁面 }) </script>
</body>
</html>
複製代碼

上面的代碼運行結果就是

這是最簡單的實現了，把data中的數據渲染到了頁面上，下面是我寫的一個小小的切換頁面的功能

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>模板引擎</title>
  <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdn.bootcss.com/handlebars.js/4.1.2/handlebars.min.js"></script>
</head>
<body>
  <div>
    <p>我這是導航</p>
    <button data-place="one">真新鎮</button>
    <button data-place="two">常磐市</button>
    <button data-place="three">常磐森林</button>
  </div>
  <div id="content"></div>

  <template id="one">
    <h1>{{ name }}</h1>
    <p>我是第一個頁面</p>
  </template>

  <template id="two">
    <h1>{{ name }}</h1>
    <p>我是第二個頁面</p>
  </template>

  <template id="three">
    <h1>{{ name }}</h1>
    <p>我是第三個頁面</p>
  </template>

  <script> var one = { name: '真新鎮' }; var two = { name: '常磐市' }; var three = { name: '常磐森林' }; $(function () { var content = $('#content'); $('button').on('click', function () { var target = $(this).attr('data-place'); var htmlNode = $('#' + target).html(); var templateWithoutData = Handlebars.compile(htmlNode); var templateWithData; switch(target) { case 'one': templateWithData = templateWithoutData(one); break; case 'two': templateWithData = templateWithoutData(two); break; case 'three': templateWithData = templateWithoutData(three); break; } content.html(templateWithData); }) }) </script>
</body>
</html>
複製代碼

helper

文檔什麼的都沒有解釋這個helper是什麼意思，按個人理解就是一些內置的語法，咱們能夠用，也能夠自定義helper，這裏就不涉及了

if helper

這個就是咱們能夠在模板裏面寫一些if else的邏輯了，判斷現隱什麼的

<div id="root"></div>

<template id="template">
    {{#if job}}
    <p>名字: {{ name }}</p>
    <p>年齡: {{ age }}</p>
    <p>工做: {{ job }}</p>
    {{else}}
    <p>尚未工做</p>
    {{/if}}
</template>

<script> $(function() { var data = { name: '前端戰五渣', age: 20, job: '前端開發' }; var root = $('#root'); // 獲取根節點，須要更換內容的標籤 var htmlNode = $("#template").html(); // 獲取標籤內容 var templateWithoutData = Handlebars.compile(htmlNode); // 生成沒有數據的模板 var templateWithData = templateWithoutData(data); // 向沒有數據的模板傳數據 root.html(templateWithData); // 把有數據的模板添加到頁面 }) </script>
複製代碼

按着上面的代碼寫的話，data中job是有值的，我就能夠在最後的渲染中顯示出來

假如我把job刪掉

var data = {
    name: '前端戰五渣',
    age: 20,
    job: ''
  };
複製代碼

就都不顯示了，就顯示 {{else}}後面的東西了，這個很相似jsx的語法

模板中的註釋

咱們在模板中怎麼寫註釋呢，直接看

<template id="template">
    {{#if job}}
    <p>名字: {{ name }}</p>
    <p>年齡: {{ age }}</p>
    <p>工做: {{ job }}</p>
    {{else}}
    <!-- 我是註釋我是註釋 -->
    {{! 我是註釋我是註釋  }}
    {{!-- 我是註釋我是註釋 --}}
    <p>尚未工做</p>
    {{/if}}
</template>
複製代碼