解析字符串模板函數

 

關鍵：eval 會將傳入的字符串當做js代碼執行。

1..模板部分主要內容是

　　靜態html 代碼：

　　js代碼:<% %>,  if .. else..等

　　js表達式：<%= ...%>

2. 用正則式提取出js代碼和js表達式中的內容，將這三部分合成由字符串組成的可執行函數的內容部分。

　　一是 根據代碼和表達式增強需要輸出的html

 

 

 

 

function compile(template){
    //關鍵是 eval 計算某個字符串並執行其中的js代碼。
    // 模板解析的時候可以將html代碼部分和js代碼部分合並成一個字符串，調用eval生成一個函數用於根據數據生成html代碼並輸出
    //1.提取js代碼<% %>  js表達式<%= %> ,
    //

    const codeReg =/<%=(.+?)%>/g;
    const exprReg = /<%(.+?)%>/g;

    template = template.replace(codeReg,'`)\n code($1); \n code(`')
    .replace(exprReg,'`)\n $1 \n code(`');
    template='code(`'+template+'`)'
    //連接模板內容生成一個用於生成html的函數
    //把模板內容合成一個包含js代碼和html字符串的待執行函數。
    //導入數據並解析
    var parse = `(function parse(data){
          var output="";   
        function code(str){
            output+=str;
        }
        ${template}        
        return output;
    })`;
    return parse;
}


//根據模板，生成並返回一個解析函數parse
//parse 需要定義一個存放代碼的數組，靜態代碼和動態代碼（js）都存，然后合並后返回，只要輸入數據執行此函數會自動合成html並返回
function compile1(template){
    const evalReg = /<%=(.+?)%>/g;
    const exprReg = /<%(.+?)%>/g;

    template=  template.replace(evalReg,'\");  r.push($1);   r.push(\"')
        .replace(exprReg,'\");  $1  r.push(\"')
        .replace(/[\r\n]/g,"");

    template = 'r.push(\"'+template+'\");';
    // function parse(... 外部需要加小括號，表達式才會有返回值，不加小括號就表示聲明了函數
    var parse = '(function parse(data){' +
        'var r = [];' +
        template+
        '' +
        '; return r.join("")' +
        '})';
    return parse;
}

 

<div id="outer">

</div>
<script src ="string_template.js"></script>
<script>
    var temp1 =`<ul>
 <%for(var i =0;i<data.length;i++){%>
 <li>
 <% if(data[i].name=='xx'){%>
  <% if(data[i].name=='yy'){%>
   <span>上島咖啡就是寬度</span>
   <%}%>
 <span>薩克的積分卡薩</span>
 <%}%>
 <%=data[i].name%>
 </li>
 <%}%>
</ul>`;
    var data = [{name:"大型"},{name:"歷練"},{name:"尾款"},{name:'xx'},{name:'yyy'}];
    //compile1
  //  var parse = eval(compile(temp1));
    var parse = eval(compile1(temp1));
    var result=parse(data);
    console.log(result);
    document.getElementById("outer").innerHTML = result;
</script>

 

參考：es6 標准入門