前言
同事去面试天猫,分享出来的面试题,这道面试题,是需要在面试之后发送给面试官的,属于开放性的题目。自己试着解答了一下。
题目
问题:实现一个简单的模板渲染
给定一个模板和一个对象,利用对象中的数据渲染模板,并返回最终结果。
例如:
let template = '你好,我们公司是{{company}},我们属于{{group.name}}业务线,我们在招聘各种方向的人才,包括{{group.jobs[0]}}、{{group["jobs"][1]}}等。'
let obj = {
group: {
name: "天猫",
jobs: ["前端", "后端", "产品"]
},
company: '阿里巴巴'
}
function render(template, obj){
// 代码实现
}
// 最终返回结果为 你好,我们公司是阿里巴巴,我们属于天猫业务线,我们在招聘各种方向的人才,包括前端、后端等。
解答
function render(template, data) {
const _fn = new Function("data", `
const arr = [];
// with会将data添加到作用域链的顶部
with(data){
arr.push('${
template
.replace(/\t/g, " ") // 首先替换template中原本的\t
.split("{{").join("\t") // 将{{替换成\t
.replace(/\t(.*?)}}/g, "',$1,'") // 将 变量}} 替换成 ,变量,
}')
return arr.join('')
}
`);
return _fn(data);
}
// 你好,我们公司是阿里巴巴,我们属于天猫业务线,我们在招聘各种方向的人才,包括前端、后端等。
render(
'你好,我们公司是{{company}},我们属于{{group.name}}业务线,我们在招聘各种方向的人才,包括{{group.jobs[0]}}、{{group["jobs"][1]}}等。',
{
group: {
name: "天猫",
jobs: ["前端", "后端", "产品"]
},
company: '阿里巴巴'
}
)