2015阿里巴巴前端實習生在線筆試考后總結

寫在前面

還是太年輕，第一次在線筆試有些緊張了

一.2015題目

我遇到的題目：6個選擇其中3個多選，1個填空，6個大題。客服姐姐說題目是隨機給的（因為給了一個時段考試，而不是統一時間點開考），不過題型應該是固定的。

1. 單選：一個數組，兩個引用，相互賦值，問輸出

   眩暈抗性-30%

2. 單選：問一個return匿名函數的函數的執行結果，內部還有apply

   眩暈抗性再-69%

3. 單選：問字符串替換結果是什么，當然，又是套了幾層，繞了幾圈

   眩暈抗性再-1%，嗯，做完這道給徹底繞暈了

4. 多選：移動端，如果A按鈕上覆蓋了一個B按鈕，給B按鈕的touchstart事件處理器中添加什么處理能讓A觸發click

   按鈕被擋住了，要想恢復交互性，隱藏遮擋物就好了，只敢選了visible一個，因為不確定題目是不是要在本次交互中觸發click，不清楚display:none和從DOM中刪除會不會影響冒泡，沒敢選

   經過測試，發現本題根本不存在冒泡（好吧，當時可能沒睡醒），順便再測試了一下有冒泡的情況，發現不影響冒泡，即便remove掉了，還是會冒泡
   測試代碼如下：

   <!--
   <div id="div1" class="div"></div>
   <div id="div2" class="div"></div>
   -->
   
   <div id="div1" class="div">
   <div id="div2" class="div"></div>
   </div>
   
   <style>
   .div{
   width:50px;
   height:50px;
   position:absolute;
   top:0;
   left:0;
   }
   #div1{
   background-color:red;
   }
   #div2{
   background-color:green;
   }
   </style>
   <script>
   var div1 = document.getElementById('div1');
   var div2 = document.getElementById('div2');
   div1.onclick = function(){
     alert('紅色');
   }
   div2.onclick = function(){
     alert('綠色');
     
     //this.style.display = 'none';//本次交互中不會觸發紅色，下次交互會觸發，會冒泡
     //this.style.visibility = 'hidden';//同上
     //this.parentNode.removeChild(this);//同上
   }
   </script>

5. 多選：前端優化，下列哪一個可以減少HTTP請求數

   最近正在翻譯Yahoo!的30幾條前端優化原則，壓力不大
   

6. 多選：題目忘記了

   記得除了前端優化的，其它兩道都沒有絕對把握

7. 填空：個人博客地址

   想了下填了cnblogs，因為個人網站做得還不完善，拿不出手

8. 大題：生成10個10-100之間的隨機數，並降序排列

   隱約記得書上說Math.random返回(0, 1]值

   查證之后發現JS高程中文版135頁說(0, 1)，而網上的普遍說法是[0, 1)，后一種就和C里面的一樣。以前看書記得js的隨機數和C的不一樣。經過測試發現書上是錯的，確實含0不含1。總結如下：

   1. 獲取[a, b]：Math.round(Math.random()*(b-a)+a)//四舍五入
   2. 獲取(a, b]：Math.ceil(Math.random()*(b-a)+a)//向上取整（天花板）
   3. 獲取[a, b)：Math.floor(Math.random()*(b-a)+a)//向下取整（地板）
   4. 獲取(a, b)：好奇怪的需求，不如直接用第一種吧
   測試random范圍的代碼如下：

   var x = parseInt((Math.random()*90+10 + '').split('.')[0]);//取整數部分

9. 大題：實現IOS風格的switch按鈕，要求用多種方式實現

   花了太多時間，“實現”是要用嘴實現還是用代碼？用代碼寫了個小實現，七八分鍾就過去了，划不來

10. 大題：給String添加原型方法，實現簡單的模版替換

    考原型和正則表達式，不會在原型方法中獲取字符串的值，書中說一般不要給原型加自定義屬性，會污染環境，就沒太在意這方面，只注重了去理解原型，構造函數，作用域鏈的本質及其關系，結果。。

    查了一下，發現this就是原字符串的值，阿席巴思密達~~~代碼如下：

    function strcat(str){
      return this + str;
    }
    
    String.prototype.strcat = strcat;
    alert('xi'.strcat(' ba'));

11. 大題：如何在畫布上畫出任意多個邊界不相交的圓，考慮時間和空間的平衡

    后半句感覺是要寫代碼，前半句又不像，最后沒時間了，就賣了個萌——“最簡單的方法是畫同心圓”，好吧，希望能讓改卷的大大心情愉快

