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

寫在前面：

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

今天鼓起勇氣開始答題，結果，呃，這套題目不像表面看起來那么簡單，原以為復習過之后至少拿到80%，然后做完發現只拿的到最多50%的樣子。

廢話就這些了，希望能提個醒，這套題目不是那么簡單。

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

一.2014真題

1. 請在觸摸屏下實現一個按鈕，當按快速觸碰按鈕並放開手時，立刻彈出“成功”二字的提示框。
2. 請封裝一個名叫Counter的計數器Class，只有兩個公有成員：
   • 完成計數動作
   • 輸出計數總數
3. 談談你對前端工程化/集成開發環境的理解和實踐，借助前端工程化你還可以優化前端開發過程中的哪些環節？
4. 使用原生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"
   }
   

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

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

二.題目分析

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

從上面的分析可以發現：

1. alibaba很注重知識面的廣度，比如HTML各種特性，移動端，HTTP協議，前端工程化等等等等
2. 對基本功的考察很細致，比如作用域，事件委托，DOM，CSS，JQuery
3. 對開發經驗的考察也有不少，比如第二題明擺着得用委托，第七題看似簡單，第十題乍看也挺簡單，越調越覺得不對勁，坑越挖越大

三.我的答案

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

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

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

4. 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);
   }
   

5. 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);///
     }
   }
   

6. 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';
   }
   

7. 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;
   }
   

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

9. //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');
     }
   });
   

10. <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。

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

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

因為題目表意不明，需要不停地揣摩出題人的意圖，而時間只有60分鍾，所以，答題時候應該“漸進增強”，明確每題只有6分鍾，不行就只完整實現最簡單的功能，比如只找出紅色塊左上角坐標，力求完整，千萬不要出現代碼因為Syntax Error而不能運行的情況，否則就真的一分都沒有了。。

參考資料

1. w3cfuns真題
2. IE6的fixed兼容問題：前端觀察，唯一一個徹底的解決方案，看到最后一題的答案了嗎，那個css表達式。。
3. HTML5觸摸事件：黯羽輕揚
4. Canvas教程：黯羽輕揚

資源下載

打包下載，所有東西都在這里，需要的朋友盡管拿去，一起考試也是一種緣分，雖然成事在天，加油。