简单的Template

早上写得1个Template得简单实现。但现在只能实现变量插入，函数调用。想加入if else 判断 for循环，但是正则表达式只是半桶水。没办法做下去。如果能有人补充下去就好了。无比感谢。

 

 <script LANGUAGE="JavaScript">
  <!--	
	
	Date.prototype.format = function(format){
	  var o = {
		"M+" : this.getMonth()+1, //month
		"d+" : this.getDate(),    //day
		"h+" : this.getHours(),   //hour
		"m+" : this.getMinutes(), //minute
		"s+" : this.getSeconds(), //second
		"q+" : Math.floor((this.getMonth()+3)/3),  //quarter
		"S" : this.getMilliseconds() //millisecond
	  }
	  if(/(y+)/.test(format)) {
		format=format.replace(RegExp.$1,(this.getFullYear()+"").substr(4 - RegExp.$1.length));
	  }
	  for(var k in o){
		  if(new RegExp("("+ k +")").test(format)){
			format = format.replace(RegExp.$1,RegExp.$1.length==1 ? o[k] : ("00"+ o[k]).substr((""+ o[k]).length));
		  }
	  }
	  return format;
	};

	function formatDate(date, format){
		var yr = date.substring(0,4);
		var mh = date.substring(4,6);
		var dy = date.substring(6,8);
		var d = new Date();

		d.setYear(yr);
		d.setMonth(mh-1);
		d.setDate(dy);
		
		return d.format(format);
	}

	function formatMoney(prefix, amount){
		return prefix + amount;
	}

	function add(a,b){
		return a+b;
	}

	function multiply(a,b){
		return a*b;
	}
	
	var tplText = [
		' attr1: ${attr1}\n', 
		' attr2.attr21: ${attr2.attr21}\n',
		' test date : #formatDate(${date}, \'yyyy-MM-dd\') \n', 
		' test currency: #formatMoney("Y",1000)\n',
		' test add : #add(${num1},${num2})\n',
		' test multiply : #multiply(#add(30,40), #add(2,3))\n'
	].join();

	var root = {
		attr1 : 'val1',
		attr2 : {
			'attr21' : 'val21'
		},
		date : '20080812',
		num1 : 10,
		num2 : 20
	}

	function Template(tpl){
		this.tpl = tpl;
		this.throwUndefError = false;
	}

	Template.prototype = {
		apply : function(dataModel){
			var _freg = /#[a-zA-Z0-9]+\(([^\(\)]*)\)/g;			
			var _vreg = /\$\{([a-zA-Z0-9\.]+)\}/g;

			var _root = dataModel;
			var fn;
			var _msg = [], _isMsg = this.throwUndefError;

			while(this.tpl.match(_freg)){
				this.tpl = this.tpl.replace(_freg, function(){
					fn = arguments[0];
					fn = fn.replace(_vreg, function(){
						var _value = eval('_root.'+arguments[1]);					
						if(_value){						
							if( 'string' == typeof _value ){
								return '\''+eval('_root.'+arguments[1]) +'\'';
							} else {
								return _value;
							}
						} else if(_isMsg){
							_msg.push(arguments[1]+' unexist!');
						}
					});
					fn = fn.substring(1);
					return eval(fn);
				});
			}
			
			this.tpl = this.tpl.replace(_vreg, function(){ 
				var _value = eval('_root.'+arguments[1]);
				if(_value){
					return eval('_root.'+arguments[1]);
				} else if(_isMsg){
					_msg.push(arguments[1]+' unexist!');
				}
			});

			
			if( 0 != _msg.length){
				alert('Error:\n'+_msg.join('\n'));
			}			
			return this.tpl;
		}
	}
	
	var tpl = new Template(tplText);
	alert(tpl.apply(root));

  //-->
  </script>

 

 

 

评论

5 楼 kimmking 2009-03-31  

lzg3267373 写道

请教楼主 貌似你这个不能填充json数据啊

他传的 root  不就是json吗

4 楼 lzg3267373 2009-03-31  

请教楼主 貌似你这个不能填充json数据啊

3 楼 perfect 2009-02-05  

最近也在研究这个 ,希望能够交流

2 楼 achun 2008-08-17  

我也是研究javascript Template的爱好者。
Template 是数据和表现分离的不二法宝.
做BS,javascript Template 是模板的最强法宝。完美的和页面结合了。
我也经历了一些阶段,大致是
1.搜索已有的js Template
最有名的是JST了，其他的都过于简单不够强，或者是够强但是和JST大同小异。
但是JST的代码写的有大问题，
首先是很晦涩（当然是人家水平够高造成的）。
其次是用了太多的正则，这个在大Template了严重的影响了速度，特别是在IE下。
最大的问题是使用的不灵活，受限制，这个就不细说了，因为每个人的用法都有自己的习惯，反正我写程序的习惯适应不了JST.
2.自己摸索阶段
就像楼主现在一样，
函数调用很简单就可以实现
if while for ..语法逐条的去实现，真是繁琐
变量的插入也费了不少力气
特别是Template文法定义费了很大的力气，因为要定义一个安全的，在各种情况下（xhtml,xml,html,浏览器兼容）都能正常工作的文法，真的很麻烦。不细说了，因为已经有了结论
3.终极认识
虽然我在第2阶段也完成了Template的完全设计，不过回头看看代码，
所有的javascript语法都重新包装了一下，太笨拙了，就不能简单些嘛？
于是我就有了现在的jCT 3 的设计。
jCT 就是 javascript common templates 的缩写。经历的过程可以从源码看出
http://jsct.googlecode.com/svn/trunk/jCT/
jct1.js  第1版
jct2.js  第2版
jct.js   第3版 终极版，这个理念真的是到头了。

为什么说是终极？其实一直到第3版完成，我自己也没有认为是终极的感觉。可是有一天我突然发现：
jCT 3的方法和php,asp,jsp嵌入脚本的方法完全一样。
jCT 3完全就是一个嵌入式javascript（废话javascript从某种观点来说就是嵌入html的语言）的前台脚本编译器。

看看下面的相关连接吧.
http://code.google.com/p/jsct/
http://achun.iteye.com/category/33268

要让我自己评价的话，jCT设计的特色有:
1.javascript 前台脚本编译器：应该插入 模板 两个字，javascript 前台模板脚本编译器更严谨，不过读起来不顺
完全把原javascript语法不动的写法融入到模板中。这意味着于javascript可以无缝的结合，所有javascript的语法jCT全部都支持。
2.子模板对象:也就是jCT 2 里说的存储模板了，其实到 jCT 3 的时候存储模板这个词已经不合适了，应该叫子模板对象
3.取值表达式：就是这个符号
+--+
看上去也许怪异，可是几乎在任何时候都不会有二义性，和兼容性问题的。这个我也不细说了，因为我使用的方法太少见了。{}的定义方法直接和我的使用方法有冲突，这也是我最开始为什么下决心要自己写模板的原因。
4.高度可制定：这个还是看实例吧。

1 楼 jindw 2008-08-13  

给个建议:把现在的格式化函数优化一下:
http://hi.baidu.com/jindw/blog/item/76d36f3e693f233871cf6c64.html