模板引擎Template

模板引擎实现基本原理

首先体验一下 进行简单实现

// 目标  将字符串里的带有<%= %>标识符的替换成对应的数据 
var str = '大家好！我是<%= name %>, 今年<%= age %>岁';

// 要替的数据格式  必须和标识符里面的对应起来
var data = {
    "name":"haha",
    "age":22
};
// <%= name %> 
// 简单正则表达式  用于匹配标识符
var reg = /<%=\s*(\w+)\s*%>/;

// exec用于检索字符串中的正则表达式的匹配
// exec返回一个数组  其中存放匹配的结果  如果未找到匹配  则返回值为 null
var arrReg = reg.exec(str);

console.log(arrReg);  // ["<%= name %>", "name", index: 6, input: "大家好！我是<%= name %> 今年<%= age %>岁"]

// 替换字符串的标识符所对应的数据 每次只匹配一个标识符 
// 替换数据  arrReg[0] == <%= name %>  arrReg[1] == "name"
str = str.replace(arrReg[0],data[arrReg[1]]);
console.log(str);  // 大家好！我是haha 今年<%= age %>岁

接下来直接封装为函数

1、封装模板引擎函数起来

// 封装一个模板引擎函数  传入模板id和数据
function template(temId,data){

// 获取模板字符串
var str = document.getElementById(temId).innerHTML;

// 正则表达式  标记<%= name %> 这里的变量命名规则只能是字母或数字不能有特殊字符
var reg = /<%=\s*(\w+)\s*%>/;

// exec用于检索字符串中的正则表达式的匹配
// exec返回一个数组  其中存放匹配的结果  如果未找到匹配  则返回值为 null
var arrReg = '';
while(arrReg = reg.exec(str)){

    // 匹配项替换
    str = str.replace(arrReg[0],data[arrReg[1]]);
}

// 返回替换数据后的模板字符串
return str;
}

2、调用模板引擎

 var data = {
    "name":"haha",
    "age":22
};
// 调用模板引擎
var html = template('tem',data);  // 这里返回的是模板字符串直接插入到对应的标签内即可
document.body.innerHTML = html;  // 插入到了body里

3、模板引擎

//模板引擎  template 为自定义
<script type="text/template" id="tem">
    <div>这是一个div<%= name %></div>
    <p>这是一个p<%= age %></p>
</script>

链接

• ArtTemplate
• BaiduTemplate
• velocity.js
• Handlebars