阿里巴巴2014實習生前端招聘在線筆試題

時間 2019-11-12

標籤阿里巴巴實習生前端招聘在線筆試欄目阿里巴巴简体版

原文原文鏈接

寫在前面：

嗯，一共10道小題，60分鐘。幾天前看過題目了，也簡單地挑出了知識點，並趁着還有時間把徹底不懂的點看了一下。javascript

今天鼓起勇氣開始答題，結果，呃，這套題目不像表面看起來那麼簡單，原覺得複習過以後至少拿到80%，而後作完發現只拿的到最多50%的樣子。css

廢話就這些了，但願能提個醒，這套題目不是那麼簡單。html

P.S.沒空看網頁的請直接打包帶走，拿去就能直接測試前端

一.2014真題

請在觸摸屏下實現一個按鈕，當按快速觸碰按鈕並放開手時，馬上彈出「成功」二字的提示框。
請封裝一個名叫Counter的計數器Class，只有兩個公有成員：
- 完成計數動做
- 輸出計數總數
談談你對前端工程化/集成開發環境的理解和實踐，藉助前端工程化你還能夠優化前端開發過程當中的哪些環節？

使用原生JavaScript給下面列表中的結點綁定點擊事件，點擊時建立一個Object對象，兼容IE和標準瀏覽器。

HTML:
<ul id = "nav">
<li><a href="http://ju.taobao.com/tg/brand.htm">品牌團</a></li>
<li><a href="http://ju.taobao.com/tg/point_list.htm">整點聚</a></li>
<li><a href="http://ju.taobao.com/jusp/jiazhuang/tp.htm">聚家裝</a></li>
<li><a href="http://ju.taobao.com/jusp/liangfan/tp.htm">量販團</a></li>
</ul>
Object:
{
"index" : 1, // 序號
"name" : "品牌團",
"link" : "http://ju.taobao.com/tg/brand.htm"
}

圖片分析，請編寫JS代碼獲取下圖中「紅框」的位置（「紅框」的顏色爲「FF0000」）
請實現下面浮層demo：
1. 這是一個蓋在頁面上的浮層，上下左右居中；浮層展現時，頁面不可滾動；
2. 瀏覽器窗口縮小時，浮層跟着縮小，最小（320px）；窗口放大，浮層跟着放大，最大（650px）；
3. 儘量用HTML5/CSS3方式寫，能夠不支持IE。
有一個int型數組，裏面有若干數字。要求統計出一共有多少種不一樣的數字？每種數字出現的頻率從少到多排列，頻率相同則從小到大排列。
HTTP協議是無狀態的，爲了保持用戶會話狀態使用了什麼技術方案彌補；該技術方案在用戶禁用了cookie以後，還有什麼方式實現（可不考慮安全性）
題目：現有一個字符串richText，是一段富文本，須要顯示在頁面上。有個要求，須要給其中只包含一個img元素的p標籤增長一個叫pic的class。請編寫代碼實現。可使用jQuery或KISSY。
題目：實現一個簡單的返回頂部組件的功能。要求：
1. 當頁面向下滾動距頂部必定距離（如100px）時出現，向上回滾距頂部低於一樣距離時隱藏，點擊返回頂部組件時頁面滾動到頂部；
2. 請寫出HTML、CSS和JavaScript；
3. 要求支持IE6以上、Chrome、Firefox

P.S.上面的題目來自w3cfuns，感謝前輩的題目html5

二.題目分析

第一題考知識面：移動端支持的特殊HTML5事件怎麼用
第二題考js做用域：如何實現私有成員，考察基本功
第三題又考知識面：前端工程化是啥
第四題考事件委託：js原生事件處理以及DOM節點關係：稍有深度的js題目，考察基本功
第五題又考知識面：HTML5的Canvas有啥用（不知道就只能乾瞪眼了）
第六題考DOM操做和CSS：考察基本功
第七題考數組相關函數：深度考察基本功，是否細心
第八題又考知識面：怎麼用無狀態的HTTP保持會話
第九題考JQuery：對JQuery通常瞭解是作不出來的，好比我。。
第十題考IE兼容：讓人至關無語的一道題目，能當場完美搞定的請受徒兒一拜

從上面的分析能夠發現：java

