做后台开发(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. GridView 下拉搜索

    /** * 下拉筛选 * @column string 字段 * @value mix 字段对应的值,不指定则返回字段数组 * @return mix 返回某个值或者数组 */ public stat ...

  2. SQLServer组件

    1.客户端 2.协议层 3.查询处理器 4.存储引擎 5.数据库操作系统 如下图:

  3. 40. 特殊a串数列求和

    特殊a串数列求和 #include <stdio.h> int main() { int i, a, n, item, sum, temp; while (scanf("%d % ...

  4. Swapping

    COMPUTER ORGANIZATION AND ARCHITECTURE DESIGNING FOR PERFORMANCE NINTH EDITION Referring back to Fig ...

  5. [dpdk] 读开发指南（1）

    该文档是随着对于文档的阅读进度,不断增加的阅读笔记.主要内容以大纲为主,以及记录帮助记忆的内容. 在之后的实际应用中,也不随着不断的深入理解,逐渐丰富各大纲下面的内容. 1. 前期准备:设置两个环境变 ...

  6. wampserver

  7. 关于YARN的HA

    一:准备 1.规划 namenode               namenode ZKFC ZKFC journalnode        journalnode               jou ...

  8. JVM 常用配置

    JVM的配置,最常用的两个配置就是:-Xms512m –Xmx1024m -Xms设置JVM的初始化内存大小,-Xmx为最大内存大小,当突破这个值,将会报内存溢出,导致的原因有很多,主要是虚拟机的回收 ...

  9. C#中扩展方法

    什么是扩展方法? 扩展方法顾名思义,就是允许向现有的“类型”添加方法,而无需创建派生类.重新编译或以其他方式修改原来类型. 扩展方法是一种特殊的静态方法,但可以像扩展类型上的实例方法一样进行调用. 扩 ...

  10. IOS证书的申请和使用

    苹果的证书繁锁复杂,制作管理相当麻烦,今天决定重置一个游戏项目中的所有证书,做了这么多次还是感觉很纠结,索性直接记录下来,日后你我他查阅都方便: 关于证书 苹果使用密文签名技术来验证App的合法性,不 ...