做后台开发(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. [IT新应用]农民朋友的电子商务

    今天通过http://olympiawa.gov/visitors.aspx olympia市的官网,到 http://www.olympiafarmersmarket.com/vendors-1/到 ...

  2. MyBatis之传入参数

    在MyBatis的select.insert.update.delete这些元素中都提到了parameterType这个属性.MyBatis现在可以使用的parameterType有基本数据类型和Ja ...

  3. 优秀而又实用的PHP工具集锦

    优秀而又实用的PHP工具集锦   浏览:1141 发布日期:2013/09/04 分类:技术分享 PHP是目前实用最为广泛的服务器端开源脚本语言之一,很多优秀的开源程序都是基于PHP构建的,比如大名鼎 ...

  4. 【IOS笔记】Views

    Views Because view objects are the main way your application interacts with the user, they have many ...

  5. prototype linkage can reduce object initialization time and memory consumption

    //对象是可变的键控集合, //"numbers, strings, booleans (true and false), null, and undefined" 不是对象的解释 ...

  6. MySql解决插入中文乱码问题

    在dos中登陆mysql 后输入: // 查看数据使用的所有编码show variables like 'character%';// 修改客户端的编码 为 gbkset character_set_ ...

  7. hibernate 数据库列别名自动映射pojo属性名

    package com.pccw.business.fcm.common.hibernate; import java.lang.reflect.Field; import java.math.Big ...

  8. ajax例子：审核验证用户名；登录界面

    审核验证用户名主页面: <body><div>用户名:<input type="text" id="uid" /><s ...

  9. phpcms v9模版调用代码大全(全面而实用)

    首页调用栏目 {pc:content action="category" siteid="$siteid" num="15" order=& ...

  10. zepto源码--compact、flatten、camelize、dasherize、uniq--学习笔记

    1.compact 删除数组中的空元素(不是空字符串).undefined.null 在定义变量时,定义过filter = emptyArray.filter,即调用javascript原生的数组处理 ...