JavaScript模板引擎实现原理和封装

这里以art-template为例

先看例子

<!-- 引入模板引擎js文件-->
<script type="text/javascript" src="arttemplate.js"></script>

<div id="content"></div>
<!-- 编写模板,此模板放在html页面中,模板也可放在js文件中 -->
<script id="contentTemplate" type="text/html">
    <h1>{{title}}</h1>
    <ul>
        {{each list}}
            <li>你好，{{name}} 我来自{{form}}</li>
        {{/each}}
    </ul>
</script>
<!-- 渲染模板 -->
<script type="text/javascript">
    var data = {// 准备模板中涉及的数据
        name:"姜文", form:"西安"
    };
    var html = template('contentTemplate', data);// 调用template()方法将模板与数据结合进行渲染
    document.getElementById('content').innerHTML = html;// 将渲染结果写入div
</script>

实现思路：

 

定义好模板，用id拿到模板内容的字符串，用正则去匹配双花括号，找到之后使用定义好的对象属性进行替换

 

1.定义模板

 

<script id="contentTemplate" type="text/html">
    <h1>{{title}}</h1>
    <ul>
        {{each list}}
            <li>你好，{{name}} 我来自{{from}}</li>
        {{/each}}
    </ul>
</script><div id="content">准备的盒子</div>

2.用id取到模板内容
var str = document.querySelector("#contentTemplate").innerHTML;

 

3.定义替换对象和正则表达式

// 要替换的对象

 var data = {

  name:"姜文",

  from:"西安"

 }

 //正则表达式(不会正则也没关系，这块匹配的是{{name}}这种格式的字符串)

 var reg = /{{(\w+)}}/;

4.查找并替换内容 

 //注意：result的结果是一个数组 数组的第一个元素是匹配到的内容{{name}}，第二个元素是 name

 var result = reg.exec(str);

 while(result){

  str = str.replace(result[0],data[result[1]])

result = reg.exec(str);

}

 //str插入到准备的盒子里面

<div id = content></div>

 document.querySelector("#content").innerHTML = str;

 

封装实现

 

 

function template(id,data){

var str = document.querySelector("#"+id).innerHTML;

 var reg = /{{(\w+)}}/;

 var result = reg.exec(str);

 while(result){

  str = str.replace(result[0],data[result[1]])

result = reg.exec(str);

}

return str;


}