做后台開發(java/python)的同學開發web應用，對於前端頁面生成技術並不陌生，像jsp，freemark等。開發UGC類型的互聯網站，因為要SEO友好，所以一般都會在后台用模板引擎直接生成好標准的html代碼並渲染輸出。但是對於一些富WEB App的應用，如一些工作平台，如OA系統，web端只不過是所有操作客戶端的其中一個，同時並行存在的一般還有各種手機端，如android,ios,window mobile，而且各種客戶端開發都是基於一套標准的后台API。這時候我們在做web app前端開發時，一般通過api獲取的是標准的json格式的數據，然后在前端組裝，渲染成可視化和可交互操作的html元素，當然還包括相應的css樣式控制代碼。所以現在的開發模式由之前的后台(jsp/freemarker)模板引擎處理變成了現在的前端去處理。正是在這樣的場景需求下，產生了很多的前端模板引擎，當然這些都是基於javascript語言的。我這里介紹也介紹其中的一個: pure ，正如它官網上說的，這個工具是在項目需求中產生的，所以它的功能，性能肯定可以滿足大家產品開發的需求，我自己也用這個做了一些開發，感覺還是不錯的。
Simple and ultra-fast templating tool to generate HTML from JSON data.
Keep your HTML clean of any logic Using JSON and Javascript only,
Works standalone or with dojo, DomAssistant, Ext JS,jQuery, Mootools, Prototype, Sizzle and Sly
這是官網上對它的介紹。
入門示例
<html> <head> <script src="jquery.js"></script> <script src="pure.js"></script> </head> <body> <div class="template"> Hello <a></a> </div> <script> var jsonData = { who: 'BeeBole!', site: 'http://beebole.com' }, //template commands directive = { 'a':'who', 'a@href':'site' }; //select the template and transform it $('div.template').render(jsonData, directive) </script> </body> </html>
首先，我們要引入它的js文件，注意上面同時引入了jquery文件（pure除了和jquery使用，也還可以和dojo,extJS等其它主流js操作框架使用）。
var jsonData = { who: 'BeeBole!', site: 'http://beebole.com' }
這是一個json對象實例，當然在實際開發中一般都是通過AJAX從后台API接口獲得。該實例有兩個屬性：who和site.
directive = { 'a':'who', 'a@href':'site' }
這里有一個很重要的概念要理解：pure是如何能理解把json對象實例如何填充到模板中的呢？ 就是上面一段代碼定義了一個 directive 對象實例，它的作用就是告訴模板引擎在填充數據是，用json數據中的哪個屬性字段去填充相應的模板中哪個元素結點。如上面代碼中， 它表達的意思就是 把模板中的 a 標簽的內容用 json 數據中的 who 屬性去填充， 標簽 a 的 href 屬性用json數據中的 site 屬性去填充。
$('div.template').render(jsonData, directive)
這句話就是把前面零散定義的一些語句關聯集成起來從而達到渲染輸出最終頁面。$('div.template') 就是獲取dom結構中要渲染的模板結點，用過jquery的人都熟悉這個選擇器語法。然后通過 render 方法來渲染，它所需要的兩個參數就是前面定義的 json數據 和 渲染說明指令。至此，最終生成的頁面將會是如下：
<div class="template"> Hello <a href="http://beebole.com">BeeBole!</a> </div>
模板中的a標簽的href屬性和值都被json數據所替換了。
高級應用
可能在實際開發中我們所面臨的要求並不會總是這么簡單，最基本的一個就是我們要動態生成內容，如循環生成。
<ul> <li></li> </ul>
像上面的li標簽通常是多個，而且內容也是根據api返回的數據動態生成的。如我們要用下面的數據去填充該模板：
var data = { animals:[ {name:'dog', legs:4}, {name:'cat', legs:4}, {name:'bird', legs:2}, {name:'mouse', legs:4} ] };
該json數據返回了一個數組數據，包含四個動物數據。每個元素有兩個屬性，name和legs，即名稱和腳的數量。現在我們要把這個數據填充到上面模板中去，那么就要定義一個指示器告訴引擎如何去填充：
var directive = { 'li':{ 'animal<-animals':{ '.':'animal.name' } } };
這里的寫法估計有一點讓大家難理解的是 animal<-animals 。在pure中，用 -< 來標識循環變量賦值，就像java中的 for(obj in objs) 語法一樣，對變量animals循環，每次循環體中，對當前的值賦給變量 animal ，其實這也是很好理解的。在循環體中， '.' : 'animal.name' 這句話的意思就是用animal對象實例的name屬性值去填充當前節點（. 表示當前結點），就是 li 結點. 所以最終生成的頁面如下：
<ul>
<li>dog</li>
<li>cat</li>
<li>bird</li>
<li>mouse</li>
</ul>
總結
這篇文章只是起到一個介紹性的作用，就是給大家推薦這么一個東西。具體詳細的使用文檔請參考官網。之所以推薦這個，是因為覺得它的使用很簡單，而且性能很好。