小試javascript模版mustache

夜以深，人未眠，本該入睡，然逢周末，無聊甚哉，故於此作文打發時間-----------

前幾日，無聊，小試了下javascript版本的mustache模版，說是小試，其實主要目的是閱讀學習其源碼。如果僅僅是去學會如何使用它，相信除了實際開發中對你有些協助外，寫幾個小demo應該是沒啥大意思的（雖然我現在正在做這樣的事情。ps：好吧，我錯了）。言歸正傳，這裡之前之所以說是javascript版本的，原因是它必然有其它版本，如果你想瞭解其它語言版本，這裡點擊此連結http://mustache.github.com/它會把你傳送過去。

今天呢，其它的版本就不研究了，就試試javascript版本的吧。看到著，你或許疑惑，這模版啥玩意？別急，請慢慢往下閱讀。

一、在前端為什麼需要模版

    隨著互連網前端頁面越來越複雜，互動性越來越強，如今，對於前端的要求也是越來越高，當然本文這裡指的主要是前端的javascript。在XX年前，記得我還在讀書上學的時候。當時javascript就像個玩具，筆者也不止一次的被人告誡，javascript只是給網頁增加點特效，而且很多瀏覽器對它支援不夠諸如此類，大概就這些，具體也記得不清楚了，反正就是勸人不要太花時間在它上面。在當時來看，確實如此啊。又怎知世界變化如此之快，又有誰知如今javascript已然發展到如此？一不小心又扯遠了，嘿嘿，回來。其實，相信如果你在開發中，遇到頁面需要通過ajax載入一些東西，例如後台傳來的一個使用者資訊列表，假設結構如下：

1 {"users":[{"name":"sam","age":14},{"name":"jack","age":24},{"name":"lucy","age":19}]}

 

在過去，我們都是通過解析後台傳來的json對象，以前面說的使用者列表為例，需要迭代每一項，然後通過js字串拼接並加入需要的標籤和樣式,最後動態添加到頁面中去。這樣做當然沒什麼問題，但是寫起來是有些麻煩的，因為你得一次一次的拼字串，但其實這也不是重點，最重要的是這樣做維護起來也不方便，如果你需要換個展現形式，你得換上標籤，再一個個仔細的拼接，每次看到一堆js中夾雜著html的代碼時，就會頭暈。於是，為瞭解決這個問題，一大堆的模版就出現了。比較典型的就是jquery的template plugin，kissyTemplate，artTemplate，還有今天講到的mustache等等。至於它們之間的優劣效能等等這裡就不討論了，有興趣可以自己找資料測試。既然模版可以讓處理以上的問題變得簡單，那麼mustache又是如何處理，如何使用的呢？

二、如何使用mustache

首先，當然是下載mustache嘍，執行npm install mustache（電腦上需要裝有Node.js與npm，如果不想這樣下載安裝mustache，直接進https://github.com/janl/mustache.js下載）

下載完成後，開啟看下mustache.js檔案，大概只有600行左右的代碼，相當簡潔啊。截取開始部分如下:

看了下，頭部，顯然支援CommonJS與AMD規範了，也就是說Node.js也亦可以使用它作為模版引擎，非常棒，雖然還沒試過。

看了下官方，上面說mustache主要特點是logic less Templates ，意思說，模版中無邏輯或者說很少邏輯。畢竟模版只是作為一個view而已，不需要太多的邏輯代碼。它主要是通過{{ }}符號來傳遞變數的（這麼說也許並不科學，只是大致可以這麼理解）。還是先看個簡單例子：

上面有一個people的對象，裡面有三個屬性，其中一個屬性是一個函數。mustache的使用非常簡單，調用只需要Mustache.render(temp,obj)函數就可以了，其中第一個參數是你寫的模版，第二個參數是你需要渲染到模版的對象。最終返回渲染完成的字串，這裡，我們最後把他寫入html文檔的div標籤內。

看到這，你應該可以明白模版渲染對象，提取屬性的值渲染到模版的特定位置，可以理解為：{{key}} = 》 value 。

這裡只是簡單渲染了一個對象，那麼對於文章開頭提出的列表對象，又該如何做呢？看樣本：

模版中通過{{#listkey}}

              {{/listkey}}

中間包裹列表中每一項的key

{{#listkey}}{{#itemkey}}{{/listkey}}

這樣模版引擎會自動迭代每一項，並渲染到模版中去，是不是很簡單。當然以上這些只是最基本的用法，更複雜的用法和它內部的機制今天就不寫了，太晚了，寫著寫著天都快亮了，還是先睡覺了zZZ