JavaScript模板引擎初探 - HandleBars

JavaScript模板引擎初探 - HandleBars

??Handlebars是一個Javascript模板引擎，能讓你輕鬆高效的編寫語義化模板，它是Mustache模板引擎的一個擴充，Handlebars和Mustache都是弱邏輯的模板（logic-less template）引擎，能將Web前端的視圖和資料分離，降低兩者之間耦合。
??Handlebars的特點是一切都是運算式，沒有操作資料的API，不汙染HTML標籤，和DeDeCMS、WordPress模板類似，因此能很方便的與其他前端JS庫（例如jQuery）混用，並且編寫簡單，易於擴充。Handlebars支援的瀏覽器及運行環境有：Internet Explorer 6+、Google Chrome、Firefox、Safari 5+、Opera 11+以及Node.js。Handlebars是Ember.js的預設範本引擎，同時也是基於Node.js的架構Clouda+、Meteor的預設範本引擎。

下載

??可以在HandleBars的官方網站下載它的js檔案，然後將其加入到你的項目中。如果你的Web項目中已經有一個名為js的檔案夾專門放置JavaScript檔案，這個位置就是極好的選擇。下面的例子在WebStorm中的項目結構如所示。

用法

??首先在項目中引入HandleBars和jQuery的外部JavaScript檔案，注意jQuery不是必須的，但是你必須承認它是一個非常優秀的JavaScript庫，它兌現了“寫得更少，做得更多”（Write Less, Do More）的承諾，使用jQuery提供的強大的選取器以及它對DOM和Ajax操作的封裝還是能省不少事。所以，在下面的項目中我將HandleBars和jQuery都加入到了HTML頁面中。

<script type="text/javascript" src="js/handlebars.js"></script> <script type="text/javascript" src="js/jquery.js"></script>

??HandleBars的模板和普通的HTML頁面幾乎沒有區別，我們向上面的代碼中加入一段內容。

{{title}} {{greeting}} <script type="text/javascript" src="js/handlebars.js"></script> <script type="text/javascript" src="js/jquery.js"></script>

??在上面的代碼中，使用了HandleBars的運算式，HandleBars的運算式是寫在{{ … }}中的代碼。接下來我們將剛才添加的那段代碼做成一個模板，做法很簡單用一個<script>標籤來包圍那段代碼。

<script id="foo" type="text/x-handlebars-template"> {{title}} {{greeting}} </script> <script type="text/javascript" src="js/handlebars.js"></script> <script type="text/javascript" src="js/jquery.js"></script>

??接下來的工作就是用HandleBars來處理上面的模板，產生頁面內容，運算式相當於是模板中的預留位置，它會被相應的值替換掉，替換運算式的值可以用JSON方式來書寫，代碼如下所示。

<script id="foo" type="text/x-handlebars-template"> {{title}} {{greeting}} </script> <script type="text/javascript" src="js/handlebars.js"></script> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript"> var templateSection = $("#foo"); // 獲得ID為foo的元素（模板程式碼片段）的jQuery對象 var sourceCode = templateSection.html(); // 獲得模板段的HTML代碼 var template = Handlebars.compile(sourceCode); // 用Handlebars的compile對模板進行編譯 var context = {title:"Hello, world!", greeting:"這是一個使用HandleBars的簡單例子"}; // 用JSON儲存資料 var targetCode = template(context); // 將模板中的預留位置替換成相應的資料得到最終的HTML代碼 templateSection.replaceWith(targetCode); // 將原來的模板段替換成最終的HTML代碼 </script>

??需要注意的是，如果替換預留位置的字串中包含實體替換符（如：著作權?、貨幣符號￥、右角括弧>），那麼在書寫HandleBars的運算式時應當用{{{ … }}}，可以試一試下面的代碼。

