小試javascript模版mustache

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

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

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

1、在前端爲何須要模版

    隨着互聯網前端頁面愈來愈複雜，交互性愈來愈強，現在，對於前端的要求也是愈來愈高，固然本文這裏指的主要是前端的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又是如何處理，如何使用的呢？

2、如何使用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