模板引擎

Posted longhua-0

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了模板引擎相关的知识，希望对你有一定的参考价值。

 

 

 

 

/*
1.模板
2.解析，替换字符串

javascript模版引擎就是字符串替换，剥离出JavaScript语句，然后利用新的字符串构造函数，返回结果。
*/

<!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(/[
	]/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>

　　

效果图：

技术分享图片

 

以上是关于模板引擎的主要内容，如果未能解决你的问题，请参考以下文章

Laravel之视图和Blade模板引擎

JavaScript中template模板引擎

百度JS模板引擎

Python中verbaim标签使用详解

在 EJS 模板引擎中，如何“包含”页脚？

VSCode自定义代码片段——.vue文件的模板