js模板引擎内部实现原理

模板引擎的实质其实是利用正则表达式,替换模板当中事先定义好的标签

这里正则表达式不做介绍,网上有很多,可以查

1.不引用模板引擎

<span style="white-space:pre">	</span><div id="content"></div>

	<<span style="color:#33ff33;">!-- 模板 --></span>
	<script type="text/html" id="tpl">
		<h4>my name is <%= name %></h4>
		<h5>i am <%= age %> years old</h5>
	</script>

<script>
		
		<span style="color:#33ff33;">//将函数进行封装</span>
		function template(id,data){

			var tpl = document.getElementById(id);

			<span style="color:#33ff33;">//字符串</span>
			tpl = tpl.innerHTML;

			<span style="color:#33ff33;">//通过正则表达式查换特殊标记的内容</span>
			var reg = /<%=\s*([^%>]+\S)\s*%>/;
			var match;

			<span style="color:#33ff33;">//匹配不到则为null,循环则停止</span>
			while(match = reg.exec(tpl)){
				<span style="color:#33ff33;">//替换</span>
				tpl = tpl.replace(match[0],data[match[1]]);
			}
			return tpl;
		}
	<span style="color:#33ff33;">// 渲染模板</span>
		var data = {
			name:'cici',
			age:10
		}
		var html = template('tpl',data);
		
		document.getElementById('content').innerHTML = html;
	</script>

2.引入模板引擎

<span style="white-space:pre">	</span><div id="content"></div>
	<span style="color:#33ff33;"><!-- 引入模板 原生语法版--></span>
	<script src="js/template-native.js"></script>

<pre name="code" class="html"><span style="white-space:pre">	</span><span style="color:#33ff33;"><!-- 模板 --></span>
	<script type="text/html" id = "tpl">
		<h3>my name is <%=name%></h3>
		<h4>i am <%=age%> years old</h4>
		<h5>sex <%=sex%></h5>
	</script>

template(id, data)根据 id 渲染模板。内部会根据document.getElementById(id)查找模板。如果没有 data 参数，那么将返回一渲染函数。

<script>
	var data = {
			name: 'itcast',
			age: 10,
			sex:'女'
		}
<span style="white-space:pre">	</span>var html = template('tpl',data);

	document.getElementById('content').innerHTML = html;

</script>