2014阿里巴巴前端开发工程师暑期实习在线测试题目及答案思路

最新推荐文章于 2024-04-01 11:00:56 发布

gravi_ontheroad

最新推荐文章于 2024-04-01 11:00:56 发布

阅读量2.3k

点赞数

分类专栏：前端文章标签：阿里巴巴前端开发工程师 web 实习生

本文链接：https://blog.csdn.net/xiejianghui_/article/details/22829911

版权

前端专栏收录该内容

9 篇文章 0 订阅

订阅专栏

今天刚做完阿里巴巴的前端暑期实习生试题，被虐的感觉，其中有一些题写出自己的思路，答案未必是对的，就想跟大家分享一下此刻凋零的心情，交流一下欢迎斧正。

1.编写一个JavasSript函数，给定一个DOM节点node和一个正整数n, 返回node的所有第n代后代节点（直接子节点为第1代）
function getDescendants(node, n) {
// return an Array
}

for (i=0;i<n;i++)

{

return node.childNodes[i].nodeValue;

}

2阅读如下代码：var dog = function() {

return '汪';
};
var cat = function(){
return '喵';
};
(function() {
if ( cat() === '喵喵' ) {
  dog = function(){
           return '汪汪';
  }
}
function cat(){
return '喵喵';
}
})();

for( var i = 0; i < 10; i++ ){
    setTimeout(function(){
        for( var j = 1; j <= i; j++ ){
            console.log( dog() );
        }
    }, 1000 * i );
}

问：

1、为什么最终小狗叫了 200 声汪？请详细说明为什么。
2、修改代码setTimeout部分代码，实现每隔1秒调用 i （从1到10递增）次 dog() 。

建议参考

http://www.douban.com/note/293295975/

setTimeout()函数用法

setTimeout()函数的使用方法与setlnterval()函数的使用方法相同，在指定的延迟（以毫秒为单位）后运行指定的函数。。

setTimeout()函数的一般形式为：
setTimeout(函数名，时间间隔，函数参数)；

调用一个无参函数：

//自定义函数，输出信息
function test()
{
trace("函数调用");
}
//每隔1000毫秒调用一次test(),输出信息。
setTimeout(test,1000);

清除setTimeout()的调用，使用clearTimeout()函数。

3请评价以下代码并给出改进意见。

if (window.addEventListener) {
var addListener = function(el, type, listener, useCapture){
   el.addEventListener(type, listener, useCapture);
  };
}
else if (document.all) {
  addListener = function(el, type, listener){
    el.attachEvent("on" + type, function(){
      listener.apply(el);
    });
  };
}

请阐述

a) 代码的功能；

b) 代码的优点和缺点；

c) listener.apply(el) 在此处的作用；

d) 如果有可改进之处，请给出改进后的代码，并说明理由。

参考答案：

a) 功能：事件注册

b) 优点：跨浏览器，特性探测，性能优化。缺点：document.all

c) 作用：使得IE中listener的this 为 el，与其它浏览器一致

d) 改进：document.all改成window.attachEvent; useCapture的默认值

4请实现一个Event类，继承自此类的对象都会拥有两个方法on和trigger，类声明如下，请写出完整代码：

function Event() {
}
Event.prototype.on = function(eventName, callback) {
//注册事件监听
}
Event.prototype.trigger = function(eventName, data) {
//触发事件
}

EventProxy.prototype.addListener = function (eventName, callback) {

this._callbacks = this._callbacks || {};

this._callbacks[eventName] = this._callbacks[eventName] || [];

this._callbacks[eventName].push(callback);

return this;

};

