做后台开发(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>

总结

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

一个前端html模板处理引擎(javascript) - pure的更多相关文章

  1. 1kb的前端HTML模板解析引擎，不限于嵌套、循环、函数你能想到的解析方式

    传送门:https://github.com/xiangyuecn/BuildHTML copy之前说点什么 html做点小功能(什么都没有),如果是要手动生成html这种操作,容易把代码搞得乱七八糟 ...

  2. Handlebars的基本用法 Handlebars.js使用介绍 http://handlebarsjs.com/ Handlebars.js 模板引擎 javascript/jquery模板引擎——Handlebars初体验 handlebars.js 入门(1) 作为一名前端的你,必须掌握的模板引擎:Handlebars 前端数据模板handlebars与jquery整

    Handlebars的基本用法 使用Handlebars,你可以轻松创建语义化模板,Mustache模板和Handlebars是兼容的,所以你可以将Mustache导入Handlebars以使用 Ha ...

  3. SS - DIY一个前端模板引擎.(一)

    前端MVVM 模式有点很多,完全摆脱了意大利面条式的代码. 个人认为,所有MVVM 的框架基础就是一个高性能的JS模板引擎,它极大简化了 DOM 操作, 使页面渲染和业务逻辑彻底分离. 为了理解模板引 ...

  4. DIY一个前端模板引擎.(一)

    前端MVVM 模式有点很多,完全摆脱了意大利面条式的代码.个人认为,所有MVVM 的框架基础就是一个高性能的JS模板引擎,它极大简化了 DOM 操作, 使页面渲染和业务逻辑彻底分离.为了理解模板引擎原 ...

  5. 再谈前端HTML模板技术

    在web2.0之前,写jsp的时候虽然有es和JSTL,但是还是坚持jsp.后面在外包公司为了快速交货,还是用了php Smart技术. web2.0后,前端模板技术风行. 代表有如下三大类: Str ...

  6. 前端面试知识点集锦（JavaScript篇）

    目录 1.谈谈你对Ajax的理解?(概念.特点.作用) 2.说说你对延迟对象deferred的理解? 3.什么是跨域,如何实现跨域访问? 4.为什么要使用模板引擎? 5.JavaScript是一门什么 ...

  7. 从前端到全栈：JavaScript逆袭之路

    JavaScript如何做到上天入地无所不能?JavaScript真的能一统江湖吗? 背景 近年来,前端技术日新月异,前端已经不仅仅是网页,更多的开始由狭义向广义发展. 先后涌现出了具备后端能力的no ...

  8. node项目实战-用node-koa2-mysql-bootstrap搭建一个前端论坛

    前言 在学习了koa2和express并写了一些demo后,打算自己写一个项目练练手,由于是在校生,没什么好的项目做,即以开发一个前端论坛为目标,功能需求参照一下一些社区拟定,主要有: 登录注册 个人 ...

  9. 【转】BAT及各大互联网公司2014前端笔试面试题：JavaScript篇

    原文转自:http://blog.jobbole.com/78738/ 很多面试题是我自己面试BAT亲身经历碰到的.整理分享出来希望更多的前端er共同进步吧,不仅适用于求职者,对于巩固复习前端基础更是 ...

随机推荐

  1. mysq数据库再次理解

    1.表中的一条记录就是一个object,object有很多属性,对应表中的字段.object的属性对应的值就是字段值 2.外键是关联表关系用的.表关系的确立只能通过外键 但更高效的策略是,在数据库中部 ...

  2. Yii源码阅读笔记（二十）

    View中应用布局和缓存内容部分: /** * Begins recording a block. * This method is a shortcut to beginning [[Block]] ...

  3. C#创建Excel

    创建Workbook说白了就是创建一个Excel文件,当然在NPOI中更准确的表示是在内存中创建一个Workbook对象流. 本节作为第2章的开篇章节,将做较为详细的讲解,以帮助NPOI的学习者更好的 ...

  4. jquery用法大全

    jQuery 选择器 选择器                  实例                                   选取 *                          $ ...

  5. How to Write a Spelling Corrector

    http://norvig.com/spell-correct.html Feb 2007to August 2016 How to Write a Spelling Corrector One we ...

  6. Java中方法的覆写

    所谓方法的覆写override就是子类定义了与父类中同名的方法,但是在方法覆写时必须考虑权限,即被子类覆写的方法不能拥有比父类方法更加严格的访问权限. 修饰符分别为public.protected.d ...

  7. poj1012约瑟夫

    #include<stdio.h>int a[14];int f(int k,int m){    int n,i,s;    n=2*k;s=0;    for(i=0;i<k;i ...

  8. cookie 操作

    //创建并赋值 重新赋值也是这样操作 document.cookie="userId=828"; document.cookie="userName=hulk" ...

  9. C#编程总结（四）多线程应用（进度条的编程问题）——转自http://www.cnblogs.com/yank/p/3232955.html

    多线程应用 多线程应用很广泛,简单总结了一下: 1)不阻断主线程,实现即时响应,由后台线程完成特定操作2)多个线程,完成同类任务,提高并发性能3)一个任务有多个独立的步骤,多个线程并发执行各子任务,提 ...

  10. Bootstrap 进度条媒体对象和 Well 组件

    一．Well 组件 这个组件可以实现简单的嵌入效果. //嵌入效果 <div class="well"> Bootstrap </div> //有 lg 和 ...