跳到主要内容

模板引擎

基础

function parseString(str, obj) {
Object.keys(obj).forEach(key => {
str = str.replace(new RegExp(`{{${key}}}`,'g'), obj[key]);
});
return str;
}
const str = "{{name}}很厉name害{{name}},才{{age}}岁";
const obj = { name: "jawil", age: "15" };
console.log(parseString(str, obj));

高级

function template(tpl: string, data) {
tpl = tpl.replace(/(\r|\n)/ig, "");

var arr = tpl.split(/(\<%=?|%\>)/gm); // 拆分模板
var funcBody = ["with(this){\r\nvar result=[];"];

var item, codeType;

codeType = 0;

for (var i = 0; i < arr.length; i++) {
item = arr[i];
//将代码片段分为3类
if (item == "<%") {
codeType = 1;
continue;
} else if (item == "<%=") {
codeType = 2;
continue;
} else if (item == "%>") {
codeType = 0;
continue;
}
//为3类代码片段生成最终可被eval的函数体
if (codeType == 0) { //字符
funcBody.push("result.push(\"");
funcBody.push(item);
funcBody.push("\");\r\n");
} else if (codeType == 1) { //代码
funcBody.push(item);
funcBody.push("\r\n");
} else if (codeType == 2) { //代码输出
funcBody.push("result.push(");
funcBody.push(item);
funcBody.push(");\r\n");
}
}
funcBody.push("return result.join('')\r\n}");

var template_func = new Function(["renderData"], funcBody.join(""));
return template_func.apply(data, [data]);
}

推荐书籍

  • [Compilers: Principles,Techniques and Tools ] ()
  • [DSL In Action ] ()
  • [Language Implementation Patterns: Create Your Own Domain-Specific and General Programming Languages ] ()

参考