12. 大題：實現loadScript(url, callback)異步加載腳本，完成之后執行回調函數，要求支持IE

    非要支持IE嗎，時間不夠了，只好寫出步驟注釋

    整理的代碼庫里收藏了xhr，如下：

    /*獲取HttpRequest對象，可以兼容各個瀏覽器 包括IE5.5+*/
    function getHttpObject(){
    	if(typeof XMLHttpRequest == "undefined"){//如果該對象未定義，則自定義該對象
    		XMLHttpRequest = function(){
    			try{
    				return new ActiveXObject("Msxml2.XMLHTTP.6.0");
    			}catch(e){}
    			try{
    				return new ActiveXObject("Msxml2.XMLHTTP.3.0");
    			}catch(e){}
    			try{
    				return new ActiveXObject("Msxml2.XMLHTTP");
    			}catch(e){}
    			try{//老版本的 Internet Explorer （IE5 和 IE6）
    				return new ActiveXObject("Microsoft.XMLHTTP");
    			}catch(e){}
    			
    			return false;
    		}
    	}
    	
    	return new XMLHttpRequest();
    }
    
    var xhr = getHttpObject();
    xhr.onreadystatechange = function(){
      if(xhr.readyState === 4){
        if(xhr.status >= 200 && xhr.status < 300 || xhr.status === 304){
    	  //執行callback
    	}
    	else{
    	  //請求失敗
    	}
      }
    }
    xhr.open('get', url, true);//准備異步請求，get是為了響應速度
    xhr.send(null);//發送請求，null是為了兼容性

    在線筆試讓人寫這種東西真的好嗎？

    根據園友@李明夕和@老樓在評論中的分析，我應該是理解錯題意了，不過沒關系，代碼如下：

    <div id="div">白色變紅色</div>
    <script>
    var script = document.createElement('script');
    var callback = function(){
      $('#div').css('color', 'red');//用剛剛加載好的jquery修改樣式
    }
    
    if('onload' in script){
      script.onload = function(){
        alert('ok');
    	callback();
      }
    }
    else{
        script.onreadystatechange = function(){
        if(this.readyState === 'loaded' || this.readyState === 'complete'){
          alert('ok');
    	  callback();
        }
        else{
           alert('ERROR!!');
        }
      }
    }
    
    script.async = 'async';
    //script.src = 'test.js';
    script.src = 'http://ayqy.net/script/jquery.min.js';//加載遠程資源更容易測試異步
    document.body.appendChild(script);
    </script>
    <script>
    alert('suppose to see this first');
    </script>
    

    用script標簽動態加載（並執行）腳本需要注意以下幾點問題：

    1. IE8-支持readystatechange和async；Chrome和FF不支持readystatechange，支持load，支持async；IE9/10、Opera同時支持readystatechange，load和async
    2. 雖然readystatechange是HTML5事件，不過FF和Chrome至今都沒有實現它
    3. 詭異的是IE6先ok再向下執行再ok再ERROR，IE7/8先ERROR再向下執行再ok，IE9+未知。而FF和Chrome正常，先向下執行，再ok。
    4. 需要注意IE9/10和Opera兩者都支持的，所以不要用類似於elem.onload=elem.onreadystatechange=handler;的代碼，因為在IE9/10和Opera中會觸發多次，本來onload里面並沒有各個狀態值（都是undefined），不會觸發多次，但IE的實現很詭異，所以，有風險
    5. 為了避免IE中多次觸發回調函數，應該在ok之后移除onreadystatechange事件處理器，保證只觸發一次
13. 大題：實現JQuery中的html方法

    看時間緊迫，過於緊張了，看到題目的時候眼睛羅圈了，理解成了實現JQuery中把字符串轉HTML元素的方法，過於復雜，簡單的寫了思路。交了卷才發現看錯題了。。。

    JQuery中還有比html方法更容易實現的嗎？代碼如下：

    function html(elem){
      return elem.innerHTML;
    }
    //此處沒有完全實現，因為JQ的html方法有三種形式：html(), html(str), html(fun)，分別用來獲取/設置/用函數設置innerHTML
    

    查看了JQuery內部，發現差不多就是這樣實現的，效果一樣，測試代碼如下：

    var $div = $('#div');
    alert($div.html());
    alert($div[0].innerHTML);
    //在IE中標簽都是大寫的，其它瀏覽器中是小寫

二.是好是壞，都是一場旅行

被KO是因為自己積累不夠，比如，如果讀過JQuery源碼，Ajax就能輕松拿下；如果心態平和，認真讀題，最后一題也能瞬間搞定。。。

在線筆試最大的特點是很難集中精力，網頁很容易分散你的注意力，稍微發會兒呆，幾分鍾就沒了

總結一下這次筆試的失敗點：

1. 時間安排不合理。中間的小題浪費了太多時間
2. 心里素質不夠。過於緊張，好吧，可能是因為高考過去很久了，和考試不熟了
3. 基本功不夠扎實。比如原型，學習的時候太偏重理論了，忽略了這樣簡單實際的問題
4. 答題順序不對。先給代碼執行結果的題目繞暈了，這種東西絕對不能先答
5. 沒洗臉就開始答題了。昨晚和朋友聊到很晚才睡，自作孽。。

阿里走遠了，那我的收獲呢？

1. 參加了生平第一次在線筆試
2. 發現了自身知識網絡的漏洞（對理論爛熟，卻不知道this就是字符串的值）
3. 更清楚地認識了自我，套用前輩的一句話：雖然自認為比身邊的人要強一點，但離阿里需要的實習生還是有一段距離的。。

題目難嗎？

說實話不難，除了畫圓和xhr的題目，其它的應該沒什么難點。做的這么差的原因有很多，不單單是沒有經驗這一條可以搪塞過去的，一句話：底子還是太薄。

后話

計划3，4月份找實習，結束之后繼續潛心積攢經驗。考完郁悶一會會兒就好了，怪不了別人。沒關系，Tencent我正在來~