简单模板引擎

描述：

1.模板字符串

2.模板解析（字符串替换）

3.将第二步返回值显示屏幕

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div class="result"></div>

<script type="template" id="template">
    <a href="{{href}}">{{title}}</a>
</script>


<script>
    var data = [
        {
            title: "Knockout应用开发指南",
            href: "#",
            imgSrc: "#"
        },
        {
            title: "微软ASP.NET站点部署指南",
            href: "#",
            imgSrc: "#"
        },
        {
            title: "HTML5学习笔记简明版",
            href: "#",
            imgSrc: "#"
        }
    ];

       var  result = document.querySelector('.result'),       

       for ( let i = 0; i < data.length; i++ ) {
           var fragment = '';
           fragment += template
            .replace( /\{\{title\}\}/, data[i].title )
            .replace( /\{\{href\}\}/, data[i].href )
            .replace( /\{\{imgSrc\}\}/, data[i].imgSrc );
    }

    result.innerHTML = fragment;
</script>
</body>
</html>

http://www.cnblogs.com/TomXu/archive/2011/12/15/2284752.html

效果图：

更多详细模板：http://handlebarsjs.com/

例二:

<!DOCTYPE html>
<html>
<head>
    <title>Template</title>
</head>
<body>
<div id="results"></div>
<script type="text/html" id="user_tmpl">
<ul>
    <% for ( var i = 0; i < users.length; i++ ) { %>
    <li><a href="<%=users[i].url%>"><%=users[i].name%></a></li>
    <% } %>
</ul>
</script>
 
<script>
var results = document.getElementById("results");
var users=[
    {"name":"smile", "url":"http://localhost"},
    {"name":"Amy", "url":"http://localhost"},
    {"name":"JavaScript", "url":"http://localhost"}
];
 
//模板解析
function tmpl(id,data){                //data：JSON对象。
    var html=document.getElementById(id).innerHTML;
    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);
    return fn(data);
}
 
    results.innerHTML = tmpl("user_tmpl", users);
</script>
</body>
</html>

https://www.cnblogs.com/dolphinX/p/3489269.html

效果图：

posted @ 2018-07-12 14:41 优昙陀罗阅读(109) 评论(0) 收藏举报

刷新页面返回顶部