【第22期】观点:IT 行业加班,到底有没有价值?

一个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实现简单动画效果。

利用javascript的setTimeout()函数可以实现简单的动画效果。setTimeout()函数有两个参数,第一个参数是一个字符串,其内容是将要执行的哪个函数的名字;第二个参数是一个数值,它...

javascript例子

5秒之后跳转 k=5; function tiaozhuan(){ var text=document.getElementB...

javascript使用100例一

(001)获取 url 中的参数 要求指定参数名称,返回该参数的值 或者 空字符串 不指定参数名称,返回全部的参数对象 或者 {} 如果存在多个同名参数,则返回数组 输入例子:getUrlPar...

JavaScript的一些小实例

当我们把鼠标放到某一个超链接上面时,显示其相关信息;曾今我也很想实现这样的效果,总感觉很洋盘……这段时间学习在JS,感觉还可以,不像自己才开始学习编程时那么的困难;下面是我对这一效果的实现(只是实现了...

javascript--经典实例锦集

一,javascript动态显示: 如显示效果上图所示: 如图显示鼠标放在百度谷歌等字样上市动态显示其内容明细:代码如下: head> title>/title> scr...

javascript异步编程实例

异步函数这个术语有点名不副实,调用一个函数后,程序只在该函数返回后才能继续。Javascript程序员如果称一个函数为异步的,其意思就是这个函数会导致将来再运行另一个函数,后者取自于事件队列。如果后面...

javascript语言实例100题

javascript编程实例

javascript经典代码实例

固定表头 进入主页以后自动播放声音 进入主页后自动最大化,省的去在自己单击了 self.moveTo(0,0) self.resizeTo(screen.availWidth,screen.ava...

javascript实用例子

js学习笔记,别错过!很有用的。   ///////////////////////////////////////////////////////////////////////////////...

javascript一些小例子总结,持续更新...

1、页面上倒计时,例如3秒之后回到首页: 系统将在 5 秒钟后自动跳转至新网址,如果未能跳转,请点击。 delayURL(); function delayURL() {...
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

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