项目中遇到的模板方法总结。tmpl

原始方法。

编写html的模板。其中<%%>表示识别符号，后续可以处理js的事情，data为后续函数绑定的数据值。

 billQueryProto.detailTemplate = function () {
        //8 表示日期，默认解析两个，开始时间和结束时间。
        return '

'
             + '  

'
             + '        

'
             + '        

'
             + '          <%for (var i=0; i '
             + '               <%if(item.FColType =="8" ) {%>'
             + '                  

 '
             + '                     <%var ColCaptio = item.FColCaption.split("^");  var DisplayContent = item.FDisplayContent.split("^"); %>'
             + '                          <%for (var j=0;j   '
             + '                                      '
             + '                                   <%=ColCaptio[j]%>'
             + '                                     '
             + '                                   value="<%=DisplayContent[j]%>"  <%}else {%>  value  <%}%>  >   '
             + '                                     '
             + '                          <%}%>  '
             + '                  

'


             + '            <%}else if(item.FColType =="16" && item.FItemClassID !="-1") {%>'
             + '                            

 '
             + '                                    '
             + '                                   <%=item.FColCaption%>'
             + '                                   '
             + '                                 value="<%=item.FDisplayContent%>"  <%}else {%>  value  <%}%>    >  '
             + '                                   '
             + '                            

'






            + '            <%}else if(item.FColType =="2") {%>'
             + '                            

 '
             + '                                    '
             + '                                   <%=item.FColCaption%>'
             + '                                   '
             + '                                 value=<%=item.FDisplayContent%>  <%}else {%>  value  <%}%>    >  '
             + '                                   '
             + '                            

'


             + '            <%}else{%>'
             + '                            

 '
             + '                                    '
             + '                                   <%=item.FColCaption%>'
             + '                                   '
             + '                                 value="<%=item.FDisplayContent%>"  <%}else {%>  value  <%}%>    >    '
             + '                                   '
             + '                            

'
             + '                 <%}%>'
             + '          <%}%>'
             + '   '
             + '

';
    };

  var filterTemplate = scope.detailTemplate();
  //获取缓存
var mydata = scope.FilterData;
     var FilterTemplate = $s.html2dom(filterTemplate.tmpl(mydata));

//需要的只是，正则表达式，eval的使用方法，模板引擎等概念。

    var html2dom = function (html) {
        var div = document.createElement('div');
        div.innerHTML = html;


        return div.firstElementChild;
    };

function tmpl(_t, data) {

        var _data = [],
            v = {};
        v.last = _t.replace(/([\s\S]*?)(?:<%((?:\=|\$\/)?)([\s\S]*?)%>)/g, function (m, s, t, c, i) {
            v["s_" + i] = s;
            _data.push("res.push(v.s_" + i + ");");
            if (t === "=") {
                _data.push("res.push(" + c.trim() + ");");
            } else {
                _data.push(c.trim());
            }
            return "";
        });
        try {
            var _ = new Function("data", "res", "v", _data.join("") + "res.push(v.last);return String.prototype.concat.apply('', res);").toString();
            return eval("(" + _ + ")")(data || {}, [], v);
        } catch (e) {
            console.error("Template Error.", e);
            console.log(_);
        }