找回密码
当前位置：前端开发者 > JavaScript > 正文

前端开发支持各种js语法的js模板引擎

2018-09-06 20:32:05 分类：JavaScript 阅读(127) 评论(0)
web前端开发技术课件 web前端开发技术聂常红答案 云上贵州招聘前端开发
<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
赞(0)
64K
标签：前端开发者

前端开发者

相关推荐

评论 抢沙发

评论前必须登录！

 

最新评论