一个javascript模板的例子

转载 2015年11月20日 20:44:24

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

相关文章推荐

中级JavaScript例子, 如何实现一个简单实用的模板套用机制, GXTemplate , 第一章(估计要写9章)

解说一下 GXTemplate, 一个模板套用类库 (谈不上框架), v0.1版本的实现过程 (JavaScript)

中级JavaScript例子, 如何实现一个简单实用的模板套用机制, GXTemplate , 第4章(估计要写9章)

第4章 接 第2章 http://blog.csdn.net/zhgangxuan/article/details/50636985  第4章 下载地址  https://github.c...

中级JavaScript例子, 如何实现一个简单实用的模板套用机制, GXTemplate , 第2章(估计要写9章)

接 第1章 http://blog.csdn.net/zhgangxuan/article/details/50610883  第2章 下载地址  https://github.com/zh...

JavaScript:一个面向对象的例子

定义对象的一种方式: var modulePrompt={ js_data:function(module_id,msg){ //初始化属性 module_id:组件ID,msg:提示内容 ...

一个用javascript编写的表单提交的例子(包括用正则表达式对数据进行验证)

添加用户      function checkMyForm(){  var username=document.getElementById("username");  var xm=...

JavaScript的一个验证模板

  • 2010-10-18 11:33
  • 31KB
  • 下载
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

(最多只允许输入30个字)