简单实用的js模板引擎

不足50行的js模板引擎，支持各种js语法：

<script id="test_list" type="text/html"><%=	for(var i = 0, l = p.list.length; i < l; i++){		var stu = p.list[i];=%>	<tr>		<td<%=if(i==0){=%> class="first"<%=}=%>><%==stu.name=%></td>		<td><%==stu.age=%></td>		<td><%==(stu.address || '')=%></td>	<tr> <%=	}=%></script>

“<%= xxx =%>”内是js逻辑代码，“<%== xxx =%>”内是直接输出的变量，类似php的echo的作用。“p”是调用下面build方法时的k-v对象参数，也可以在调用“new JTemp”时设置成别的参数名

调用：

$(function(){	var temp = new JTemp('test_list'),		html = temp.build(			{list:[           		{name:'张三', age:13, address:'北京'},        		{name:'李四', age:17, address:'天津'},        		{name:'王五', age:13}        	]});	$('table').html(html);});

上面的temp生成以后，可以多次调用build方法，生成html

一下是模板引擎的代码：

var JTemp = function(){	function Temp(htmlId, p){		p = p || {};//配置信息，大部分情况可以缺省		this.htmlId = htmlId;		this.fun;		this.oName = p.oName || 'p';		this.TEMP_S = p.tempS || '<%=';		this.TEMP_E = p.tempE || '=%>';		this.getFun();	}	Temp.prototype = {		getFun : function(){			var _ = this,				str = $('#' + _.htmlId).html();			if(!str) _.err('error: no temp!!');			var str_ = 'var ' + _.oName + '=this,f=\'\';',				s = str.indexOf(_.TEMP_S),				e = -1,				p,				sl = _.TEMP_S.length,				el = _.TEMP_E.length;			for(;s >= 0;){				e = str.indexOf(_.TEMP_E);				if(e < s) alert(':( ERROR!!');				str_ += 'f+=\'' + str.substring(0, s) + '\';';				p = _.trim(str.substring(s+sl, e));				if(p.indexOf('=') !== 0){//js语句					str_ += p;				}else{//普通语句					str_ += 'f+=' + p.substring(1) + ';';				}				str = str.substring(e + el);				s = str.indexOf(_.TEMP_S);			}			str_ += 'f+=\'' + str + '\';';			str_ = str_.replace(/\n/g, '');//处理换行			var fs = str_ + 'return f;';			this.fun = Function(fs);		},		build : function(p){			return this.fun.call(p);		},		err : function(s){			alert(s);		},		trim : function(s){			return s.trim?s.trim():s.replace(/(^\s*)|(\s*$)/g,""); 		}	};	return Temp;}();

核心是将模板代码转变成了一个拼接字符串的function，每次拿数据call这个function。

因为主要是给手机（webkit）用的，所以没有考虑字符串拼接的效率问题，如果需要给IE实用，最好将字符串拼接方法改为Array.push()的形式