簡單實用的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()的形式