前端开发支持各种js语法的js模板引擎
摘要： web前端开发技术课件 web前端开发技术聂常红答案 云上贵州招聘前端开发 <script id=”test_list” type=”text/html”> <%= for(var i = 0, l = p.list.length; i < ……
<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>
调用
$(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.TEMPE = 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(_.TEMPS),
e = -1,
p,
sl = .TEMPS.length,
el = .TEMPE.length;
for(;s >= 0;){
e = str.indexOf(.TEMPE);
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(.TEMPS);
}
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()的形式
web前端开发技术聂常红答案 web前端开发新技术书籍 web前端开发技术选择题
» 本文来自：前端开发者 » 《前端开发支持各种js语法的js模板引擎》
» 本文链接地址：https://www.rokub.com/5524.html
» 您也可以订阅本站：https://www.rokub.com
近期评论