一、定义
什么是模板?其产生的目的是为了解决展示与数据的耦合,实际开发中根据数据模型与模板来动态生成最终的类型片段(拿html为例)。模板引擎就是可以简化该拼接过程,通过一些声明与语法或格式的工具,尽可能让最终HTML的生成简单且直观。定义:模板引擎(这里特指用于Web开发的模板引擎)是为了使用户界面与业务数据(内容)分离而产生的,它可以生成特定格式的文档,用于网站的模板引擎就会生成一个标准的文档。
模板引擎可以让(网站)程序实现界面与数据分离,业务代码与逻辑代码的分离,这大大提升了开发效率,良好的设计也使得代码重用变得更加容易。我们司空见惯的模板安装卸载等概念,基本上都和模板引擎有着千丝万缕的联系。模板引擎不只是可以让你实现代码分离(业务逻辑代码和用户界面代码),也可以实现数据分离(动态数据与静态数据),还可以实现代码单元共享(代码重用),甚至是多语言、动态页面与静态页面自动均衡(SDE)等等与用户界面可能没有关系的功能。
示例:简单的置换型模板引擎
//定义一个模板字符串,其中<%name%>和<%age%>是要替换的变量
var template = '<p>Hello,my name is <%name%>. I am <%age%> years old.</p>';
//定义一个数据对象,包含name和age两个属性
var data ={
name:'zyn',
age:31
}
//定义一个模板引擎函数,接受两个参数:tpl是模板字符串,data是数据对象
var TemplateEngine = function (tpl,data){
//定义一个正则表达式,用于匹配模板字符串中的变量
var regex = /<%(\w+)%>/g;
//使用exec方法循环查找匹配项
while(match = regex.exec(tpl)){
//使用replace方法把匹配项替换为数据对象中对应的值
tpl = tpl.replace(match[0],data[match[1]])
}
//返回替换后的字符串
return tpl
}
//调用模板引擎函数,传入模板字符串和数据对象,并把结果赋值给string变量
var string = TemplateEngine(template,data)
//打印string变量到控制台
console.log(string);