具体问题如上图,求大牛点拨。谢谢。
new Function(arg1, arg2, ..., argN, function_body)
可能不对,大神轻喷。
自己写了个demo, 不知道对不,这里
但我感觉绕来绕去没什么意思,面试题至于这么整吗?
function render(dom, m) {
var re = /\{\{(.*)\}\}/g;
var outerHTML = dom.outerHTML;
var mapper = outerHTML
.match(re)
.map(v => v.replace(/(\{\{|\}\})/g, '') )
.map(v => {
var x;
try {
x = eval(v);
} catch(e) {
x = '';
}
return x;
});
return outerHTML.replace(re, function() { return mapper.shift(); })
}
对不起,我还是用了 eval
。
原本以为可以用 (new Function('return ' + v))()
之类的替代 eval
的,但实验结果是不可以。
另外,没看懂什么叫不允许替换原始 dom ,所以直接输出字符串了。
试着做了一下,很菜....
function render(e,f){
e.className = f.className;
var imgObj = e.getElementsByTagName('img')[0];
imgObj.src = f.user.avatar;
var obj = e.childNodes;
for (var i = 0; i < obj.length; i++) {
if(obj[i].className == 'user-profile'){
obj = obj[i];
}
};
var o1 = obj.lastChild;
var o2 = document.createElement('p');
o2.textContent = f.user.name;
console.log(obj.lastChild);
obj.replaceChild(o2,o1);
}
也来玩一下,同样的感觉没必要加m.
,都已经把m
对象传入了函数中了。
var render = function (dom, obj) {
var pattern = /\{\{([^(\})]*)\}\}/g,
html = dom.outerHTML,
reps = html.match(pattern)
.map(val => val.replace(/[\{\{\}\}]/g, ""))
.map( (val) => {
var keys = val.split("."),
res = obj;
for (var i of keys) {
res = res[i];
}
return res;
});
dom.outerHTML = html.replace(pattern, () => reps.shift());
};
另外,问下这是哪家公司?
var render = (function(){
function getValue(keyString, o){
var keys = keyString.split(".");
return keys.reduce(function(prev, curr){
return prev[curr];
}, o);
}
var reg = /\{\{([^\}]*)\}\}/g;
return function(elem, o){
var html = elem.outerHTML;
elem.outerHTML = html.replace(reg, function(match, g){
return getValue(g.trim(), o);
});
}
})();
不能用eval那就当然是用new Function啦。
不过还是第一个答案那样,用对象键名来取值最好
JSBin实例
var m = {
className: 'user',
user:{
name: 'wscn',
avatar:'https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo/bd_logo1_31bdc765.png'
}
}
var render = function (dom, model) {
var reg = /{{([^{}]*)}}/g
var attrs = Array.prototype.slice.call(dom.attributes)
for (let attr of attrs) {
attr.value = attr.value.replace(reg, function (src, val) {
return new Function('return ' + val)()
})
}
var childs = Array.prototype.slice.call(dom.childNodes)
for (let child of childs) {
if (child.nodeType === 1) {
render(child, model)
} else if (child.nodeType === 3) {
child.nodeValue = child.nodeValue.replace(reg, function (src, val) {
return new Function('return ' + val)()
})
}
}
}
render(document.getElementById('template-dom'), m)
27 回答13k 阅读
8 回答3.5k 阅读✓ 已解决
6 回答1.3k 阅读✓ 已解决
5 回答5.3k 阅读✓ 已解决
4 回答1.6k 阅读✓ 已解决
3 回答1.7k 阅读
4 回答2.3k 阅读✓ 已解决
题目似乎有些问题,{{m.className}},{{user.avatar}}一个前面有m,一个没有,不知道是什么意思,就当做没有处理啦。