做后台开发(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语言的。我这里介绍也介绍其中的一个:  ，正如它官网上说的，这个工具是在项目需求中产生的，所以它的功能，性能肯定可以满足大家产品开发的需求，我自己也用这个做了一些开发，感觉还是不错的。

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　

这是官网上对它的介绍。

入门示例

                  
     
            Hello 
          
     
      

 

首先，我们要引入它的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数据 和 渲染说明指令。至此，最终生成的页面将会是如下：

     
        Hello 
      BeeBole!
     

 

模板中的a标签的href属性和值都被json数据所替换了。

高级应用

可能在实际开发中我们所面临的要求并不会总是这么简单，最基本的一个就是我们要动态生成内容，如循环生成。

 

像上面的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 结点. 所以最终生成的页面如下：

     
    
      
dog
    
      
cat
    
      
bird
    
      
mouse
     

 

 

总结

这篇文章只是起到一个介绍性的作用，就是给大家推荐这么一个东西。具体详细的使用文档请参考官网。之所以推荐这个，是因为觉得它的使用很简单，而且性能很好。