以下是一个使用纯粹的JavaScript实现的简单模板引擎示例:
function render(template, data) {
// 匹配模板中的变量
var re = /{{\s*([^{}\s]*)\s*}}/g;
//替换模板中的变量为数据的值
var result = template.replace(re, function(match, variable) {
return data[variable] || "";
});
return result;
}
// 示例数据
var data = {
name: "John",
age: 30,
city: "New York"
};
// 示例模板
var template = "Name: {{ name }}, Age: {{ age }}, City: {{ city }}";
// 渲染模板并输出结果
var output = render(template, data);
console.log(output);
运行以上代码将输出:Name: John, Age: 30, City: New York
。
在这个示例中,我们创建了一个render
函数,它接受一个模板字符串和一个数据对象作为参数。然后,我们使用正则表达式匹配模板中的变量,并通过替换函数将变量替换为数据对象中对应的值。最后,我们返回替换后的结果。
这个示例只是一个简单的模板引擎实现,它没有实现复杂的逻辑和流程控制。如果需要更复杂的模板引擎功能,可以考虑使用现有的JavaScript模板引擎库,如Handlebars或Lodash的模板引擎。这些库提供了更多的功能和灵活性。