EventProxy.prototype.trigger = function (eventName, data) {

var list, eventName, callback, args, i, l;

var both = 2;

var calls = this._callbacks;

while (both--) {

eventName = both ? eventName : 'all';

list = calls[ev];

if (list) {

for (i = 0, l = list.length; i < l; i++) {

if (!(callback = list[i])) {

list.splice(i, 1); i--; l--;

} else {

args = both ? Array.prototype.slice.call(arguments, 1) : arguments;

callback.apply(this, args);

}

return this;

};

5.有2个int型已经去重的数组a和b，都是已经从小到大排序好的。要求遍历b数组的数字，如果这个数字出现在a中，就将其从a删去；反之将其插入到a的适当位置，使a保持排序状态。

#include<stdio.h>
#include<stdlib.h>
main()
{
  int b[]={1,2,3,4,5};
    int a[]={2,4,6,8,10};
   int length=sizeof(a)/sizeof(int)+sizeof(b)/sizeof(int);
int *c;
c=(int *)malloc(length*sizeof(int));//动态数组构建
    int i=0,j=0,k=0;
    for(i=0;i<length;i++)
    {
       c[i]=0;
}

    //将a组和b组重复的数去掉
  for(i=0;i<sizeof(a)/sizeof(int);i++)
{
       for(j=0;j<sizeof(a)/sizeof(int);j++)
     {
           if(a[i]==b[j])
          {
               a[i]=0;
             b[j]=0;
             continue;
           }
       }
   }

   i=0;
    for(j=0;j<sizeof(a)/sizeof(int);j++)//将a组的数添加到c组
{
       if(a[j]!=0)
     {
           c[i]=a[j];
          i+=1;
       }
   }

   for(j=0;j<sizeof(b)/sizeof(int);j++)//将b组的数添加到c组
{
       if(b[j]!=0)
     {
           c[i]=b[j];
          i+=1;
       }
    }

   k=i;
    int tmp=0;
  //按升序排列c组的数
for(i=0;i<k;i++)
{
       for(j=0;j<k;j++)
     {
           if(c[j]>c[j+1]&&c[j+1]!=0)
           {
               tmp=c[j];
               c[j]=c[j+1];
                c[j+1]=tmp;
         }
       }
   }

   for(i=0;i<k;i++)
{
       printf("%d\n",c[i]);
    }
}

6.<!doctype html> <html> <head> <style type="text/css"> div:not(.outer) p { color: purple; } div.outer p { color: orange; } </style> </head> <body> <div class="outer"> <p>我是 outer 里面的字</p> <div class="inner"> <p>我是 inner 里面的字</p> </div> </div> </body> </html> 为什么以上两个<p>标签中的文字颜色都是橙色的？

在这种情况下 :not伪类选择器的优先级会比类选择器还高

计算选择器里面的class选择器，属性选择器，伪类选择器的个数(=b)

一个选择器的优先级（权重）由依次串联的a、b、c三个标记来计算，

1 ID选择器「如：#header」的个数（=a）

2 Class选择器「如：.foo」、属性选择器「如：[class]」、伪类「如：:link」的个数（=b）

3 标签选择器「如：h1」、伪元素「如：:after」的个数(=c)

4 忽略「*」选择器

5 虽然伪类(如:hover)参与CSS优先级的计算，但是「:not」不参与计算。

6 HTML style 属性内的优先级在CSS2.1中有描述（实际在浏览器的实现中它不直接参与优先级的计算）只要一个选择器的 a>0，b=0，即使另外一个选择的a=0, b=161，那么前者的权重依然更大。

7你最近看的前端相关技术书是什么？常关注的博客是哪些？你觉着哪个网站的交互做的好，为什么？

《JavaScript权威指南》

《高性能网站建设指南》：前端优化，速度优化的原则

《瞬间之美:Web 界面设计如何让用户心动(》

锋利的Jquery

《瞬间之美:Web 界面设计如何让用户心动》

用户体验要素

淘宝ued http://ued.taobao.com/blog

腾讯http://www.alloyteam.com/

smashing magazine www.smashingmagazine.com

1 以目标为导向，为用户提供优雅的体验

豆瓣FM单纯地关注于音乐本身，用户不需要繁琐的操作流程，用户可以根据自己喜好进行调频换台，为用户提供了轻便而优雅的使用体验。

2 极简的界面设计，交互的及时响应性

豆瓣的界面设计极为简洁，界面设计只关注音乐本身，

3 个性化音乐推送算法

豆瓣的亮点功能是根据用户的收听行为，为用户推送类似或者相近的音乐

4 新功能不干扰用户，需要用户渐进式操作

豆瓣为用户提供了分享入口，可以将自己喜欢的音乐分享到豆瓣、微博、MSN、开心网、人人网，这些功能前提都是不干扰用户听音乐，需要用户渐进式的操作。

8请描述一下从用户输入网址开始，到网页最后呈现出来的全过程，越详细越好，包括各种事件等。

1.输入网址

2. 浏览器查找域名的IP地址

导航的第一步是通过访问的域名找出其IP地址。DNS查找过程如下：

·浏览器缓存 – 浏览器会缓存DNS记录一段时间。有趣的是，操作系统没有告诉浏览器储存DNS记录的时间，这样不同浏览器会储存个自固定的一个时间（2分钟到30分钟不等）。

·系统缓存 – 如果在浏览器缓存里没有找到需要的记录，浏览器会做一个系统调用（windows里是gethostbyname）

·路由器缓存 –

·ISP DNS 缓存 –

·递归搜索 – 你的ISP的DNS服务器从跟域名服务器开始进行递归搜索

3. 浏览器给web服务器发送一个HTTP请求

服务器给浏览器响应一个301永久重定向响应，

5. 浏览器跟踪重定向地址

6. 服务器“处理”请求

7. 服务器发回一个HTML响应

8. 浏览器开始显示HTML

9. 浏览器发送获取嵌入在HTML中的对象

10. 浏览器发送异步（AJAX）请求

9要求实现一个多行文本输入框，固定宽度。可根据用户输入的内容多少进行高度自适应变化。如，用户输入了1行文字，则输入框显示为1行、而有2行文字就显示2行。如微博的评论回复。

<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8">
<title>宽度自适应输入框</title>
<link rel="stylesheet" href="http://yui.yahooapis.com/3.0.0/build/cssreset/reset-min.css">
<style>
.col{padding:10px;width:500px;background-color:yellow;}
.fluid-input{display:inline-block;width:100%;overflow:hidden;}
.fluid-input-inner{display:block;padding-right:10px;#zoom:1;}
.fluid-input .text, .fluid-input textarea{border:2px #ccc solid;padding:3px;width:100%;}
.fluid-input textarea{height:300px;}
</style>
</head>

<body>

<div class="col">
    <b class="fluid-input"><b class="fluid-input-inner"><input class="text" type="text"></b></b>
    <b class="fluid-input"><b class="fluid-input-inner"><textarea></textarea></b></b>
</div>

</body>

</html>