简单实用的js模板引擎

转自：微点阅读  https://www.weidianyuedu.com

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