var template = document.querySelector('#template').innerHTML,
  result = document.querySelector('.result'),
  attachTemplateToData; // 将模板和数据作为参数,通过数据里所有的项将值替换到模板的标签上(注意不是遍历模板标签,因为标签可能不在数据里存在)。
attachTemplateToData = function(template, data) {
var i = ,
len = data.length,
fragment = ''; // 遍历数据集合里的每一个项,做相应的替换
function replace(obj) {
var t, key, reg;
      
       //遍历该数据项下所有的属性,将该属性作为key值来查找标签,然后替换
for (key in obj) {
reg = new RegExp('{{' + key + '}}', 'ig');
t = (t || template).replace(reg, obj[key]);
} return t;
} for (; i < len; i++) {
fragment += replace(data[i]);
} return fragment;
}; result.innerHTML = attachTemplateToData(template, data);

参考:http://www.cnblogs.com/TomXu/archive/2011/12/15/2284752.html

js 模板引擎的更多相关文章

  1. doT js 模板引擎【初探】要优雅不要污

    js中拼接html,总是感觉不够优雅,本着要优雅不要污,决定尝试js模板引擎. JavaScript 模板引擎 JavaScript 模板引擎作为数据与界面分离工作中最重要一环,越来越受开发者关注. ...

  2. 各种JS模板引擎对比数据(高性能JavaScript模板引擎)

    最近做了JS模板引擎测试,拿各个JS模板引擎在不同浏览器上去运行同一程序,下面是模板引擎测试数据:通过测试artTemplate.juicer与doT引擎模板整体性能要有绝对优势: js模板引擎 Ja ...

  3. JS 模板引擎 BaiduTemplate 和 ArtTemplate 对比及应用

    最近做项目用了JS模板引擎渲染HTML,JS模板引擎是在去年做项目是了解到的,但一直没有用,只停留在了解层面,直到这次做项目才用到,JS模板引擎用了两个 BaiduTemplate 和 ArtTemp ...

  4. 掌握js模板引擎

    最近要做一个小项目,不管是使用angularjs还是reactjs,都觉得大材小用了.其实我可能只需要引入一个jquery,但想到jquery对dom的操作,对于早已习惯了双向绑定模式的我,何尝不是一 ...

  5. js模板引擎

    js模板引擎包括如下: template 官方参考:http://aui.github.io/artTemplate BaiduTemplate 官方参考:http://baidufe.github. ...

  6. 调研js模板引擎

    js模板引擎越来越多的得到应用,如今已经出现了几十种js模板引擎,国内各大互联网公司也都开发了自己的js模板引擎(淘宝的kissy template,腾讯的artTemplate,百度的baiduTe ...

  7. js模板引擎介绍搜集

    js模板引擎越来越多的得到应用,如今已经出现了几十种js模板引擎,国内各大互联网公司也都开发了自己的js模板引擎(淘宝的kissy template,腾讯的artTemplate,百度的baiduTe ...

  8. Filter - Surge.js模板引擎过滤器

    版权所有,转载请注明出处:http://guangboo.org/2014/01/05/filter-surgejs-template-engine 过滤器在surge.js模板引擎中多处用到,其类似 ...

  9. js模板引擎--artTemplate

    js模板引擎--artTemplate 以前研究过一段时间的handlebars,但因为其渲染性能略逊于腾讯的artTemplate(在artTemplate的GitHub官网上有推荐的性能测试地址) ...

  10. JS模板引擎:tppl

    全球最快的JS模板引擎:tppl 废话不多说,先上测试: 亲测请访问:[在线测试地址]单次结果不一定准确,请多测几次. tppl 的编译渲染速度是著名的 jQuery 作者 John Resig 开发 ...

随机推荐

  1. 使用EntityFramework中DbSet.Set(Type entityType)方法碰到的问题

    使用的是EntityFramework, Version=6.0.0.0,项目原本直接使用将EntityFramework的Entity拿到UI使用,后面想使用dto对象将数据库的Entity与前台分 ...

  2. 360浏览器和猎豹浏览器重定向后丢失get参数

    1.场景: step1: 用户请求项目 http://localhost:8080/myProject step2: 我们的服务器将请求重定向到一个静态页面,并拼接上部分参数,如: <%@ pa ...

  3. 概念 : 过程 : 前台login

    为了解决自动登入.访问权限机制.登入权限而诞生了这过程,过程需要概念来维护记忆. 通过singlePageAutoLoginLocalStorage, UIStateLocalStorage, Use ...

  4. JQUERY写大图轮播;附jquery的hover()方法、animate()方法、find()方法

    思想:黑框设置超出部分隐藏. 红框往左移动,通过判断红框左边框距离黑框左边框的像素值,来实现红框的移动. 绿框在最上层,放每张图片的说明和序号. 一:html部分(大框.图片部分.箭头部分.图片介绍部 ...

  5. WebSite---前台系统图片验证码心得

    背景: 因为移动端APP和Msite手机注册发送短信验证码没有添加图片验证码功能.公司的短信接口被恶意刷取.所以我们就觉得在移动端添加一个图片验证码功能.分享一下大体实现方式思路.PS demo是自己 ...

  6. linux内核链表---挑战常规思维

    一.普通链表 1.一般教材上的链表定义如下: struct node{ int content: node *next: }: 它将指针域放在链表节点中,上一个节点指针域中的值指向下一个节点的首地址, ...

  7. C++ Primer 5 CH1 开始

    1.1 编写一个简单的C++程序 在大多数系统中,main 的返回值被用来指示状态.返回值 0 表示成功,非 0 的返回值的含义由系统定义,通常用来指出错误类型. 访问 main 的返回值的方法依赖于 ...

  8. springmvc.xml或spring.xml 能运行配置文件总是出现错误

    1:在java开发时总遇到配置文件配置正确,可以运行但有时显示错误.例如下图 上面配置文件正确但有时显错就不能运行.原因是配置文件的约束项错了. 原因是自己的jar包和配置文件版本不同.如果电脑联网它 ...

  9. self-question

    需要即刻提升的几大能力: 1.重装系统和安装各种软件 2.自学能力,多从实际案例中总结,多归纳反思 3.拓展人际关系,和别人沟通交流 4.遇到困难迎刃而上,而不是回避退缩

  10. Javascript——依赖注入

    本人才学疏浅,本文只为抛砖引玉,欢迎各路大牛前来斧正,不胜感激! 如今各个框架都在模块化,连前端的javascript也不例外.每个模块负责一定的功能,模块与模块之间又有相互依赖,那么问题来了:jav ...