一个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>

doT js模板入门 2

doT js 使用{{}} 非常类似于JSP,所以用起来感觉很亲切,很顺手 {{–>%>
  • hw1287789687
  • hw1287789687
  • 2015年06月29日 10:45
  • 1503

js模板引擎入门(附有项目实例)

首先,谈谈我自己对模板引擎的理解。 存在既是道理,模板引擎的诞生应该也有其原因与发展过程,模板引擎产生的大背景应该有两个主力因素。 一,数据,“信息经济”、“大数据“ 时代的带来,数据越来越多,数据总...
  • Wiz2014
  • Wiz2014
  • 2015年03月23日 15:57
  • 1062

C++ 类模板概念与实例,模板参数问题

什么是类模板? 一个类模板(也称为类属类或类生成类)允许用户为类定义一种模式,使得类中的某些数据成员、默写成员函数的参数、某些成员函数的返回值,能够取任意类型(包括系统预定义的和用户自定义的)。 ...
  • qq_26437925
  • qq_26437925
  • 2016年12月18日 15:33
  • 1183

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

解说一下 GXTemplate, 一个模板套用类库 (谈不上框架), v0.1版本的实现过程 (JavaScript)...
  • zhgangxuan
  • zhgangxuan
  • 2016年01月30日 11:21
  • 144

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

第4章 接 第2章 http://blog.csdn.net/zhgangxuan/article/details/50636985  第4章 下载地址  https://github.c...
  • zhgangxuan
  • zhgangxuan
  • 2016年02月05日 09:36
  • 123

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

接 第1章 http://blog.csdn.net/zhgangxuan/article/details/50610883  第2章 下载地址  https://github.com/zh...
  • zhgangxuan
  • zhgangxuan
  • 2016年02月01日 23:59
  • 209

java servlet验证码和一个javascript菜单联动例子

  • 2009年03月27日 14:17
  • 8KB
  • 下载

一个涉及智能指针,临界区,唯一实例,类模板和线程安全的类的编写例子

  • 2013年01月08日 10:22
  • 6KB
  • 下载

模板类友元函数的一个例子

  • 2013年05月24日 19:37
  • 964B
  • 下载

一个静态化的例子(利用模板生成静态化页面)

  • 2010年09月25日 16:15
  • 811KB
  • 下载
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:一个javascript模板的例子
举报原因:
原因补充:

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