代码改变世界

一个简单的 JavaScript 模板引擎

2011-12-16 17:10  音乐让我说  阅读(770)  评论(0编辑  收藏  举报

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

注:以下代码在 IE8 中测试通过,其他浏览器未测试!

代码如下:

<!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>
<title>一个简单的 JavaScript 模板引擎</title>
<style type="text/css">
.divResult
{ border:solid 1px red; margin:10px 10px 30px 10px; padding:10px 10px 10px 10px;}
</style>
<script type="text/javascript">
var data = [
{
title:
"Knockout应用开发指南",
href:
"http://www.cnblogs.com/TomXu/archive/2011/11/21/2257154.html",
imgSrc:
"http://images.cnblogs.com/cnblogs_com/TomXu/339203/o_knockout2.jpg",
imgTitle:
"图片很漂亮"
},
{
title:
"微软ASP.NET站点部署指南",
href:
"http://www.cnblogs.com/TomXu/archive/2011/11/25/2263050.html",
imgSrc:
"http://images.cnblogs.com/cnblogs_com/TomXu/339203/o_vs.jpg",
imgTitle:
"图片很漂亮"
},
{
title:
"HTML5学习笔记简明版",
href:
"http://www.cnblogs.com/TomXu/archive/2011/12/06/2277499.html",
imgSrc:
"http://images.cnblogs.com/cnblogs_com/TomXu/339203/o_LearningHtml5.png",
imgTitle:
"图片很漂亮"
}
];
//假设 data 是利用 AJAX 活得的 JSON 对象

//加载方式1
function loadMethod1()
{
var template = document.getElementById("template").innerHTML;
var result = document.getElementById("result");
var fragment = '';

for (var i = 0,len = data.length ; i < len; i++ )
{
fragment
+= template.replace( /\{\$title\$\}/, data[i].title )
.replace(
/\{\$href\$\}/, data[i].href )
.replace(
/\{\$imgSrc\$\}/, data[i].imgSrc )
.replace(
/\{\$imgTitle\$\}/, data[i].imgTitle );
}

result.innerHTML
= "方式 1 的加载结果:<br/>" + fragment;
}

//加载方式2
function loadMethod2()
{
var template = document.getElementById("template").innerHTML;
var result = document.getElementById("result");

// 将模板和数据作为参数,通过数据里所有的项将值替换到模板的标签上(注意不是遍历模板标签,因为标签可能不在数据里存在)。
var attachTemplateToData = function(template, data)
{
var fragment = '';

// 遍历数据集合里的每一个项,做相应的替换
function replaceCore(obj)
{
var t, key, reg;
      
       
//遍历该数据项下所有的属性,将该属性作为key值来查找标签,然后替换
for (key in obj)
{
reg
= new RegExp('{\\$' + key + '\\$}', 'ig');
// RegExp 的第二个参数解释如下:
//
// i : 执行对大小写不敏感的匹配。
// g :执行全局匹配(查找所有匹配而非在找到第一个匹配后停止)。
t = (t || template).replace(reg, obj[key]);
}

return t;
}

for (var i = 0, len = data.length; i < len; i++)
{
fragment
+= replaceCore(data[i]);
}

return fragment;
};

result.innerHTML
= "方式 2 的加载结果:<br/>" + attachTemplateToData(template, data);
}
</script>
</head>
<body>
<div id="result" class="divResult"></div>
<div id="template" style="display:none;">
<h2>
<a href="{$href$}">{$title$}</a>
</h2>
<img src="{$imgSrc$}" alt="{$imgTitle$}" title="{$imgTitle$}"/>
</div>
<input type="button" value="加载数据(方式 1 )" onclick="loadMethod1();" />
&nbsp;&nbsp;&nbsp;
<input type="button" value="加载数据(方式 2 )" onclick="loadMethod2();" />
</body>
</html>

 

效果截图:

效果截图2:

 

您可能还会喜欢:

给 Javascript 的 string 对象扩展一个 format 方法

自定义 Javascript 模板规则,打造轻量级模板引擎

一个轻量级 Javascript 模板引擎 front.js【二】

 

谢谢浏览!