javascript - 一个前端面试题,要求不用第三方js类库,不用innerhtml和eval。去往原有的dom里填充真实数据,怎么解?
伊谢尔伦
伊谢尔伦 2017-04-11 10:29:59
[JavaScript讨论组]

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

伊谢尔伦
伊谢尔伦

小伙看你根骨奇佳,潜力无限,来学PHP伐。

全部回复(12)
巴扎黑

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 ,所以直接输出字符串了。

最后说一下自己的看法,这类题目平时玩玩还好,真要做面试题?
恶心死人了,活该招不到人。

PHP中文网

试着做了一下,很菜....

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);
        });
    }

})();
高洛峰

这是模板页面吧,通过后台程序自动替换内容到页面中的,出题的人不懂技术吧,或者一枝半解,为了效率,功能也不会这样设计的

伊谢尔伦

使用with以及Function应该可以完成这类问题,具体可以参考阮一峰javascript教程with使用方法

伊谢尔伦

node类的相关api

ringa_lee

楼主的这个问题,好像当面试题真的是要让人感觉要吐呀

迷茫

这种面试题可以直接PASS
完全没什么必要

热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号