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

眾所周知，inline-block是乙個很好用的屬性。它可以將物件呈遞為內聯物件，但是物件的內容都作為塊物件呈遞。而旁邊的內聯物件會被呈遞在同一行內，允許空格。

可惜的是，在ie6/7下是不支援這個屬性的，這時我們該如何辦呢？

這時我們可以考慮讓塊級元素設定為內聯物件呈遞（設定屬性display:inline），然後觸發塊元素的haslayout屬性（如zoom:1）。**如下：

css.ib

//html

我是ie6/7下模擬的inline-block元素

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

只需要給左側元素的布局浮動屬性，並設定寬度，右側的元素display:inline-block，ie6/7下使用相容解決方案即可解決。當然兩欄自適應布局的方法不止這一種，這裡僅僅是做乙個小小的延伸擴充套件。

class命名一直是網頁重構的乙個重要的話題，而css元件的命名就更是重中之重。如何防止命名衝突，全站元件和單頁面元件的命名怎麼從普通class命名中間區分開來，以及全站的元件和單頁面的元件之間又如何準確區分？

我這裡給出的答案是在class的命名規範上下文章，全站元件的命名加上mod字首以標示，例如：mod_xx。而單頁面元件的命名加上單頁的字首和mod標示，如：xx_mod_xx。

bootstrap的流行導致了越來越多的人去研究前端css框架，而在面試的時候面試官更多的是考察你對框架原始碼的剖析，以及知識的廣度。比如說它的柵格布局，響應式布局以及各個css元件之間的聯絡。還有個css框架是yui的purecss，它可能沒有bootstrap那麼有名氣，但恰恰是在面試的時候能夠說出這個框架的名字以及你對於它的理解，相信是可以加分不少的。pure是一組輕量的響應式css模組，pure的所有模組都是在normalize.css之上建立的。和傳統的reset不同，它提供的是跨瀏覽器保持html元素預設樣式的一致性。有興趣的同學可以深入研究學習一下。

js事件繫結，主要有三個問題：

1 事件繫結在標準瀏覽器和ie瀏覽器下的相容性寫法

2 事件繫結在標準瀏覽器下函式的第三個引數的含義

3 事件繫結在ie下，**函式的this指向會被指向window

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

obj.addeventlistener(ev,fn,false);

這個引數的名字叫做usecapture，是乙個布林值，名為冒泡獲取，false代表的含義是由裡向外，true是由外向裡。舉個栗子：

請在此點選滑鼠。

使用匿名函式解決attachevent**函式的this指向問題:

function
bindevent(elem,type,fn));
}else
}

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，已解決了相容性問題。

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

function
getie(e)
}

這個問題幾乎是hr必問，但不要以為hr僅僅想聽到你的答案是願意加班哦。看看我是怎麼回答的吧：

我不喜歡經常加班，因為我認為經常加班是工作低效率的一種表現，但是如果公司有緊急的需求需要我去加班，我願意奉獻自己的精力去完成，不會以不加班為藉口，拖延緊急專案的進度。

關於面試的問題還有很多很多，比如說前端的效能優化，seajs的模組化載入，前端mvc模式的應用，nodejs等等，感興趣的同學可以深入研究下。

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

2019校招春招面試問題彙總

前端校招面試中一些常見的問題和答案

2023年前端校招面試題整理

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

2019校招春招面試問題彙總

前端校招面試中一些常見的問題和答案

2023年前端校招面試題整理

相關推薦