做后台开发(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. springMvc文件下载

    //主要看导入的是那些类 import com.ibm.db.service.ITopicService;import org.apache.commons.io.FileUtils;import o ...

  2. NVlink

    Nvidia's Pascal to use stacked memory, proprietary NVLink interconnect by Scott Wasson — 6:50 PM on ...

  3. 利用SpannableString设置文本

    private void setTips(){ String big = "大字深色"; String small = "小字淡色"; Spannable ti ...

  4. php实现多任务并发探讨

    如果是后台任务,需要通过队列转换为异步执行 如果是网络任务,可以使用socket_select 或者stream_select来执行(基于select模型) 如果一定要使用多线程可以安装多线程扩展,用 ...

  5. 匈牙利命名法，骆驼命名法(camel)，帕斯卡（Pascal）命名法（转）

    一.匈牙利命名法      Windows 编程中用到的变量(还包括宏)的命名规则匈牙利命名法,这种命名技术是由一位能干的 Microsoft 程序员查尔斯·西蒙尼(Charles Simonyi) ...

  6. SHELL 中的重定向和管道

    1. 什么叫重定向将输入或输出重新指定到别的位置. 2. 重定向输出2.1.命令执行数据流文件/设备---- 标准输入 -->命令 --- 标准输出 -->文件/设备            ...

  7. Visual Studio解决方案及项目的配置

    配置解决方案的属性 1.配置解决方案平台,该配置实际上修改的是解决方案目录下的sln(solution)文件. 配置项目的属性 1.配置项目平台及项目的目标平台:项目-右键-属性-生成(竖着第二个选项 ...

  8. java--字符串替换replace，replaceAll，replaceFirst

    1.字符串替换,replace string s="abcdfersabcdsgacabc"; 将字符串中的abc替换成bdf s.replace("abc", ...

  9. Fortran并行计算的一些例子

    以下例子来自https://computing.llnl.gov/tutorials/openMP/exercise.html网站 一.打印线程(Hello world) C************* ...

  10. 低功耗蓝牙4.0BLE编程-nrf51822开发(6)-Battery Service

    Battery Service是有关电池特性方面的服务,如果需要它,在初始化时将它加入到蓝牙协议栈. 如果通过ble_bas_battery_level_update(),电池电量将会通知,Batte ...