当前位置:求职网>> 笔试>> SHL笔试题>>腾讯web前端开发笔试题和答案

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

来源:过来人求职网 发布日期:2012-11-07 点击:1081次   [收藏]
 
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[i]); 

}

这题初看纯属折腾,因为后面要根据逗号分隔再alert每项,何不构造一个数组对象来存放文本内容,而要用个临时变量info才存放。

如var info=["腾讯拍拍网(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() {return false;}; 

      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-content/uploads/2009/12/named-function-expressions-demystified.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() {return false;}; 

      function g() {return true;} 

   } 

})(); 

alert(f()); 

 

 

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

 

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

 

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