alibaba很注重知識面的廣度，好比HTML各類特性，移動端，HTTP協議，前端工程化等等等等
對基本功的考察很細緻，好比做用域，事件委託，DOM，CSS，JQuery
對開發經驗的考察也有很多，好比第二題明擺着得用委託，第七題看似簡單，第十題乍看也挺簡單，越調越以爲不對勁，坑越挖越大

三.個人答案

function tapHandler(e){
  alert("成功");
}
var btn = document.getElementById("btn");
btn.addEventListener("touchend", tapHandler, false);
btn.addEventListener("MSPointerUp", tapHandler, false);//IE

function Counter(){
  var num = 0;//私有成員
  
  this.count = function(){
    num++;
  }
  
  this.display = function(){
    return num;
  }
}

在我看來，前端工程化就是在整個開發過程當中用自動化工具來簡化開發工做。從項目構建到模塊化開發，模塊共享再到調試以及版本控制和發佈，這整個過程當中不少地方均可以利用自動化工具來幫助咱們高效地完成工做。也有不少好用的IDE，好比知名的Grunt，京東的JDF等等，能夠根據簡單的配置文件自動生成項目目錄，並提供模塊化開發所需的模塊管理組件以及版本控制功能，能夠自動處理不少細節問題，讓開發人員能夠更多地關注業務實現，以提升工做效率。

var nav = document.getElementById('nav');
function listHandler(e){
  e = e || window.event;
  var target = e.target || e.srcElement;
  if(target.nodeName === 'A'){
	//計算索引
	var currLi = target.parentNode;
	var i = 1;
	while(true){
	  if(currLi.previousSibling === null){
		break;
	  }
	  else{
		currLi = currLi.previousSibling;
		if(currLi.nodeName === 'LI'){//再作一次篩選，防止li間的空白字符被看成有效節點
		  i++;
		}
	  }
	}
	
	//返回Object
	return {index: i,
	  name: target.innerHTML,
	  link: target.href
	};
  }
}

if(nav.addEventListener){
  nav.addEventListener("click", listHandler, false);
}
else if(nav.attachEvent){//IE
  nav.attachEvent("onclick", listHandler);
}

window.onload = function(){
  var canvas = document.createElement("canvas");
  var img = document.getElementById("targetImg");

  if(canvas.getContext){
    var pos = {x: 0, y: 0, w: 0, h: 0};//結果對象
    var totalW = canvas.width = img.width;
    var totalH = canvas.height = img.height;
    var ctx = canvas.getContext("2d");
    ctx.drawImage(img, 0, 0);
    var imgData = ctx.getImageData(0, 0, totalW, totalH);
    var data = imgData.data;//獲取rgba值
    var r = 0,
        g = 0,
	    b = 0;
    for(var i = 0;i < data.length;i += 4){
      r = data[i];
	  g = data[i+1];
	  b = data[i+2];
	
	  if(r === 255 && g === 0 && b === 0){
	    //找到左上角
	    pos.x = (i / 4) % totalW;
	    pos.y = (i / 4) / totalW;
	    //找到寬度
	    for(var j = i + 4;j < totalW * (pos.y+1) * 4;j += 4){
	      r = data[j];
		  g = data[j+1];
		  b = data[j+2];
		
		  if(!(r === 255 && g === 0 && b === 0)){
		    pos.w = (j / 4) % totalW - pos.x;
		    break;
		  }
	    }
	    //找到高度
	    for(j = i + totalW * 4; j < totalW * totalH * 4;j += totalW * 4){
	      r = data[j];
		  g = data[j+1];
		  b = data[j+2];
		
		  if(!(r === 255 && g === 0 && b === 0)){
		    pos.h = (j / 4) / totalW - pos.y;
		    break;
		  }
	    }
	  
	    break;
	  }
    }
  
    alert(pos.x + ', ' + pos.y + ', ' + pos.w + ', ' + pos.h);///
  }
}

var $ = function(s){
  return document.querySelector(s);
}

var mask = document.createElement('div');
var body = document.body;
var scale = 650 / 1366;//假設默認屏幕寬度是1366px
mask.style.width = scale * 100 + '%';
mask.style.height = '50%';
mask.style.maxHeight = '400px';
mask.style.maxWidth = '650px';
mask.style.minWidth = '320px';
mask.style.zIndex = 9999;
mask.style.position = 'fixed';
mask.style.left = (100 - scale * 100)/2 + '%';
mask.style.top = '25%';
mask.style.backgroundColor = '#ccc';
mask.style.display = 'none';

