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

这里以art-template为例

先看例子

实现思路：

 

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

 

1.定义模板

 

准备的盒子

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插入到准备的盒子里面

 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;


}