请选择 进入手机版 | 继续访问电脑版
设为首页收藏本站

html5中文学习网

 找回密码
 立即注册

QQ登录

只需一步,快速开始

搜索
热搜: webgl框架
查看: 655|回复: 0

腾讯web前端开发笔试题及答案

[复制链接]

123

主题

2

好友

1189

积分

管理员

Rank: 9Rank: 9Rank: 9

  • TA的每日心情

    2013-4-14 22:05
  • 签到天数: 1 天

    [LV.1]初来乍到

    发表于 2016-5-11 17:12:14 |显示全部楼层
    1 请实现,鼠标点击页面中的任意标签,alert该标签的名称.(注意兼容性)
    ?
      
    1
      
    2
      
    3
      
    4
      
    5
      
    6
      
    7
      
      
    <script  type="text/javascript">
      
    document.onclick=function(e){  
      
         var e=(e||event);
      
         var o=e["target"]||e["srcElement"];
      
         alert(o.tagName.toLowerCase());  
      
    }
      
    </script>
      
    2 请指出一下代码的性能问题,并经行优化。
    ?
      
    1
      
    2
      
    3
      
    4
      
    5
      
    6
      
    7
      
    8
      
    9
      
      
    var info="腾讯拍拍网(www.paipai.com)是腾讯旗下知名电子商务网站。";
      
    info +="拍拍网于2005年9月12日上线发布,";
      
    info +="2006年3月13日宣布正式运营,";
      
    info +="是目前国内第二大电子商务平台。";
      
    info=info.split(",");  
      
    for(var i=0; i<info.length; i++)
      
    {
      
        alert(info);  
      
    }
      
    这题初看纯属折腾,因为后面要根据逗号分隔再alert每项,何不构造一个数组对象来存放文本内容,而要用个临时变量info才存放。
    如varinfo=["腾讯拍拍网(www.paipai.com)是腾讯旗下知名电子商务网站。","拍拍网于2005年9月12日上线发布,","2006年3月13日宣布正式运营,","是目前国内第二大电子商务平台。"] 。可是后来想如果是优化的话这个题目就出的没意义了。
    仔细观察info这个变量,发现它每次都要自加字符串,如果字符串很大的又很多的话会非常影响性能的。
    对于js中的string类型,属于基本类型,因此一般情况下他们是存放在栈上的。如果字符串很大,info会每次变成一个很长的字符串,会很慢。
    如果用引用类型数组来存放则好很多,如:
    ?
      
    1
      
    2
      
    3
      
    4
      
    5
      
    6
      
    7
      
    8
      
      
    var temp=[];
      
    temp.push("腾讯拍拍网(www.paipai.com)是腾讯旗下知名电子商务网站。");
      
    //temp只是一个指向堆上数组的指针
      
    temp.push("拍拍网于2005年9月12日上线发布,");
      
    temp.push("2006年3月13日宣布正式运营,");
      
    temp.push("是目前国内第二大电子商务平台。");
      
    temp.join("");
      
    alert(temp);
      
    最后一招temp.join(“”)搞定。对处理大字符串连接问题都可以采取这种思路。
    3 请给出异步加载js方案,不少于两种。
    异步加载方式:
    (1) defer,只支持IE
    (2) async:html5中script标签才有的属性
    (3) 创建script,插入到DOM中,加载完毕后callBack,见代码:
    ?
      
    1
      
    2
      
    3
      
    4
      
    5
      
    6
      
    7
      
    8
      
    9
      
    10
      
    11
      
    12
      
    13
      
    14
      
    15
      
    16
      
    17
      
    18
      
    19
      
      
    function loadScript(url, callback){
      
       var script = document.createElement("script")
      
       script.type  = "text/javascript";
      
       if (script.readyState){ //IE
      
          script.onreadystatechange  = function(){
      
             if (script.readyState == "loaded" ||
      
                script.readyState  == "complete"){
      
                script.onreadystatechange  = null;
      
                callback();  
      
             }  
      
          };  
      
       } else { //Others: Firefox, Safari, Chrome, and Opera
      
          script.onload  = function(){
      
              callback();  
      
          };  
      
       }
      
       script.src  = url;
      
       document.body.appendChild(script);  
      
    }
      
    4 请写出jQuery绑定事件的方法,不少于两种。
    ?
      
    1
      
    2
      
    3
      
    4
      
    5
      
    6
      
    7
      
      
    $("#obj").click(function(){});  
      
      
      
    $("#obj").change(function(){});  
      
      
      
    $("#obj").bind("click",function(){});  
      
      
      
    $("#obj").live("submit",function(){});
      
    5 请设计一套方案,用于确保页面中JS加载完全。
    ?
      
    1
      
    2
      
    3
      
    4
      
    5
      
    6
      
    7
      
    8
      
    9
      
    10
      
    11
      
    12
      
    13
      
    14
      
    15
      
    16
      
    17
      
    18
      
    19
      
    20
      
    21
      
    22
      
    23
      
    24
      
    25
      
      
    var n =  document.createElement("script");
      
    n.type =  "text/javascript";
      
    //以上省略部分代码
      
    //ie支持script的readystatechange属性  
      
    if(ua.ie){
      
       n.onreadystatechange  = function(){
      
           var rs = this.readyState;
      
           if('loaded' === rs || 'complete'===rs){
      
               n.onreadystatechange  = null;
      
               f(id,url);  //回调函数
      
           }  
      
    };
      
    //省略部分代码
      
    //safari 3.x supports the  load event for script nodes(DOM2)
      
       n.addEventListener('load',function(){  
      
           f(id,url);  
      
       });
      
    //firefox and opera support  onload(but not dom2 in ff) handlers for
      
    //script nodes. opera, but  no ff, support the onload event for link
      
    //nodes.
      
    }else{
      
       n.onload =  function(){
      
           f(id,url);  
      
       };
      
    }
      
    6 请优化某网页的加载速度。
    7 对string对象经行扩展,使其具有删除前后空格的方法。
    ?
      
    1
      
    2
      
    3
      
    4
      
    5
      
      
    String.prototype.trim  =function(){
      
      
      
        return this.replace(/(^\s*)|(\s*$)/g,'');
      
      
      
    }
      
    8 完成一个正则表达式,验证用户输入是否身份证号码。
    var Expression=/\d{17}[\d|X]|\d{15}/;
    var objExp=new RegExp(Expression);
    一道腾讯js面试题
    题目如下:
    f = function() {return true;};
    g = function() {return false;};
    (function() {
       if (g() && [] == ![]) {
          f = function f() {returnfalse;};
          function g() {return true;}
       }
    })();
    alert(f()); // true or false ?


    按网友的描述猜测,这应该是QQ招聘的题目,既考查了ECMAScript知识,又需要被面试者的应用实践,题目本身无标准答案,在不同浏览器下表现不同。

    这是一道难度较大,并且出题角度比较刁钻的面试题。

    正赶上最近在研究Javascript这部分的内容,便对该题目涉及的考察点进行了更深入的研究。以下给出简单分析。
    考察点
    对作用域链(scope chain)、执行环境(execution context)、变量对象(variable object)的理解
    命名函数表达式,参见这里
    以上知识点在不同浏览器(主要为:IE和Firefox)的实现差异
    相等操作符的隐式类型转换规则
    首先,代码简化为(1):
    f = function() {return true;};
    g = function() {return false;};
    (function() {
       alert(g());
       function g() {return true;}
    })();


    上面的例子中,当控制器进入匿名函数的执行环境后,初始化活动对象,函数声明g被放到了执行环境的变量对象集合中,property为g,值为g函数对象,当执行g(),返回true。
    将上面的代码稍加改变(2):
    f = function() {return true;};
    g = function() {return false;};
    (function() {
       alert(g());
       if (true) {
          function g() {return true;}
       }
    })();


    上面代码,结果应该与(1)相同,但Firefox处理结果出现了不同返回false,暂且把这看作是Firefox的bug(虽然Firefox不认为这是个Bug)。

    分析:在Firefox中,出现在条件语句中的代码块不做活动对象初始化的处理(Firefox把它当作块作用域??),即把上例的if (true) 修改为 if (false) 结果是一样的。

    到此为止,已经可以确定g()执行后的值是true还是false了。
    整合一下(3):
    f = function() {return true;};
    g = function() {return false;};
    (function() {
       if (g()) {
          alert("能看到这个警告框,说明你的浏览器不是Firefox");
          function g() {return true;}
       }
    })();

    继续分解代码(4):
    f = function() {return true;};
    g = function() {return false;};
    (function() {
       f = function() {return false;};
    })();
    alert(f());


    代码运行,无一例外的返回false,这正是我们想要的结果。
    然后稍作改变(5):
    f = function() {return true;};
    g = function() {return false;};
    (function() {
       f = function f() {return false;};
    })();
    alert(f());


    经过稍加修改后,这次掉链子的轮到IE了,IE竟然返回了true!!!这是IE的Bug,参见:

    http://www.cn-cuckoo.com/main/wp ... ied.html#named-expr

    http://www.w3help.org/zh-cn/causes/SJ9001

    至于[]==![]的结果,请参考本人《Javascript类型转换规则》一文,回过头来你就会轻易得出结论。
    最后大整合。

    我们不仅知道结果,而且知道为啥是这结果了(6):
    f = function() {return true;};
    g = function() {return false;};
    (function() {
       if (g() && [] == ![]) {
          f = function f() {returnfalse;};
          function g() {return true;}
       }
    })();
    alert(f());


    没有问题的浏览器会返回:false

    Firefox不会执行到if条件内部,返回:true

    IE会执行到if条件内部(但把if内部的f作为局部变量处理了),最后返回:true
    www.html5cn.com.cn
    回复

    使用道具 举报

    您需要登录后才可以回帖 登录 | 立即注册

    Archiver|手机版|HTML5中文学习网-HTML5先行者论坛 ( 冀ICP备13001593号  

    GMT+8, 2017-4-29 05:50 , Processed in 0.527999 second(s), 28 queries .

    Powered by Discuz! X2.5

    © 2001-2012 Comsenz Inc.

    回顶部