<script id="foo" type="text/x-handlebars-template"> {{{title}}} {{greeting}} </script> <script type="text/javascript" src="js/handlebars.js"></script> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript"> var templateSection = $("#foo"); var sourceCode = templateSection.html(); var template = Handlebars.compile(sourceCode); var context = {title:"Hello, world! &gt;&gt;", greeting:"這是一個使用HandleBars的簡單例子"}; // 注意字串中有實體替換符 var targetCode = template(context); templateSection.replaceWith(targetCode); </script>

??HandleBars最讓人激動的特性應該是塊運算式以及自訂協助器（塊運算式處理器），下面的例子示範了塊運算式的使用。

<script id="foo" type="text/x-handlebars-template"> {{{title}}} {{greeting}} {{#foreach persons}} {{name}}: {{age}} {{/foreach}} </script> <script type="text/javascript" src="js/handlebars.js"></script> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript"> // 註冊一個協助器（塊運算式處理器） Handlebars.registerHelper("foreach", function(items, options) { var out = "

• "; for(var i = 0, len = items.length; i < len; ++i) { out += "
  • " + options.fn(items[i]) + "
  • "; } return out + "
  "; }); var templateSection = $("#foo"); var sourceCode = templateSection.html(); var template = Handlebars.compile(sourceCode); var context = { title:"Hello, world! &gt;&gt;", greeting:"這是一個使用HandleBars的簡單例子", persons: [ {name:"Hao LUO", age:34}, {name:"王大鎚", age:25}, {name:"張三丰", age:120} ] }; var targetCode = template(context); templateSection.replaceWith(targetCode); </script>

??再看一個例子吧。

<script id="foo" type="text/x-handlebars-template"> {{{title}}} {{greeting}} {{!-- 下面是一個塊運算式 --}} {{#foreach persons}} {{f name}}{{t gender}}: {{age}} {{/foreach}} </script> <script type="text/javascript" src="js/handlebars.js"></script> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript"> // 註冊一個協助器（塊運算式處理器） Handlebars.registerHelper("foreach", function(items, options) { var out = "

• "; for(var i = 0, len = items.length; i < len; ++i) { out += "
  • " + options.fn(items[i]) + "
  • "; } return out + "
  "; }); // f協助器從名字中取出姓氏 Handlebars.registerHelper("f", function(name) { return name.charAt(0); // 假定都是中文姓名且都是單姓（只是一個小例子而已不要叫真是否合理） }); // t協助器根據性別輸出先生或女士 Handlebars.registerHelper("t", function(gender) { return gender ? "先生" : "女士"; }); var templateSection = $("#foo"); var sourceCode = templateSection.html(); var template = Handlebars.compile(sourceCode); var context = { title:"Hello, world! &gt;&gt;", greeting:"這是一個使用HandleBars的簡單例子", persons: [ {name:"駱昊", gender:true, age:34}, {name:"王大鎚", gender:false, age:25}, {name:"張三丰", gender:true, age:120} ] }; var targetCode = template(context); templateSection.replaceWith(targetCode); </script>

??運行效果如所示。

??當然，HandleBars已經內建了最常用的塊處理器。

if：如果參數值是false、undefined、null、""、0或[]，HandlerBars就不會渲染塊運算式。代碼如下所示：

{{#if author}} {{firstName}} {{lastName}} {{/if}}

??也就是說，上面的代碼在上下文中沒有author定義的情況下，會產生下面的輸出：

 

unless：作用與if正好相反。 each：可以對數組進行迭代。在迭代時還可以使用{{@index}}表示第幾次迴圈，可以用{{@key}}表示對象的屬性名稱。

• {{#each persons}}
  • {{this}}
  • {{/each}}

  ??上下文資料如下所示：

  { persons:["駱昊", "王大鎚", "張三丰"] }

  ??更多的內容可以關注HandleBars的官方網站關於內建協助器的內容。

  ??可以使用jQuery封裝的Ajax函數從伺服器擷取JSON格式的上下文資料，代碼如下所示：

  $.getJSON("HelloServlet", {}, function(context) {    var targetCode = template(context);    templateSection.replaceWith(targetCode);});

  ??HandleBars的官方網站還提供了HandleBars的參考手冊。