js模板
阿新 • • 發佈:2017-08-29
語法 alert {} 字符 php bsp tex sin ddr
參考連接:
http://www.jiangkunlun.com/2012/05/js_%E6%A8%A1%E6%9D%BF/
http://www.360doc.com/content/16/0115/10/597197_528136785.shtml
核心是將模板代碼轉變成了一個拼接字符串的 function,每次拿數據 call 這個 function。
因為主要是給手機(webkit)用的,所以沒有考慮字符串拼接的效率問題,如果需要給 IE 使用,最好將字符串拼接方法改為 Array.push() 的形式。
簡單實用的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()的形式
js模板