javascript利用初始化数据装配模版的实现代码_javascript技巧

var list = [{id:1, name:"czone", age:21}, {id:2, name:'czonechan', age:21}];
var template ='<div id="p$id"><span class="name">$name</span><span class="age">$age</span></div>';

实现一个通用方法,使用初始化数据来装配模版。

复制代码 代码如下:

function displayTemplate(list,template){
var result="";
for(var i=0,l=list.length;i<l;i++){
var temp=template;
for(var k in list[i])
{
var reg=new RegExp("\\$"+k,"g");
temp=temp.replace(reg,function(w){
return list[i][k];
})
}
result+=temp;
}
return result;
}

时间: 2024-09-17 04:23:43

javascript利用初始化数据装配模版的实现代码_javascript技巧的相关文章

JavaScript数组实现数据结构中的队列与堆栈_javascript技巧

一.队列和堆栈的简单介绍 1.1.队列的基本概念 队列:是一种支持先进先出(FIFO)的集合,即先被插入的数据,先被取出! 如下图所示: 1.2.堆栈的基本概念 堆栈:是一种支持后进先出(LIFO)的集合,即后被插入的数据,先被取出! 如下图所示: 二. 在JavaScript中实现队列和堆栈 在JavaScript中实现队列和数组主要是通过数组,js数组中提供了以下几个方法可以让我们很方便实现队列和堆栈: •shift:从数组中把第一个元素删除,并返回这个元素的值. •unshift: 在数组

用JavaScript获取页面文档内容的实现代码_javascript技巧

JavaScript的document对象包含了页面的实际内容,所以利用document对象可以获取页面内容,例如页面标题.各个表单值. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>js基础</title> </head> <body> <p>一. 用Documen

教你用javascript实现随机标签云效果_附代码_javascript技巧

标签云是一套相关的标签以及与此相应的权重.典型的标签云有30至150个标签.权重影响使用的字体大小或其他视觉效果.同时,直方图或饼图表是最常用的代表约12种不同的权数.因此,标签云彩能代表更多的权,尽管不那么准确.此外,标签云通常是可以交互的:标签是典型的超链接,让用户可以仔细了解他们的内容.   大概可以理解为一堆相关或者不相关的标签混到一块,根据不同的重要程度,或者其他维度的不同来为每个标签设置不同的样式已凸显他们的不同,这样的一堆标签在一起就是我们通常说的标签云了.   下面我们大概说一下

JavaScript操作select元素和option的实例代码_javascript技巧

废话不多说了,直接给大家贴代码,具体代码如下所示: <!DOCTYPE html PUBLIC "-//WC//DTD XHTML . Transitional//EN" "http://www.w.org/TR/xhtml/DTD/xhtml-transitional.dtd"> <html xmlns="http://www.w.org//xhtml"> <head> <title></t

JavaScript蒙板(model)功能的简单实现代码_javascript技巧

思路: •创建一个蒙板, 设置蒙板的堆叠顺序保证能将其它元素盖住 position: absolute; top: 0; left: 0; display: none; background-color: rgba(9, 9, 9, 0.63); width: 100%; height: 100%; z-index: 1000; •设置蒙板中内容的背景色和展示格式 width: 50%; text-align: center; background: #ffffff; border-radius

Javascript highcharts 饼图显示数量和百分比实例代码_javascript技巧

Javascript highcharts 饼图显示数量和百分比实例代码                   最近公司项目需求有这样一个功能模块,highcharts 饼图显示数量和百分比 ,由于本人刚入门,看到这个需求不会写,于是就上网搜下相关资料,觉得一篇还不错记录下. <div class="piecleft" id="chart" style="height:350px; width: 350px;"> </div>

JavaScript中boolean类型之三种情景实例代码_javascript技巧

实例如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Co

基于JavaScript实现 网页切出 网站title变化代码_javascript技巧

废话不多说了,直接给大家贴代码了,具体代码如下所示: <!DOCTYPE html> <html> <head> <meta charset="UTF-"> <title>这里是网站标题</title> </head> <body> <script type="text/javascript"> document.body.onfocus = function

javaScript实现可缩放的显示区效果代码_javascript技巧

本文实例讲述了javaScript实现可缩放的显示区效果代码.分享给大家供大家参考,具体如下: 这里演示可缩放的显示区,采用JS代码实现,鼠标按住区域的右下角,出现拖放箭头时,向下或向上拉,就可实现缩放操作,当区域较小时显示滚动条,平时也比较常见的效果,在此将JavaScript代码与大家分享. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-ksf-box-style-demo/ 具体代码如下: <HTML> <HEAD>