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

原始方法。

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

 billQueryProto.detailTemplate = function () {
        //8 表示日期，默认解析两个，开始时间和结束时间。
        return '<div class="billquery-content-filter">'
             + '   <form action="#">'
             + '         <div class="billquery-content-first">'
             + '         </div>'
             + '          <%for (var i=0; i<data.length;i++) { var item = data[i];%> '
             + '               <%if(item.FColType =="8" ) {%>'
             + '                  <div class="billquery-content-filter-li-date">  '
             + '                     <%var ColCaptio = item.FColCaption.split("^");  var DisplayContent = item.FDisplayContent.split("^"); %>'
             + '                          <%for (var j=0;j<ColCaptio.length; j++) {%>   '
             + '                                  <label  data-key="<%=item.FColName%>"  class="ui-nowrap-label">    '
             + '                                   <%=ColCaptio[j]%>'
             + '                                  </label>   '
             + '                                   <input  data-key="<%=item.FColName%>"  data-type="<%=item.FColType%>" data-lookupcls = "-1" data-valuekey="<%=item.FValue%>" disabled    <%if (DisplayContent[j]!=""||DisplayContent[j]!=null||DisplayContent[j]!=undefined) { %> value="<%=DisplayContent[j]%>"  <%}else {%>  value  <%}%>  >   '
             + '                                  </input>   '
             + '                          <%}%>  '
             + '                  </div>'


             + '            <%}else if(item.FColType =="16" && item.FItemClassID !="-1") {%>'
             + '                            <div class="billquery-content-filter-li">  '
             + '                                 <label  data-key="<%=item.FColName%>"  class="ui-nowrap-label">    '
             + '                                   <%=item.FColCaption%>'
             + '                                </label>   '
             + '                                 <input  data-key="<%=item.FColName%>"  data-type="<%=item.FColType%>" data-lookupcls ="<%=item.FItemClassID%>" data-valuekey="<%=item.FValue%>"  disabled         <%if (item.FDisplayContent!=""||item.FDisplayContent!=null|item.FDisplayContent!=undefined) { %> value="<%=item.FDisplayContent%>"  <%}else {%>  value  <%}%>    >  '
             + '                                 </input>   '
             + '                            </div>'






            + '            <%}else if(item.FColType =="2") {%>'
             + '                            <div class="billquery-content-filter-li">  '
             + '                                 <label  data-key="<%=item.FColName%>"  class="ui-nowrap-label">    '
             + '                                   <%=item.FColCaption%>'
             + '                                </label>   '
             + '                                 <input type ="number" data-key="<%=item.FColName%>"  data-type="<%=item.FColType%>" data-lookupcls ="<%=item.FItemClassID%>" data-valuekey="<%=item.FValue%>"      <%if (item.FDisplayContent!=""||item.FDisplayContent!=null|item.FDisplayContent!=undefined) { %> value=<%=item.FDisplayContent%>  <%}else {%>  value  <%}%>    >  '
             + '                                 </input>   '
             + '                            </div>'


             + '            <%}else{%>'
             + '                            <div class="billquery-content-filter-li">  '
             + '                                 <label  data-key="<%=item.FColName%>"  class="ui-nowrap-label">    '
             + '                                   <%=item.FColCaption%>'
             + '                                </label>   '
             + '                                 <input  data-key="<%=item.FColName%>"  data-type="<%=item.FColType%>" data-lookupcls ="<%=item.FItemClassID%>" data-valuekey="<%=item.FValue%>"   <%if (item.FDisplayContent!=""||item.FDisplayContent!=null|item.FDisplayContent!=undefined) { %> value="<%=item.FDisplayContent%>"  <%}else {%>  value  <%}%>    >    '
             + '                                 </input>   '
             + '                            </div>'
             + '                 <%}%>'
             + '          <%}%>'
             + '   </form>'
             + '</div>';
    };

  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(_);
        }