js 模板引擎
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 模板引擎的更多相关文章
- doT js 模板引擎【初探】要优雅不要污
js中拼接html,总是感觉不够优雅,本着要优雅不要污,决定尝试js模板引擎. JavaScript 模板引擎 JavaScript 模板引擎作为数据与界面分离工作中最重要一环,越来越受开发者关注. ...
- 各种JS模板引擎对比数据(高性能JavaScript模板引擎)
最近做了JS模板引擎测试,拿各个JS模板引擎在不同浏览器上去运行同一程序,下面是模板引擎测试数据:通过测试artTemplate.juicer与doT引擎模板整体性能要有绝对优势: js模板引擎 Ja ...
- JS 模板引擎 BaiduTemplate 和 ArtTemplate 对比及应用
最近做项目用了JS模板引擎渲染HTML,JS模板引擎是在去年做项目是了解到的,但一直没有用,只停留在了解层面,直到这次做项目才用到,JS模板引擎用了两个 BaiduTemplate 和 ArtTemp ...
- 掌握js模板引擎
最近要做一个小项目,不管是使用angularjs还是reactjs,都觉得大材小用了.其实我可能只需要引入一个jquery,但想到jquery对dom的操作,对于早已习惯了双向绑定模式的我,何尝不是一 ...
- js模板引擎
js模板引擎包括如下: template 官方参考:http://aui.github.io/artTemplate BaiduTemplate 官方参考:http://baidufe.github. ...
- 调研js模板引擎
js模板引擎越来越多的得到应用,如今已经出现了几十种js模板引擎,国内各大互联网公司也都开发了自己的js模板引擎(淘宝的kissy template,腾讯的artTemplate,百度的baiduTe ...
- js模板引擎介绍搜集
js模板引擎越来越多的得到应用,如今已经出现了几十种js模板引擎,国内各大互联网公司也都开发了自己的js模板引擎(淘宝的kissy template,腾讯的artTemplate,百度的baiduTe ...
- Filter - Surge.js模板引擎过滤器
版权所有,转载请注明出处:http://guangboo.org/2014/01/05/filter-surgejs-template-engine 过滤器在surge.js模板引擎中多处用到,其类似 ...
- js模板引擎--artTemplate
js模板引擎--artTemplate 以前研究过一段时间的handlebars,但因为其渲染性能略逊于腾讯的artTemplate(在artTemplate的GitHub官网上有推荐的性能测试地址) ...
- JS模板引擎:tppl
全球最快的JS模板引擎:tppl 废话不多说,先上测试: 亲测请访问:[在线测试地址]单次结果不一定准确,请多测几次. tppl 的编译渲染速度是著名的 jQuery 作者 John Resig 开发 ...
随机推荐
- JS中的作用域链
在js中数据的声明方式有两种: 1.用var声明,例如:var num = 10: 2.直接声明,例如:num = 10: 两种声明方式在某些情况下是有区别的: var data = 10; func ...
- keepalived 安装配置
keepalived介绍 1. keepalived 是lvs 的扩展项目,因此它们之间具备良好的兼容性. 2. 通过对服务器池对象的健康检查,实现对失效机器/服务的故障隔离. 3. 负载均衡器之间的 ...
- MySQL调优三步曲(慢查询、explain profile)
在做性能测试中经常会遇到一些sql的问题,其实做性能测试这几年遇到问题最多还是数据库这块,要么就是IO高要么就是cpu高,所以对数据的优化在性能测试过程中占据着很重要的地方,下面我就介绍一些msyql ...
- Extjs中创建Tree菜单【一】
此篇treepanel的描写是很简单,没有太大的难度,在学习时,可以先熟悉tree的一些配置信息.属性.方法和事件. 然后先写一个简单的例子,慢慢了解从中如何实现的,然后在慢慢的深入了解,实现一些复杂 ...
- 3314: [Usaco2013 Nov]Crowded Cows
3314: [Usaco2013 Nov]Crowded Cows Time Limit: 1 Sec Memory Limit: 128 MBSubmit: 111 Solved: 79[Sub ...
- .Net程序员学用Oracle系列(21):分组查询(GROUP BY)
1.GROUP BY 标准分组 1.1.GROUP BY 概述 1.2.WHERE 和 HAVING 的区别? 2.GROUP BY 扩展分组 2.1.ROLLUP 分组 2.2.CUBE 分组 2. ...
- protected private public 的区别
1.public,protected,private是Java里用来定义成员的访问权限的,另外还有一种是"default",也就是在成员前不加任何权限修饰符.如: publi ...
- 简单的add函数的N种写法
最近在学习es6,看到for-of这里,就想自己写着练习一下,于是就准备写一个小函数add来求和.函数很简单,如add(1,2,3)这样.于是我开始着手 一开始我是这么写的 function add( ...
- 【2017-03-20】HTML基础知识、文字标记、图片标记、空格换行、表格、表格嵌套及布局、超链接
一.HTML基础知识 HTML: 网站(站点) - 网页 网站是由一个或者多个网页组合起来的 HTML作为文件后缀名,可以把文件变为网页 HTML是一门编程语言的名字:超文本标记语言 超越了文字的范畴 ...
- ubuntu14.04下安装有道词典
1.打开官方下载链接:http://cidian.youdao.com/index-linux.html 2.下载相应版本的安装包 3.直接双击安装包进行安装 可能会存在软件打不开的情况,更新下系统, ...