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开头