一个简单的 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();" />
<input type="button" value="加载数据(方式 2 )" onclick="loadMethod2();" />
</body>
</html>
效果截图:
效果截图2:
您可能还会喜欢:
给 Javascript 的 string 对象扩展一个 format 方法
一个轻量级 Javascript 模板引擎 front.js【二】
谢谢浏览!
作者:音乐让我说(音乐让我说 - 博客园)
出处:http://music.cnblogs.com/
文章版权归本人所有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。