mask.innerHTML = '點擊浮層關閉';
body.appendChild(mask);

var btn = $('#btn');
btn.onclick = function(e){
  mask.style.display = 'block';
  body.style.overflowY = 'hidden';
}

mask.onclick = function(e){
  mask.style.display = 'none';
  body.style.overflowY = 'auto';
}

var arr = [1, 2, 2, 4, -1, 3, 6, 15, 1];

function count(arrArg){
  var arr = arrArg.concat();//複製一個數組
  arr.sort();//排序
  var index = 0;
  var result = [{value : arr[0], times : 1}];//結果數組
  for(var i = 1;i < arr.length;i++){
    if(arr[i] === result[index].value){
	  result[index].times++;
	}
	else{
	  result[++index] = {value : arr[i], times : 1};//建立新元素並存入結果數組
	}
  }
  
  return result;
}

利用存儲在客戶端的Cookie來維持會話狀態，能夠簡單地用URL傳值（把一個特殊串做爲會話ID嵌在頁面URL中），或者使用HTML5的localStorage，IndexedDB等技術，但須要作好瀏覽器兼容

//JQuery
//插入節點
var richText = $('<div id="richText">' + text + '</div>');
$(document.body).append(richText);
//設置樣式
$('p>img').each(function(){
  var $p = $(this).parent();
  console.log($p.html());///
  if($p.children().length === 1 && $p.find('img').length === 1 && $p.text() === ''){
    $p.addClass('pic');
  }
});

<style type="text/css">
.top{
width : 50px;
height : 50px;
z-index : 9999;
position : fixed;
bottom : 20px;
right : 20px;
display : none;
background-color:#ccc;
border:1px solid red;
}
</style>
<!-- ie6 hack -->
<!--[if lt IE 7]>
<style type="text/css">
/*防止抖動*/
body{
background-image:url(about:blank);
background-attachment:fixed;
}
/*用css表達式模擬fixed*/
div.top{
position: absolute;
right: 20px;
top:expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop,10)||0)-(parseInt(this.currentStyle.marginBottom,10)||0)) - 20);
}
</style>
<![endif]-->
<script type="text/javascript">
var topDiv = document.createElement('div');
topDiv.className = 'top';
topDiv.innerHTML = 'TOP';

topDiv.onclick = function(){
  document.documentElement.scrollTop = document.body.scrollTop = 0;
  this.style.display = 'none';
}

document.body.appendChild(topDiv);

function topHandler(e){
  var dis = document.body.scrollTop;
  dis = dis === 0 ? document.documentElement.scrollTop : dis;//FF
  if(dis >= 100){
    topDiv.style.display = 'block';
  }
  else{
    topDiv.style.display = 'none';
  }
}

if(document.addEventListener){
  document.addEventListener('scroll', topHandler, false);
}
else if(document.attachEvent){//IE，給document和body添加onscroll都沒有用，只能給window添加
  window.attachEvent('onscroll', topHandler);
}

四.作後感

把全部的坑的都踩了一遍，第十題原本費了好大勁用onmousewheel搞定了，結果想一想以爲要用onscroll。node

還有JQuery的第九題，看似特別好欺負，誰知道JQuery裏面文本不算節點的，用siblings用next用prev用children用:only-child都~~~沒有用，測試了好久才發現沒有TextNode一說，直接致使N種方案所有失效，作完發現還不如不用JQuery呢，惟一的便利就是$('strHtml')。。express

不知道是否是個人理解能力有問題，以爲有的題目說的並不清楚，好比第九題，想考JQuery，題目的意思更像是作字符串處理，找紅色塊的位置，只要左上角座標嗎？不說清楚，答題的只好把(x, y, w, h)全都算了一遍。。。canvas

由於題目表意不明，須要不停地揣摩出題人的意圖，而時間只有60分鐘，因此，答題時候應該「漸進加強」，明確每題只有6分鐘，不行就只完整實現最簡單的功能，好比只找出紅色塊左上角座標，力求完整，千萬不要出現代碼由於Syntax Error而不能運行的狀況，不然就真的一分都沒有了。。前端工程化