一个javascript模板的例子

       编写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>

阅读更多
上一篇CXF动态客户端调用JDK自带Webservice安全校验
下一篇java序列化时如何遍历复杂对象嵌套的所有对象
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

关闭
关闭