artTemplate模板引擎实现原理简析

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

        1.原理的核心是如下封装的这个函数：myTemplate

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(result[0],data[result[1]]);
    }
    //返回tplStr
    return tplStr; 
  }
};

        2.引入封装好的myTemplate函数，并定义一个模板，例如：

<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>

更多文章请参见：blog.csdn.net/yzzane