这里实现一个较传统的模板引擎。
模板引擎的实现原理其实就是拼接字符串,+号拼接速度最快。这里我们采用这种方式实现一个模板引擎。
首先,在js中,声明函数有一种原始的方式,就是
new Function(arg1, arg2..., functionBody)
前面是需要传入的参数,最后则为函数体的内容。
如:
var adder = new Function("a", "b", "return a + b");
adder(2, 6); // 8
但是要注意的是他们都要用字符串方式传入(加引号)。我们恰好可以使用这种方式来实现模板引擎。
new Function(数据名, 拼好的函数体代码)
"use strict";
function render(element, data) {
var tpl = document.getElementById(element).innerHTML.replace(/[\r\n\t]/g, '');
var body = "var p=[]; p.push('"
+ tpl
.replace(/<%=(.*?)%>/g, "');p.push($1);p.push('") // 替换<%= name %>模板数据 先讲数据进行替换
// 没有=号的是逻辑语句
.replace(/%>/g, "p.push('") // 无等号尖括号的结束其实正是push该逻辑下的模板的的开始 push(
.replace(/<%/g, "');") // ) 无等号尖括号的开始其实正是push该逻辑下的模板的结束
+ "'); return p.join('');";
var exec = new Function('data', body);
return exec(data)
}