BuildHTML
/
index.html

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">

<title>BuildHTML测试</title>
<script src="buildhtml.js"></script>

</head>

<body>
<script src="https://cdn.bootcss.com/jquery/1.9.1/jquery.min.js"></script>

<h1>简单使用</h1>
<textarea class="t1" style="width:80%;height:300px">
<script type="text/template" class="tp_action">
<div>
	{name}第一次使用模板，请多多指教。{:html}

	{_tempVar="<div>临时变量</div>";''} {:_tempVar+1} {_tempVar+2}

	{{@@_tp=
		<div class="aa">
			<style>.aa{ color:red; }</style>
			{fn:BuildHTMLArray.index}内部模板循环
			{{:
				var s=xxNum;
				s+=654000;
				o.name+s
			}}
		</div>
	@@}}

	{fn::window.xxNum=321;BuildHTMLArray(o._tp,[o,o,o])}
</div>
</script>

<script>
var mytp=$(".tp_action").html();

var data={//假装有段数据
	name:"豆豆<i>"
	,html:"<span style='color:green'>面向大海春暖花开</span>"
};

var html=BuildHTML(mytp,data);//解析

console.log(html);

$(".res1").append(html);
</script>

<div class="res1"></div>
</textarea>

<div><input type="button" onclick="test1()" value="执行"></div>
<div>结果：</div>
<div class="d1"></div>
<script>
function test1(){
	$(".d1").html($(".t1").val());
};
test1();
</script>


<h1>性能测试</h1>
<textarea class="t2" style="width:80%;height:300px">
var tp=`
<div txt="{txt}" style="display:{disable?"none":"假装空白"}">
	表达式文本:{txt}
	表达式html:{:txt}
	表达式html:{:txt.replace(/div/g,"p")}
	函数返回纯文本:{fn:var d="加"+o.html;Date.now()+d}
	函数返回html:{fn::o.html}
	函数+内置模板(嵌套):{fn::BuildHTML(o._tp_,o)}
	函数+内置模板+列表(嵌套循环):
	{fn::BuildHTMLArray(o._tp_,o.childs)}
</div>

定义内置模板(无返回值):{{_tp_=
	<div>
		<span>{name}</span>
	</div>
}}

复杂模板：{{@@_tp2_=
	<div>
		{{_tp3=
		<div>
			<style>
				.ddd{
					color:{:color};
				}
			</style>
			<div class="ddd">{color}</div>
		</div>
		}}

		{{::BuildHTML(o._tp3,{color:"#fff"})}}
	</div>
@@}}

执行代码返回文本:{{:o.name
	+"<p>"
}}

执行代码返回html:{{::var p="<p>";
	o.name+p+BuildHTML(o._tp2_,o)
}}

执行代码返回文本:{{:
	var c=0;
	for(var i=0;i<1000;i++){
		if(i%3)c++;
	};
	c
}}！哈

`;

return BuildHTML(tp,{
	disable:false
	,txt:"内容<div>"
	,html:'<i>html</i>'

	,name:"小视频<i>"
	,childs:[{name:"土豆<i>"},{name:"爱奇艺"}]
});
</textarea>

<div>
	<input type="button" onclick="test2()" value="执行">
	loop:<input type="text" class="t2loop" value="1000">
	cache:<input type="checkbox" class="t2cache" checked>
</div>
<div>结果：<span class="d2loop"></span></div>
<textarea class="d2" style="width:80%;height:300px"></textarea>
<script>
function test2(){
	var val,loop=+$(".t2loop").val()||1,cache=$(".t2cache")[0].checked;
	try{
		var fn=Function($(".t2").val());
		var t1=Date.now();
		for(var i=0;i<loop;i++){
			if(!cache){
				BuildHTML.CacheE={};
			};
			val=fn();
		};
		$(".d2loop").html(Date.now()-t1+"ms");
	}catch(e){
		val="代码异常:"+e.stack;
	};
	$(".d2").val(val);
};
test2();
</script>
</body>
</html>