js微模板引擎

最新推荐文章于 2025-08-23 23:21:14 发布

转载最新推荐文章于 2025-08-23 23:21:14 发布 · 63 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://my.oschina.net/tongjh/blog/789359

文章标签：

#json #javascript #ViewUI

<!DOCTYPE html>
<html>
<head>
	<title>templateEngine</title>
</head>
<body>
<div id="box"></div>

<script type="text/template" id="html">
	<h1><%if(json.status){%>显示<%}%></h1>
	<ul>
		<%for(var index in json.data) {%> 
		<li><a href="index.html?id=<%=json.data[index].id%>"><%=json.data[index].name%></a></li>
		<%}%>
	</ul>
</script>

<script type="text/javascript">
	var html = document.getElementById("html").innerHTML;
	var data = [
		{id:5,name:"zhangsan"},
		{id:9,name:"lisi"},
		{id:13,name2:"wangwu"}
	];
	var json = {status:true,data:data};

	function templateEngine(str,data){
		var fn = new Function("obj","var p=[];"+     //分割<% %>后放入p中最后join
					"with(obj){p.push('"+            //使用with是为了将数据作为局部变量使用
					str.replace(/[\r\t\n]/g," ")     //替换所有的换行符制表符
					.replace(/'/g,"\r")              //全部单引号替换为\r
					.split("<%").join("\t")          //替换所有的<%为\t
					.replace(/\t=(.*?)%>/g,"',$1,'") //替换所有的变量,这里使用,$1,而不是+$1+是为了最后join时候处理变量undefined时为空字符串
					.split("\t").join("');")         //一行代码的结束
					.split("%>").join("p.push('")    //push进p
					.replace(/\r/g,"\\'")            //置换回单引号
					+"');}return p.join('');");
		return data ? fn(data) : fn;
	}

	document.getElementById("box").innerHTML = templateEngine(html,json);
</script>
</body>
</html>

转载于:https://my.oschina.net/tongjh/blog/789359