校招面試中積累的前端問題

css問題：

ie6/7下塊級元素如何模擬display:inline-block

衆所周知，inline-block是一個很好用的屬性。它能夠將對象呈遞爲內聯對象，可是對象的內容都做爲塊對象呈遞。而旁邊的內聯對象會被呈遞在同一行內，容許空格。
惋惜的是，在IE6/7下是不支持這個屬性的，這時咱們該如何辦呢？
這時咱們能夠考慮讓塊級元素設置爲內聯對象呈遞（設置屬性display:inline），而後觸發塊元素的hasLayout屬性（如zoom:1）。代碼以下：

//css
.ib { display:inline-block; *display: inline; *zoom:1; width: 60px; height: 60px; background: red;}
//html
<div class="ib">我是ie6/7下模擬的inline-block元素</div>

延伸上一個問題，實現兩欄自適應佈局的一個方案

只須要給左側元素的佈局浮動屬性，並設置寬度，右側的元素display:inline-block，ie6/7下使用兼容解決方案便可解決。固然兩欄自適應佈局的方法不止這一種，這裏僅僅是作一個小小的延伸擴展。

css組件的命名規範

class命名一直是網頁重構的一個重要的話題，而css組件的命名就更是重中之重。如何防止命名衝突，全站組件和單頁面組件的命名怎麼從普通class命名中間區分開來，以及全站的組件和單頁面的組件之間又如何準確區分？
我這裏給出的答案是在class的命名規範上下文章，全站組件的命名加上mod前綴以標示，例如：mod_xx。而單頁面組件的命名加上單頁的前綴和mod標示，如：xx_mod_xx。

css框架

Bootstrap的流行致使了愈來愈多的人去研究前端css框架，而在面試的時候面試官更多的是考察你對框架源碼的剖析，以及知識的廣度。好比說它的柵格佈局，響應式佈局以及各個css組件之間的聯繫。還有個css框架是YUI的pureCss，它可能沒有bootstrap那麼有名氣，但偏偏是在面試的時候可以說出這個框架的名字以及你對於它的理解，相信是能夠加分很多的。pure是一組輕量的響應式css模塊，pure的全部模塊都是在Normalize.css之上創建的。和傳統的reset不一樣，它提供的是跨瀏覽器保持HTML元素默認樣式的一致性。有興趣的同窗能夠深刻研究學習一下。

javascript問題：

事件綁定

js事件綁定，主要有三個問題：
1 事件綁定在標準瀏覽器和IE瀏覽器下的兼容性寫法
2 事件綁定在標準瀏覽器下函數的第三個參數的含義 
3 事件綁定在ie下，回調函數的this指向會被指向window

先說一下第二個問題，其它的問題可用代碼示例。

obj.addEventListener(ev,fn,false);

這個參數的名字叫作useCapture，是一個布爾值，名爲冒泡獲取，false表明的含義是由裏向外，true是由外向裏。舉個栗子：

<div id="outDiv">
  <div id="middleDiv">
    <div id="inDiv">請在此點擊鼠標。</div>
  </div>
</div>

• 全爲 false 時，觸發順序爲：inDiv、middleDiv、outDiv；
• 全爲 true 時，觸發順序爲：outDiv、middleDiv、inDiv；
• outDiv 爲 true，其餘爲 false 時，觸發順序爲：outDiv、inDiv、middleDiv；
• middleDiv 爲 true，其餘爲 false 時，觸發順序爲：middleDiv、inDiv、outDiv；

使用匿名函數解決attachEvent回調函數的this指向問題:

function bindEvent(elem,type,fn){
    if(elem.attachEvent){
        elem.attachEvent("on"+type,function(){
            fn.apply(elem,arguments);
        });
    }else{
        elem.addEventListener(type,fn,false);
    }
}

js阻止默認事件和阻止冒泡的兼容寫法

1.中止事件冒泡

//若是提供了事件對象，則這是一個非IE瀏覽器
if ( e && e.stopPropagation )
//所以它支持W3C的stopPropagation()方法
e.stopPropagation(); 
else
//不然，咱們須要使用IE的方式來取消事件冒泡 
window.event.cancelBubble = true;
return false;

2.阻止瀏覽器的默認行爲

//若是提供了事件對象，則這是一個非IE瀏覽器 
if ( e && e.preventDefault ) 
//阻止默認瀏覽器動做(W3C) 
e.preventDefault(); 
else
//IE中阻止函數器默認動做的方式 
window.event.returnValue = false; 
return false;

固然jquery中幫我集成了一個解決方案，那就是return false，已解決了兼容性問題。

js獲取元素的位置

這道面試題考察的是，有沒有獲取父元素的位置，再加上自身的offset值，代碼以下：

function getIE(e){
    var t=e.offsetTop;
    var l=e.offsetLeft;
    while(e=e.offsetParent){
        t+=e.offsetTop;
        l+=e.offsetLeft;
    }
}　　

hr問題：

你對加班的問題怎麼看？

這個問題幾乎是hr必問，但不要覺得hr僅僅想聽到你的答案是願意加班哦。看看我是怎麼回答的吧：
我不喜歡常常加班，由於我認爲常常加班是工做低效率的一種表現，可是若是公司有緊急的需求須要我去加班，我願意奉獻本身的精力去完成，不會以不加班爲藉口，拖延緊急項目的進度。

關於面試的問題還有不少不少，好比說前端的性能優化，seaJs的模塊化加載，前端MVC模式的應用，nodeJs等等，感興趣的同窗能夠深刻研究下。