阿里校園招聘前端面試

　　2014年9月24日，懷着激動（必須是激動啊，第一次面試）的心情來到了杭州阿里安排的面試地點，進去簽完到后就進入了休息室進行焦急的等待。等待了大概20分鍾，就輪到我的面試了。進入了面試大廳，在工作人員（美女喲）的帶領下，來到了面試我的面試官面前，跟他握個手后就叫我坐下了。

　　面試官第一眼看着就很友好，讓我感覺也不是那么緊張了。首先作了個短暫的自我介紹，然后面試官就看我簡歷上的實習經驗，讓我說說項目上的事情。我就按照我的思路跟他說着我做的項目，中途他碰到感興趣的東西，也會問點小問題。項目介紹完后，他問我平常都在哪學習前端知識，我說自己看書，網上看博客。我知道前端招聘挺看重能有自己的github項目和博客的，但我當時自己確實沒有自己的小項目，他問我有沒有自己寫博客，我只能回答我平常有做筆記，有寫博客的打算，很想分享自己的一些見解，和大家一起學習討論（這也是我真實想法，所以今天就以這篇博客起手了），就這樣跟面試官聊了一會兒后，他說這是前端面試，還是得問我點前端的東西。

　　接着他問我項目上用到了哪些前端技術，由於我實習的公司是給企業做后台開發的，前后台開發工作基本是一起的，所以真正前端用到的技術確實不牛，規范上也差了很多，維護起來較難，所以我就差不多如實說了（現在想想是不是不應該說太多實話），但說了自己會經常的去學習更深的知識，學習前端的新知識，當我我說到了項目上有mouseover事件，然后會彈出下拉框的地方，整個面試，前端技術問題主要就是這個問題了。

　　他問我當鼠標在幾個菜單上快速移動時，怎樣解決移動時不彈出下拉框，只到停留時才會彈出下拉框，55555555項目上沒有實現這個功能，當時腦袋有點亂了，其實感覺想到了用setTimeout()，但沒說出來，后來他先說出來了，我就只能認真聽着了。最后還問道mouseover時可能會多次觸發事件，問我怎么解決，我說有mouseenter()事件，哎，平常一直都是用jquery，js好多原生的都不會寫。他就說這只是jquery的自己的方法，用原生的解決我也沒回答好。

　　最后再聊了一些家常便飯的事情，整個過程感覺還是蠻輕松加愉快的，面試官對我印象貌似也還是不錯的，但可能沒達到他心目中的水平，因此沒能讓我進入前端的二面（PS. 面試官看我簡歷項目上有很多java后台的東西，最后居然反饋說建議去java再面試，雖然現在后台已經招完了，以后補招還不確定，但我還是要很感謝他，其他跟我一起如果沒過一面的貌似都沒這個待遇）。

　　感謝阿里給我的這次面試，讓我人生又多了一份經歷，我也感覺到面試其實也不是太恐怖，只要自己准備充分了，就和平常的聊天差不多。阿里這次前端還是有點可惜的，感覺是准備時間晚了，沒有准備的太好，其實js、html5很多東西我都准備了，但這次面試都沒有考到，而我忽略了一些基本的問題。今后要找出自己的不足，后面還有很多機會再等着我，加油吧，騷年！在此還要恭喜一下跟我一起去面試的實驗室同學（志在成為前端大牛的人，以后要向他多學習學習，報他大腿了），他今天收到了阿里offer的通知。

 

回來后查閱資料，找出的mouseover多次觸發的解決辦法

為了阻止mouseover和mouseout的反復觸發，這里要用到event對象的一個屬性relatedTarget，這個屬性就是用來判斷mouseover和mouseout事件目標節點的相關節點的屬性。簡單的來說就是當觸發mouseover事件時，relatedTarget屬性代表的就是鼠標剛剛離開的那個節點，當觸發mouseout事件時它代表的是鼠標移向的那個對象。由於MSIE不支持這個屬性，不過它有代替的屬性，分別是fromElement和toElement。

 

var obj = document.getElementById(id); 
obj.onmouseover = fucntion(e) {
    var e = window.event || e ;  
    var s = e.fromElement || e.relatedTarget ;       
    if(this.contains){     
        if( !this.contains(s) ){     
            console.log('觸發over');     
        }     
     }else{     
         var res= this.compareDocumentPosition(s) ;       
         if(!(s == this || res == 20 || res == 0 )){      
             console.log('觸發over');     
         }       
     }    
}

obj.onmouseout = fucntion(e) {
    var e = window.event || e ;  
    var s = e.toElement || e.relatedTarget ;       
    if(this.contains){     
        if( !this.contains(s) ){     
            console.log('觸發out');     
        }     
     }else{     
         var res= this.compareDocumentPosition(s) ;       
         if(!(res == 20 || res == 0 )){      
             console.log('觸發out');     
         }       
     }  
}

 菜單欄連續滑動延遲處理，用setTiemout解決

var overtime,outtime;
$(selector).hover(function(){
    clearTimeout(outtime);
    overtime = setTimeout(function(){
        //some code
    },300);    
},function(){
    clearTimeout(overtime);
    outtime = setTimeout(function(){
        //some code
    },300);  
});