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

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等等，感興趣的同學可以深入研究下。