artTemplate模板引擎实现原理简析

artTemplate是一款js模板引擎，可对服务器端响应回来的数据进行渲染，将其展示到页面上。
其内部实现原理主要是借助正则表达式查找匹配的内容，然后用响应回来的数据对其替换。
其实现原理如下代码所示：

window.zane = {
myTemplate:function (template,data) {
//1.获取模板中的内容
var tplStr = document.querySelector("#" + template).innerHTML;
//2.定义正则表达式，对获取的内容进行匹配查找
var reg = /{{(\w+)}}/;
/**
reg.exec() 方法
功能:用正则调用,通过该方法查找匹配的内容
参数:字符串
返回值: 返回结果数组,找不到就会返回null
*/
var result = null;
//while循环,当返回值是null时，就停止查找
while (result = reg.exec(tplStr)){
tplStr += tplStr.replace
4000
(result[0],data[result[1]]);
}
//返回tplStr
return tplStr;
}
};

<script src="myTemplate.js"></script>

<!--==========================================================
====这里的type必须更换为js不能识别的类型，因为这里定义的是一个模板，
====而不是js代码，如不更换type类型，会被当作js代码，但js必然不能解
====析模板中的内容，这样一来代码就会报错，阻塞代码内的执行
=============================================================-->
<script id="template" type="text/html">
<h1>我是花心{{luobo}}</h1>
<h1>我是空心{{baicai}}</h1>
</script>

<script>
//模拟一个从服务器端响应回来的假数据
var json =
{
"luobo":"大萝卜",
"baicai":"大白菜"
};

//调用这个方法
var tplStr = zane.myTemplate("template",json);
//将其写入到网页中
doument.body.innerHTML = tplStr;
</script>