不足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()的形式