我们前端在写小程序和vue等页面时,经常用到模板组件,不同地方调用同样的布局,数据不一样传入就行,可是你不知道的是,html通过script也可以制作模板组件,在需要的时候调用。很多人不知道而已,这个秘密被我发现了,啊哈哈哈。

为了快速测试,我用了jquery控制模板,后面谁用到了可以改成原生的就行:

<script id="tm" type="text/html">
	<h1>{title}</h1>
	<p>{infoMsg}</p>
</script>

正则过滤 传数据

<script type="text/javascript">
	var data = {
		'title': '123456',
		'infoMsg':'内容详情'
	}
			
	var reg = new RegExp("\\{([^\\[\\]]*?)\\}", 'igm'); //i g m是指分别用于指定区分大小写的匹配、全局匹配和多行匹配。
	var html = $("#tm").html()
	var source = html.replace(reg, function (node, key) { return data[key]; });
	$(".box").append(source)
</script>

全部代码:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="../css/qux/jquery-1.8.3.min.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
 		<div class="box">
 			
 		</div>

		<script id="tm" type="text/html">
			<h1>{title}</h1>
			<p>{infoMsg}</p>
		</script>
		<script type="text/javascript">
			var data = {
				'title': '123456',
				'infoMsg':'内容详情'
			}
			
			var reg = new RegExp("\\{([^\\[\\]]*?)\\}", 'igm'); //i g m是指分别用于指定区分大小写的匹配、全局匹配和多行匹配。
			var html = $("#tm").html()
			var source = html.replace(reg, function (node, key) { return data[key]; });
			$(".box").append(source)
		</script>
	</body>
</html>

版权声明:原创作品,允许转载,转载时请务必以超链接形式标明文章 原始出处 、作者信息和本声明。否则将追究法律责任。