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. 【转】jqGrid学习之参数

    jqGrid参数 名称 类型 描述 默认值 可修改 url string 获取数据的地址 datatype string 从服务器端返回的数据类型,默认xml.可选类型:xml,local,json, ...

  2. 第九篇 C#实现螺旋矩阵

    C#语言,二维数组的用法和C++.java不同 其它两种也写了,差别不大这里不上传了 using System; namespace _NetRectangle { internal class Pr ...

  3. SQL SERVER 事务日志 解析

    1 基本介绍 每个数据库都具有事务日志,用于记录所有事物以及每个事物对数据库所作的操作. 日志的记录形式需要根据数据库的恢复模式来确定,数据库恢复模式有三种: 完整模式,完全记录事物日志,需要定期进行 ...

  4. Kubernetes运维生态-cAdvisor分析

    Kubernetes的生态中,cAdvisor是作为容器监控数据采集的Agent,其部署在每个节点上,内部代码结构大致如下:代码结构很良好,collector和storage部分基本可做到增量扩展开发 ...

  5. 自学html5要花多长时间

    自学html5培训课程对于没有基础的那么就需要从头开始学,主要包括以下几方面 1. PC端网页制作基础,包括css,html 2. Javascript.jquery 主要是写一些动效 3. 学习UI ...

  6. 大型ERP系统在线体验

    ERP简单说明: AIO7构建了基于SOA三层架构的管理软件平台.客户通过网络即可得到ERP服务,不用安装服务器.不用建立数据中心.不用安装软件.无需专业IT支持,任何上网设备就可以使用高性能.功能集 ...

  7. Collector for ArcGIS的使用体验

    基于Esri的Portal for ArcGIS(下面简称Portal),用户可以搭建一个本地的地理信息云平台.围绕着这个云平台,Esri为不同的终端提供了响应的解决方案,其中Collector fo ...

  8. 求int型正整数在内存中存储时1的个数

    题目描述: 输入一个int型的正整数,计算出该int型数据在内存中存储时1的个数. 输入描述: 输入一个整数(int类型) 输出描述: 这个数转换成2进制后,输出1的个数 输入例子: 5 输出例子: ...

  9. 1657: [Usaco2006 Mar]Mooo 奶牛的歌声

    1657: [Usaco2006 Mar]Mooo 奶牛的歌声 Time Limit: 5 Sec  Memory Limit: 64 MBSubmit: 526  Solved: 365[Submi ...

  10. nodejs的简单爬虫

    闲聊       好久没写博客了,前几天小颖在朋友的博客里看到了用nodejs的简单爬虫.所以小颖就自己试着做了个爬博客园数据的demo.嘻嘻......      小颖最近养了条泰日天,自从养了我家 ...