js-簡單的模闆引擎-1.1

 想做一個類似kendoui的模闆的東西，在朋友的介紹下，看了篇關于簡單的javaScript模闆引擎的文章。http://www.cnblogs.com/dolphinX/p/3489269.html。

    想了一下，好像明白了，特來記錄一下思路。

    首先，比如我需要的内容是，

<ul>
    <li>aa</li>
    <li>bb</li>
</ul>
           

我想用類似kendoui的這種格式

<script type="text/html" id="user_tmpl">
    <% var obj = ["aa", "bb"] %>
    <ul>
        <% for(var i = 0; i < 2; i++){ %>
            <li><%= obj[i] %></li>
        <% } %>
    </ul>
</script>
           

然後，如果我是直接用js寫，先建立以下的函數，然後調用，往指定的div中追加内容。

///獲得模闆的字元串
///obj  資料源
///傳回 模闆的字元串
function GetTemplateStr(obj){
    var p=[];
    with(obj){
        p.push('<ul><li>aa</li><li>bb</li></ul>');
    }
    return p.join('');
}
           

由于li是根據我們的資料獲得的，将上面的代碼，改成如下内容，

///獲得模闆的字元串
///obj  資料源
///傳回 模闆的字元串
function GetTemplateStr(obj){
    var p=[];
    with(obj){
        var obj = ["aa", "bb"]
        p.push('<ul>');
        for(var i = 0; i < 2; i++){
            p.push('<li>');
            p.push(obj[i]);
            p.push('</li>');
        }
        p.push('</ul>');
    }
    return p.join('');
}
           

 現在對比兩部分代碼

var p=[];

with(obj){ 

         p.push('');

         var obj = ["aa", "bb"];           <% var obj = ["aa", "bb"]; %>

         p.push('<ul>');                     <ul>

         for(var i = 0; i < 2; i++){       <% for(var i = 0; i < 2; i++){ %>

                p.push('<li>');               <li>

                p.push(obj[i]);               <%= obj[i] %>

                p.push('</li>');              </li>

         }                                          <% } %>

         p.push('</ul>');                   </ul>

}

return p.join('');

這是js字元串的代碼                    這是js模闆的代碼

對比後可發現

<%             ->  ');

%>             ->  p.push('

<%= A %> ->  '); p.push($1); p.push('     //$1表示A的内容

開頭為             var p=[]; with(obj){ p.push('

結尾為             '); } return p.join('');

    是以就會有以下方法

///獲得模闆的字元串
///id   模闆的id号
///obj  資料源
///傳回 模闆的字元串
function tmpl(id,data){
    var html=document.getElementById(id).innerHTML;//獲得模闆的html代碼

    var result=" var p=[];with(obj){p.push(' "
    + html.replace(/[\r\n\t]/g, " ")  //将換行符替換成空格，避免形成的函數報錯
    .replace(/<%=(.*?)%>/g, " ');p.push($1);p.push(' ")//替換<%= %>
    .replace(/<%/g, " '); ")          //替換<%
    .replace(/%>/g, " p.push(' ")     //替換%>
    +" ');}return p.join(''); ";      //加結尾
        
    var fn=new Function("obj",result); //建立函數，參數為obj，内容為result
    return fn(data);                   //傳回函數的值
}
           

以後就可以直接用模闆建立頁面啦，好開森啊。。。

注：如果在js中需要用到參數的内容，請以obj開頭

注：如果在js中需要用到參數的内容，請以obj開頭