javascript模板引擎 artTemplate

最新推荐文章于 2025-10-10 19:40:35 发布

原创最新推荐文章于 2025-10-10 19:40:35 发布 · 1.2k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #模板引擎

Javascript 专栏收录该内容

34 篇文章

订阅专栏

本文介绍了一种前端模板引擎的应用实例，包括基本用法如数据渲染、辅助函数的添加、界定符的设置、子模板的嵌入及自定义语法等。通过具体代码示例展示了如何高效地利用模板引擎来构建动态页面。

1.简单操作1
<script src="template.js"></script>
<script id="test" type="text/html">
<h1><%=title%></h1>
<ul>
    <%for(i = 0; i < list.length; i ++) {%>
        <li>条目内容 <%=i + 1%> ：<%=list[i]%></li>
    <%}%>
</ul>
</script>
<div id="content"></div>
<script>
var data = {
    title: '标签',
    list: ['文艺', '博客', '摄影', '电影', '民谣', '旅行', '吉他']
};
var html = template.render('test', data);
document.getElementById('content').innerHTML = html;
</script>
2.简单操作2
<div id="content"></div>
<script src="template.js"></script>
<script >
var source = '<%for(var i=0;i < list.length; i++) { %><div><%=i%>:<%=list[i]%><div><%}%>';
var render = template.compile(source);
var data = {
    title: '标签',
    list: ['文艺', '博客', '摄影', '电影', '民谣', '旅行', '吉他']
};
var html = render(data);
document.getElementById("content").innerHTML=html;
</script>
3.添加辅助函数
<div id="content"></div>
<script src="template.js"></script>
<script >
var source = '<%for(var i=0;i < list.length; i++) { %><div><%=i%>:<%=list[i]%><div><%}%><%=myHelper()%>';
var render = template.compile(source);
var data = {
    title: '标签',
    list: ['文艺', '博客', '摄影', '电影', '民谣', '旅行', '吉他']
};
function helper(a){
   alert(a)
   //自定义内容
}
template.helper('myHelper',helper(new Date())); //helper函数名称
var html = render(data);
document.getElementById("content").innerHTML=html;
</script>
4.设置界定符
若前端模板语法与后端语法产生冲突，可以修改模板引擎界定符，例如：
template.openTag = "";

<div id="content"></div>
<script src="template.js"></script>
<script >
var source = '<h1>{{=title}}</h1>';
template.openTag = '{{'; //开始定界符
template.closeTag = '}}';//结束定界符
var render = template.compile(source);
var data = {
    title: '标签',
};
var html = render(data);
document.getElementById("content").innerHTML=html;
</script>
5.嵌入子模板
<%include(id, [data])%>语句可以嵌入子模板，其中第二个参数是可选的，它默认传入当前的数据。
<script id="test" type="text/html">
<h1><%=title%></h1>
<%include('list')%>
</script>
<script id="list" type="text/html">
<ul>
    <%for(i = 0; i < list.length; i ++) {%>
        <li>条目内容 <%=i + 1%> ：<%=list[i]%></li>
    <%}%>
</ul>
</script>
5.自定义语法 for if elseif

<script src="template.js"></script>
<script >
var source = '<%if ( tag == 1 ) {%><h1>1</h1><%} else {%><h1>-1</h1><% } %>'; //if使用
var render = template.compile(source);
var data = {
    tag: 1,
};
var html = render(data);
document.getElementById("content").innerHTML=html;

</script>