一个前端面试题，要求不用第三方js类库，不用innerhtml和eval。去往原有的dom里填充真实数据，怎么解？
具体问题如上图，求大牛点拨。谢谢。
展开
收起
1
条回答
写回答
写回答
-
题目似乎有些问题，{{m.className}},{{user.avatar}}一个前面有m，一个没有，不知道是什么意思，就当做没有处理啦。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="template-dom" class="{{className}}"> <div class="user-profile"> <div class="user-avatar"> <img src="{{user.avatar}}"> </div> {{user.name}} </div> </div> <script> var render = (function() { var reg = /{{([^}]*)}}/g /** * 根据prop获取model的某个field * @param model * @param prop * @returns {*} */ function getField(model, prop) { let keys = prop.split('.') for (let key of keys) { if (model[key] == null) { return } else { model = model[key] } } return model } function traverse(el,model){ // 文本节点,替换文本内容 if(el.nodeType == 3 ){ el.textContent = el.textContent.replace(reg,function(word,prop){ return getField(model,prop) }) } else { //非文本节点替换属性内容 var attributes = Array.prototype.slice.call(el.attributes) for (let attr of attributes) { let value = attr.value value = value.replace(reg,function(word,prop){ return getField(model,prop) }) attr.value = value } } /** * 递归替换子节点 * @type {Array.<T>} */ let childNodes = Array.prototype.slice.call(el.childNodes) for(let child of childNodes){ traverse(child,model) } } function render(el,model){ traverse(el,model) } return render; })() </script> <script> var m = { className: 'user', user:{ name: 'wscn', avatar:'https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo/bd_logo1_31bdc765.png' } } render(document.getElementById('template-dom'),m) </script> </body> </html>2019-07-17 18:57:53赞同 展开评论 打赏
版权声明：本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
相关问答
