编写javascript来生成DOM，发现DOM和数据以及javascript混成一片，很难维护。心想如果能和freemarker或者velocity这种模板技术就好了，于是上网找了下，还真发现了一篇博文，地址是：点击打开链接，非常不错。我照着这个做个Demo，先记下来。当然了，今天也知道了关于这种javascript模板其实已经有很多开源框架了，大家可以网上搜下，我把我的例子记下来防止忘记。
<html>
<head>
<style type="text/css">
.myTb{border-top:1px solid #999;border-left:1px solid #999;border-spacing:0;}
.myTb td{border-bottom:1px solid #999;border-right:1px solid #999;padding:10px 30px;}
</style>
</head>
<body>
<div id="contentDiv"></div>
<script>
var TemplateEngine = function(html, options) {
var re = /<%([^%>]+)?%>/g, reExp = /(^( )?(if|for|else|switch|case|break|{|}))(.*)?/g, code = 'var r=[];\n', cursor = 0;
var add = function(line, js) {
js? (code += line.match(reExp) ? line + '\n' : 'r.push(' + line + ');\n') :
(code += line != '' ? 'r.push("' + line.replace(/"/g, '\\"') + '");\n' : '');
return add;
}
while(match = re.exec(html)) {
add(html.slice(cursor, match.index))(match[1], true);
cursor = match.index + match[0].length;
}
add(html.substr(cursor, html.length - cursor));
code += 'return r.join("");';
return new Function(code.replace(/[\r\t\n]/g, '')).apply(options);
};
var template = '<table class="myTb">'
+ '<tr>'
+ '<td><%this.attachConfig.attachType%></td>'
+ '</tr>'
+ '<tr>'
+ '<td><%this.obj.id%></td>'
+ '</tr>';
var data = {
obj:{
id:'1'
},
attachConfig: {
attachType:'招标文件'
},
tempString:'*'
};
var innerHtml = TemplateEngine(template, data);
alert(innerHtml);
document.getElementById("contentDiv").innerHTML = innerHtml;
</script>
<body>
</html>
347
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
