一个前端面试题,要求不用第三方js类库,不用innerhtml和eval。去往原有的dom里填充真实数据,怎么解?-问答-阿里云开发者社区-阿里云

开发者社区> 问答> 正文

一个前端面试题,要求不用第三方js类库,不用innerhtml和eval。去往原有的dom里填充真实数据,怎么解?

a123456678 2016-03-10 16:40:01 1641

screenshot
具体问题如上图,求大牛点拨。谢谢。

前端面试dom html不用 list不用 第三方git 前端面试eval
分享到
取消 提交回答
全部回答(1)
  • a123456678
    2019-07-17 18:57:53

    题目似乎有些问题,{{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>
    0 0
开发与运维
使用钉钉扫一扫加入圈子
+ 订阅

集结各类场景实战经验,助你开发运维畅行无忧

相似问题
最新问题
推荐课程