web前端开发工程师笔试题及答案(二)
2013-04-14 22:46
736 查看
1、 如何实现事件委托？
首先要知道什么是事件委托。
考虑一个列表，在li的数量非常少的时候，为每一个li添加事件侦听当然不会存在太多性能方面的问题，但是当列表非常的长，长到上百上千甚至上万的时候（当然只是一个解释，实际工作中很少遇到这么多li的情况），为每个li添加事件侦听就会对页面性能产生很大的影响。
就像下面这段代码：
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8" />
<title>js性能优化</title>
</head>
<body>
<ul id='list'>
<li>精通css</li>
<li>精通js</li>
<li>精通html</li>
......
</ul>
</body>
</html>
<script type="text/javascript">
(function(){
var a=document.getElementById('list');
var b=a.getElementsByTagName('li');
for(var i=0;i<b.length;i++){
b[i].addEventListener('click',function(e){
var c = e.target;
alert(c.innerHTML);
},false);
}
})();
</script>
首先，我们来想下，产生性能问题的根本原因是什么呢？li元素（目标对象）所要进行的事件处理了。怎么可以解决这种囧况呢？
答案就是采用事件委托，将在li对象上面要处理的事件委托给父元素或者祖先元素，即为父元素绑定事件侦听，
看看下面的改进代码：
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8" />
<title>js性能优化</title>
</head>
<body>
<ul id='list'>
<li>精通css</li>
<li>精通js</li>
<li>精通html</li>
......
</ul>
</body>
</html>
<script type="text/javascript">
(function(){
var a=document.getElementById('list');
a.addEventListener('click',function(e){
var b = e.target;
alert(b.innerHTML);
},false);
})();
</script>
虽然现在很多框架都已经实现了事件委托，但是作为一个开发人员，用框架的同时我们也应该知道他实现的原理是如何的，知其然，更要知其所以然
2、 将10进制的数302转为二进制。
十进制转二进制的原理是：
用2辗转相除至结果为1
将余数和最后的1从下向上倒序写 就是结果
例如302
302/2 = 151 余0
151/2 = 75 余1
75/2 = 37 余1
37/2 = 18 余1
18/2 = 9 余0
9/2 = 4 余1
4/2 = 2 余0
2/2 = 1 余0
故二进制为100101110
所以程序可以写成这样：
var a=302;
var str="";
while(a>1){
str = a%2 + str;
a = parseInt(a/2);
}
str = a+str;
3、 js中运算符的优先级(此非原题，为原理题)
4、 typeof(null)=______
答案为object
6、 NaN * 6=__NaN____
7、 JS中调用某个函数之前，如何取得该函数最多可以传递多少个参数？该函数被调用时，如果知道传了多少个参数过来？
假设函数名为fun，那个fun.length就是它最多能接受的参数个数；
在fun函数里面，arguments就是用数组装着调用时传过来的所有参数，因此arguments.length就是已经传递过来的参数个数；
如：
function needTwoPara(p1,p2){
var a=arguments;
var result='我是个需要'+needTwoPara.length+'个参数的函数\n'
+'您输入的参数的个数为:'+a.length+'\n'
for(var i=0, len = a.length; i < len; i++){
result=result+'第'+(i+1)+'个参数为:'+a[i]+'\n'
}
result+='以上是用arguments来获得参数\n';
result+='下面用变量来获得参数:\n';
result+='p1:'+p1+'\n';
result+='p2:'+p2+'\n';
alert(result);
}
alert(needTwoPara.length);
needTwoPara('ooooo');
运行结果为：
2
我是个需要2个参数的函数
您输入的参数的个数为:1
第1个参数为:ooooo
以上是用arguments来获得参数
下面用变量来获得参数:
p1:ooooo
p2:undefined
9、 JS如何得到HTTP的请求头信息和返回的头信息？
Javascript中跟response header有关的就两个方法：
getResponseHeader 从响应信息中获取指定的http头 语法
strValue =
oXMLHttpRequest.getResponseHeader(bstrHeader);
getAllResponseHeaders 获取响应的所有http头 语法
strValue =
oXMLHttpRequest.getAllResponseHeaders();
需要注意的是，通常，在IE下不能完整的获取header报头数据，只能取到如下header数据：
X-Powered-By:
X-UA-Compatible:
Keep-Alive:
Transfer-Encoding:
Content-Type:
比如你要获取时间戳，在IE下必须做些特殊处理，需要在后端设置一下，关闭缓存：
1. header( 'Cache-Control: no-store'); // 关闭缓存
首先要知道什么是事件委托。
考虑一个列表，在li的数量非常少的时候，为每一个li添加事件侦听当然不会存在太多性能方面的问题，但是当列表非常的长，长到上百上千甚至上万的时候（当然只是一个解释，实际工作中很少遇到这么多li的情况），为每个li添加事件侦听就会对页面性能产生很大的影响。
就像下面这段代码：
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8" />
<title>js性能优化</title>
</head>
<body>
<ul id='list'>
<li>精通css</li>
<li>精通js</li>
<li>精通html</li>
......
</ul>
</body>
</html>
<script type="text/javascript">
(function(){
var a=document.getElementById('list');
var b=a.getElementsByTagName('li');
for(var i=0;i<b.length;i++){
b[i].addEventListener('click',function(e){
var c = e.target;
alert(c.innerHTML);
},false);
}
})();
</script>
首先，我们来想下，产生性能问题的根本原因是什么呢？li元素（目标对象）所要进行的事件处理了。怎么可以解决这种囧况呢？
答案就是采用事件委托，将在li对象上面要处理的事件委托给父元素或者祖先元素，即为父元素绑定事件侦听，
看看下面的改进代码：
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8" />
<title>js性能优化</title>
</head>
<body>
<ul id='list'>
<li>精通css</li>
<li>精通js</li>
<li>精通html</li>
......
</ul>
</body>
</html>
<script type="text/javascript">
(function(){
var a=document.getElementById('list');
a.addEventListener('click',function(e){
var b = e.target;
alert(b.innerHTML);
},false);
})();
</script>
虽然现在很多框架都已经实现了事件委托，但是作为一个开发人员，用框架的同时我们也应该知道他实现的原理是如何的，知其然，更要知其所以然
2、 将10进制的数302转为二进制。
十进制转二进制的原理是：
用2辗转相除至结果为1
将余数和最后的1从下向上倒序写 就是结果
例如302
302/2 = 151 余0
151/2 = 75 余1
75/2 = 37 余1
37/2 = 18 余1
18/2 = 9 余0
9/2 = 4 余1
4/2 = 2 余0
2/2 = 1 余0
故二进制为100101110
所以程序可以写成这样：
var a=302;
var str="";
while(a>1){
str = a%2 + str;
a = parseInt(a/2);
}
str = a+str;
3、 js中运算符的优先级(此非原题，为原理题)
| 运算符 | 描述 |
| . [] () | 字段访问、数组下标、函数调用以及表达式分组 |
| ++ -- - ~ ! delete new typeof void | 一元运算符、返回数据类型、对象创建、未定义值 |
| * / % | 乘法、除法、取模 |
| + - + | 加法、减法、字符串连接 |
| << >> >>> | 移位 |
| < <= > >= instanceof | 小于、小于等于、大于、大于等于、instanceof |
| == != === !== | 等于、不等于、严格相等、非严格相等 |
| & | 按位与 |
| ^ | 按位异或 |
| | | 按位或 |
| && | 逻辑与 |
| || | 逻辑或 |
| ?: | 条件 |
| = oP= | 赋值、运算赋值 |
| , | 多重求值 |
答案为object
6、 NaN * 6=__NaN____
7、 JS中调用某个函数之前，如何取得该函数最多可以传递多少个参数？该函数被调用时，如果知道传了多少个参数过来？
假设函数名为fun，那个fun.length就是它最多能接受的参数个数；
在fun函数里面，arguments就是用数组装着调用时传过来的所有参数，因此arguments.length就是已经传递过来的参数个数；
如：
function needTwoPara(p1,p2){
var a=arguments;
var result='我是个需要'+needTwoPara.length+'个参数的函数\n'
+'您输入的参数的个数为:'+a.length+'\n'
for(var i=0, len = a.length; i < len; i++){
result=result+'第'+(i+1)+'个参数为:'+a[i]+'\n'
}
result+='以上是用arguments来获得参数\n';
result+='下面用变量来获得参数:\n';
result+='p1:'+p1+'\n';
result+='p2:'+p2+'\n';
alert(result);
}
alert(needTwoPara.length);
needTwoPara('ooooo');
运行结果为：
2
我是个需要2个参数的函数
您输入的参数的个数为:1
第1个参数为:ooooo
以上是用arguments来获得参数
下面用变量来获得参数:
p1:ooooo
p2:undefined
9、 JS如何得到HTTP的请求头信息和返回的头信息？
Javascript中跟response header有关的就两个方法：
getResponseHeader 从响应信息中获取指定的http头 语法
strValue =
oXMLHttpRequest.getResponseHeader(bstrHeader);
getAllResponseHeaders 获取响应的所有http头 语法
strValue =
oXMLHttpRequest.getAllResponseHeaders();
需要注意的是，通常，在IE下不能完整的获取header报头数据，只能取到如下header数据：
X-Powered-By:
X-UA-Compatible:
Keep-Alive:
Transfer-Encoding:
Content-Type:
比如你要获取时间戳，在IE下必须做些特殊处理，需要在后端设置一下，关闭缓存：
1. header( 'Cache-Control: no-store'); // 关闭缓存
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 腾讯web前端开发工程师笔试题及答案
- 腾讯web前端开发笔试题及答案
- web前端开发工程师笔试题
- 阿里巴巴2015秋季校园招聘前端开发工程师在线笔试题及答案
- 阿里巴巴2015秋季校园招聘前端开发工程师在线笔试题及答案
- 阿里巴巴2015秋季校园招聘前端开发工程师在线笔试题及答案
- 自己整理的部分腾讯web前端开发的笔试题目及答案
- 完美世界2017年实习生游戏c++开发工程师笔试编程题答案
- 笔试题，百度流程信息管理部Web前端实习研发工程师
- web前端开发工程师需要掌握哪些核心技能？
- Web前端开发笔试&面试_05_other 2016104399MS
- web前端开发笔试集锦(javascript篇1)转
- 阿里巴巴Web前端开发面试题赋答案
- 怎样成长为一个优秀的 Web 前端开发工程师？
- Web前端开发工程师必备技术列表
- WEB前端开发工程师必备工具包(web frontend development tools)
- web前端开发工程师需要注意的一点：页面无端多次刷新
- Web前端开发工程师编程能力飞升之路
- Web 前端开发工程师必读的15 个设计博客